什么是盒模型
- 所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型”
- 盒子的总宽度 = width + 左右padding + 左右border
- 盒子的总高度 = height + 上下padding + 上下border
width属性
- width属性表示盒子内容的宽度
- width属性的单位通常是px,移动端开发也会涉及百分数、rem等单位
-当块级元素(div、h系列、li等)没有设置width属性时,它将自动撑满,但这并不意味着width可以继承
height属性
- height属性表示盒子内容的高度
- height属性的单位通常是px,移动端开发也会涉及百分数、rem等单位
- 盒子的height属性如果不设置,它将自动被其内容撑开,如果没有内容,则height默认是0
margin属性详解
- margin是盒子的外边距,即盒子和其他盒子之间的距离
- margin也有四个方向
小属性 | 意义 |
margin-top | 上margin,“向上踹” |
margin-right | 右margin,“向右踹” |
margin-bottom | 下margin,“向下踹” |
margin-left | 左margin,“向左踹” |
- 竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准
- 一些元素(比如body、ul、p等)都有默认的margin,在开始制作网页的时候,要将他们清除
* { /*通配符选择器*/
margin: 0;
padding: 0;
}
body, ul, p { /*表示选择所有元素*/
margin: 0;
padding: 0;
}
盒子的水平居中
- 将盒子左右两边的margin都设置为auto,盒子将水平居中
.box {
margin: 0 auto;
}
- 文本居中是text-align: center; 和盒子水平居中是两个概念
- 盒子的垂直居中,需要使用绝对定位技术实现
padding属性详解
- padding是盒子的内边距,即盒子边框内壁到文字的距离
- 四个方向的padding,可以分别用小属性进行设置
小属性 | 意义 |
padding-top | 上padding |
padding-right | 右padding |
padding-bottom | 下padding |
padding-left | 左padding |
- padding属性如果用四个数值以空格隔开进行设置,分别表示上、右、下、左的padding
- padding属性如果用三个数值以空格隔开进行设置,分别表示上、左右、下的padding
- padding属性如果用二个数值以空格隔开进行设置,分别表示上下、左右的padding
行内元素和块级元素
display属性类型 | 是否能并排显示 | 是否能设置宽高 | 当不设置width属性时 | 举例 |
块级元素 | 否 | 是 | width自动撑满 | div、section、header、h系列、li、ul等 |
行内元素 | 是 | 否 | width自动收缩 | a、span、em、b、u、i等 |
- img和表单元素是特殊的行内块,它们既能够设置宽度高度,也能够并排显示
行内元素和块级元素的相互转换
- 使用display:block;即可将元素转为块级元素
- 使用display:inline;即可将元素转为行内元素,将元素转为行内元素的应用不多见
- 使用display:inline-block;即可将元素转为行内块
元素的隐藏
- 使用display: none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样
- 使用visibility: hidden;可以也可以将元素隐藏,但是元素不放弃自己的位置
box-sizing属性
- 将盒子添加了box-sizing: border-box; 之后,盒子的width、height数字就表示盒子实际占有的宽高(不含margin)了,即padding、border变为“内缩”的,不再“外扩”
.box {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 10px;
}
- box-sizing属性大量应用于移动网页制作中,因为它结合百分比布局、弹性布局等非常好用,在PC页面开发中使用较少
- box-sizing属性兼容到IE9