html盒⼦颜⾊代码,css盒⼦（⽰例代码）1.盒⼦模型的内容包括：content，padding，border，margin
2.盒⼦模型分类：
标准盒：正常盒，怪异盒
伸缩盒：新，旧
内边距：padding
1.内边距在content外，边框内
padding    设置所有边距
padding-bottom  设置底边距
padding-left    设置左边距
padding-right  　设置右边距
padding-top    设置上边距
添加内边距的时候，只需要设置padding，不需要改变content⼤⼩，padding会⾃动撑开。
边框：border
border-width    边框宽度
border-style    边框样式
border-color    边框颜⾊
border-radius    设置圆⾓边框
box-shadow    设置对象阴影
border-image  　边框背景图⽚
外边距：margin
1.围绕在内容边框的区域就是外边距，外边距默认为透明区域
2.外边距接受任何长度单位，百分数值
margin      设置所有边距
margin-bottom  设置底边距
margin-left    设置左边距
margin-right  　设置右边距
margin-top    设置上边距
注意：外边距合并
3.标准盒⼦模型
4.怪异盒⼦模型
box-sizing：border-box； 固定了盒⼦的⼤⼩，只在盒⼦内部改变值。
5.css伸缩盒⼦(旧)
-1.css3引⼊了⼀种新的布局模式-Flexbox布局，即伸缩布局盒模型(Flexible Box)，⽤来提供⼀个更加有效的⽅式制定，调整和分布⼀个容器⾥项⽬布局，
即使它们的⼤⼩是未知或者动态的。
-2.Flexbox布局可以轻松的实现屏幕和浏览器窗⼝⼤⼩发⽣变化时，保持元素的相对位置和⼤⼩不变。
-3.属性
box-orient    伸缩盒对象的⼦元素的排列⽅式
box-pack    ⽔平居中
box-align    垂直居中
box-flex    　伸缩盒对象的⼦元素如何分配其剩余空间
box-direction    伸缩盒对象的⼦元素的排列顺序是否反转
例⼦如下：
html
d1
d2
d3
css
.one{width:100px;height:100px;background-color:blue;-webkit-box-flex:1;
}.two{width:100px;height:100px;background-color:pink;-webkit-box-flex:1;
}.three{width:100px;height:100px;background-color:green;-webkit-box-flex:1;
}.container{width:600px;height:600px;background-color:dimgrey;display:-webkit-box; /*变成盒⼦*/-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-direction:reverse;
}
6.css伸缩盒模型(新)borderbox
属性
flex      复合属性，设置伸缩盒对象的⼦元素如何分配空间
flex-grow  　弹性盒的扩展⽐率，按⽐例平均分配
flex-flow    复合属性，设置伸缩盒对象的⼦元素排列⽅式
flex-direction  伸缩盒对象的⼦元素在⽗容器中的位置
flex-wrap    设置伸缩盒对象的⼦元素超出⽗容器时是否换⾏
3个div 每个宽度200px，⽗容器为300px，超出了300px，但是三个div每个都会变成100px，这时需要设置flex-flow：wrap；(即超过部分换⾏，div会变成3⾏显⽰)
order    　设置伸缩盒对象的⼦元素出现的顺序
.one{width:100px;height:100px;background-color:blue;-webkit-flex-grow:1;
/*第⼀个div 第三个显⽰*/-webkit-order:3;
}.two{width:100px;height:100px;background-color:pink;-webkit-flex-grow:1;
/*第⼆个div 第⼀个显⽰*/-webkit-order:1;
}.three{width:100px;height:100px;background-color:green;-webkit-flex-grow:1; /*第三个div 第⼆个显⽰*/-webkit-order:2;
}.container{width:600px;height:600px;background-color:dimgrey;
/*变成盒⼦*/display:-webkit-flex;-webkit-flex-direction:column;
/*超出⽗容器时换⾏*/-webkit-flex-flow:wrap;
}
d1
d2
d3

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。