文章目录
网页布局本质
网页布局就是由一个又一个的盒子组成的，盒子包括标准流，浮动和定位。
下面有个口诀：
列找标准流
行找浮动
飘动找定位
css盒子模型
网页布局的核心就是盒子。
盒子组成
边框
是由粗细，样式，颜色组成。
border:border-width | border-style | border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框的颜色 |
- border-style：solid(实线边框)，dashed(虚线边框)，dotted(点边框)
- border-color：red
复合写法：
border: 3px solid red
内边距
设置盒子中的内容和边框的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
复合写法：
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 1个值，代表上下左右都有5像素内边距 |
| padding:5px 10px; | 2个值，代表上下内边距是5像素，左右内边距是10像素; |
| padding:5px 10px 20px; | 3个值代表上内边距5像素 左右内边距10像素 下内边距20像素 |
| padding:5px 10px 20px 30px; | 上5，右10，下20，左30 |
注意：padding会影响盒子的实际大小。
外边距
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
复合写法：
| 值的个数 | 表达意思 |
|---|---|
| margin:5px; | 1个值，代表上下左右都有5像素外边距 |
| margin:5px 10px; | 2个值，代表上下外边距是5像素，左右外边距是10像素; |
| margin:5px 10px 20px; | 3个值代表上外边距5像素 左右外边距10像素 下内边距20像素 |
| margin:5px 10px 20px 30px; | 上5，右10，下20，左30 |
注意：左右margin设置为auto
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大外边距的值。
解决方案：
-
为父元素定义上边框。
-
可以为父元素定义上内边距。
-
可以为父元素添加overflow:hidden。
清除内外边距代码
* {
margin:0;
padding:0;
}
圆角边框
盒子可以变成圆角的了。
只需要在盒子中添加如下代码就行了：
border-radius:length;
盒子阴影
只需要在盒子中添加如下代码就行了：
box-shadow:h-shadow v-shadow blur spread color inset;
同样可以用text-shadow来设置文字阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 必须，水平阴影的位置 |
| v-shadow | 必须，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影尺寸 |
| color | 可选，阴影颜色 |
| inset | 可选，外部阴影改为内部阴影 |
例子：
box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3);