1.1 看透网页本质
网页布局过程:
1. 准备网页元素,网页元素基本都是盒子 box
2. 利用 CSS 设置好盒子样式,然后摆放到相应位置。
3. 往盒子里放东西。
本质:利用 CSS 摆盒子
1.2 盒子模型(Box Model)组成
1.3 边框(border)
border 可以设置元素边框。边框有三个组成:`border-width`、`border-style`、`border-color`
属性可连写: border: border-width || border-style || border-color;
border-collapse:collapse;
表示将相邻边框合并在一起
1.4.边框会影响实际大小
解决办法
(1)测量盒子的时候不测边框 (2)用width/height-边框宽度*2
1.5.内边距 (padding)
padding
属性设置内边距,即边框与内容之间的距离。
padding 属性简写
- 1 个值:上下左右(四面全部)
- 2 个值:上下,左右
- 3 个值:上,左右,下
- 4 个值:上,右,下,左 (按照顺时针)
注意
当盒子已经有了宽度和高度,再指定内边距,会撑大盒子
解决办法:用width/height-多出来的内边距
1.6 外边距(margin)
margin-left
: 左外边距margin-right
: 右外边距margin-top
: 上外边距margin-bottotm
: 下外边距
margin
简写方式与 padding
一致。
1.7.外边距--水平居中
(1)盒子必须指定宽度(width)
(2)盒子左右的外边距都设置为auto
1.8。垂直外边距的塌陷
对于两个嵌套关系的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案
(1)为父元素定义上边框
(2)为父元素定义上内边距
(3)为父元素添加 overflow:hidden
1.9.清除内边距
* {
margin: 0;
padding: 0;
}