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
d1d2d3
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伸缩盒模型(新)
属性
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;
}
d1d2d3
如果觉得《html盒子颜色代码 css盒子(示例代码)》对你有帮助,请点赞、收藏,并留下你的观点哦!