每个盒子具备的特征
内容(content)
- 盒子里面装的东西
- 常见属性
- width:宽度
- min-width:最小宽度
- max-width:最大宽度
- height:高度
- min-height:最小高度
- max-height:最大高度
内边距(padding)
- 盒子边框和内容区之间的间距
- 内边距(padding)相关CSS属性
padding
:是padding-top、padding-right、padding-bottom、padding-left的简写属性
- 内边距会撑大盒子的总大小
- 内边距的妙用
- 如果不希望让内容区紧挨着盒子边缘,可以通过设置内边距,将内容区挤进去
边框(border)
- 就是盒子的边框,边缘部分
- 盒子的大小包括盒子边框大小
外边距(margin)
- 盒子和其他盒子之间的间距
- 外边距(margin)相关属性
- margin:是margin-top、margin-right、margin-bottom、margin-left的简写属性
- 可以设置百分比:参考父元素的宽度,但是很少这么做
盒子模型结构
- 盒子的宽度计算:width(内容区) + 左右的padding(内边距) + 左右的border(边框线)
- 盒子的高度计算:height(内容区) + 上下的padding(内边距) + 上下的border(边框线)
外边距的传递和折叠
margin-top和margin-bottom的传递
- margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
- margin-bottom传递(很少见)
- 如果块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素
- 如何防止出现传递问题?
- 触发BFC(结界)
- 给父元素设置overflow为auto
- 建议:
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距
- 触发BFC(结界)
margin-top和margin-bottom的折叠
- 垂直方向上相邻的2个盒子的margin-top、margin-bottom有可能会合并为1个margin,这种现象叫做collapse(折叠)
- 水平方向上的margin(margin-left、margin-right)永远不会collapse(折叠)
- 如何防止折叠现象发生?
- 只设置其中一个元素的margin-top
边框相关属性
边框相关的css属性
- border-width:边框的宽度
- border-color:边框颜色
- border-style:边框样式
border-top、border-right、border-bottom、border-left
- 设置不同方向的边框的简写
boder-left: 10px solid red
border: 统一设置4个方向的边框
boder: 10px solid red
边框样式的取值(常用的就dashed和solid)
- dashed:边框是一条虚线
- solid:边框是一条实线
- none:没有边框,边框颜色、边框宽度会被忽略
- dotted:边框是一系列的点
- double:边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值
boder实现各种形状
实现两个三角形拼接成的正方形
.box1 { width: 0; background-color: skyblue; border-top: 100px solid red; border-left: 100px solid blue; }
实现4个三角形拼接成的正方形
.box2 { width: 0px; border-top: 100px solid black; border-left: 100px solid bisque; border-right: 100px solid aqua; border-bottom: 100px solid slateblue; }
实现一个正三角形
.box3 { width: 0px; /* transparent用于设置颜色为透明 */ border-top: 100px solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid slateblue; }
实现一个倒三角形
.box4 { width: 0px; /* transparent用于设置颜色为透明 */ border-top: 100px solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid slateblue; /* 将该盒子旋转180度 */ transform: rotate(180deg); }