css3弹性盒模型

时间 2019-11-12

标签 css3 css 弹性模型栏目 CSS 繁體版

原文原文链接

仍是那句话，学了过不了多久就忘了，因此本人仅仅只是当个笔记的做用，没有什么高深的看法，勿喷！css

此次该给css3中的弹性盒模型作作笔记了html

插入一段代码css3

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test-self</title>
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;}
.box div{width:100px;height:100px;background:red;border:1px solid #000;}
</style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

如上所示，给父元素加display:box或diaplay:inline-box便可用弹性盒模型，上述代码最终效果就像给子元素设置了float:left;属性同样；web

Box-orient 定义盒模型的布局方向 Horizontal 水平显示 vertical 垂直方向，这条属性能够设置子元素是水平或者垂直排列、布局

box-direction 元素排列顺序 Normal 正序 Reverse 反序，这条属性是规定子元素的排列顺序。固然，咱们会用flex

box-ordinal-group 设置元素的具体位置这个属性来设置每一个子元素更具体的位置，如ui

.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

　　下面讲讲盒模型中盒子的弹性空间Box-flexspa

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
</style>
</head>
<body>
<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

　　如上所示，最终的效果就是第一个div占300px，后面根据比例占不一样的分数，第二个盒子占剩余空间的2/14.code

也就是说子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 全部子元素的box-flex属性值的和。orm

最后，来说讲一个很是有用的东西。box-pax 对盒子的富裕空间的管理。

Start 全部子元素在盒子左侧显示，富裕空间在右侧 End 全部子元素在盒子右侧显示，富裕空间在左侧 Center 全部子元素居中 Justify 富余空间在子元素之间平均分布

经过这些属性的设置，能够很方便的完成一些菜单之类的布局，我的感受比float好用多了

在垂直方向上：

box-align 在垂直方向上对元素的位置进行管理 Star 全部子元素在据顶 End 全部子元素在据底 Center 全部子元素居中