css3 box-lines属性笔记

原创 国哥笔记  2019-01-08 14:15  阅读 293 views 次

box-lines属性定义及用法

box-lines属性是css3新增的属性,用来规定如果列超出了父框中的空间,是否要换行显示,是一种新的弹性盒布局属性。目前主流浏览器都还不支持该属性,在这就简单的记录一下该属性的用法;

box-lines属性默认情况下(不设置该属性),水平框会在单独的行中排列其子元素,而垂直框会在单独的列中排列其子元素。

css3 box-lines属性语法格式

box-lines: single/multiple;

属性值说明

  • single:所有子元素会被放置在单独的行或列中(默认);
  • multiple:允许框扩展为多行,以容纳其所有子元素;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-lines属性笔记</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 200px;height: 80px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-lines:multiple;
}
</style>
</head>
<body>
<div class="box1"><p>111111</p><p>222222</p><p>4444444</p><p>55555555</p></div>
</body>
</html>

运行结果:

浏览器目前还不支持,暂无运行结果!

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/php-box-lines.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情