相关概念
所有的HTML标签都可以看成矩形盒子,由width、height、padding和border构成,称为“盒模型”
所以盒子的总宽度:width+左右padding+左右border;盒子的总高度:height+上下padding+上下border;
width
盒子中内容的宽度,而不是盒子的宽度
height
盒子中内容的高度,而不是盒子的高
border
边框
border: 1px solid #000;(宽度、实线、颜色)
padding
内边距:盒子边框内壁到文字的距离。
四个方向的padding可以分别用小属性进行设置:padding-top、padding-right、padding-bottom、padding-left
padding的四数值写法:四个数值以空格隔开进行设置,分别表示上、右、下、左的padding
padding的三数值写法:三个数值以空格隔开进行设置,分别表示上、左右、下的padding
padding的二数值写法:二个数值以空格隔开进行设置,分别表示上下、左右的padding
灵活设置padding属性:可以用小属性层叠大属性,如下:
padding: 20px;
padding-bottom: 50px;
margin
外边距,即盒子和其他盒子之间的距离
margin也有四个方向,可以分别用小属性进行设置:margin-top、margin-right、margin-bottom、margin-left
margin的塌陷:竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准。注意左右方向没有塌陷现象,是叠加的。
一些元素有默认的margin,比如:body、ul、p等,在开始制作网页的时候,要将它们清除
如何清除?如下
*{
margin: 0;
padding: 0;
}
“*”表示通配符选择器,表示选择所有元素
通配符有效率问题,工作时一般使用并集选择器,如下
body,ul,p{
margin: 0;
padding: 0;
}
盒子的水平居中:将盒子左右两边的margin都设置为auto,盒子将水平居中
margin: 0 auto;
文本居中是:text-align:center;和盒子水平居中是两个概念
盒子的垂直居中,需要使用绝对定位技术实现
盒模型计算
父盒子给子盒子实际可用面积是由width和height决定
box-sizing属性
将盒子添加了box-sizing:border-box;之后,盒子的width、height数字就表示盒子实际占有的宽高(不含margin)了,即padding、border变为内缩的,不再外扩。
该属性大量应用于移动网页制作中,因为它结合百分比布局,弹性布局等非常好用,在PC页面开发中使用较少。
兼容到IE9
display属性
行内元素和块级元素
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;也可以将元素隐藏,但是元素不放弃自己的位置