网页布局本质
1、准备好相关的网页元素，网页元素基本都是盒子box
2、利用CSS设置好盒子样式，然后摆放到相应的位置
3、往盒子里面装内容
核心是第二步
盒子模型组成
边框 外边距 内边距 实际内容
border margin padding content
边框
属性 作用
border-width 定义边框粗细，单位px
border-style 边框样式
border-color 边框颜色
border-style: solid （实线边框）| dashed (虚线边框) | dotted(点线边框)
边框简写
border: 粗细 样式 颜色 （没有顺序，通俗写法是这样）
边框分开写法
border-top border-bottom border-left border-right
表格边框
合并相邻边框： border-collapse:collapse;
td,th {
border: 1px solid pink;
border-collapse: collapse; //把相邻的边框合在一起
font-size: 14px;
text-aligm: center;
}
注意：边框会影响盒子的实际大小
内边距(padding)
文字与边框的距离
属性 作用
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 4个值，分别代表上 右 下 左 顺时针
注意：内边距也会增大盒子的实际大小
如果不指定宽度那么内部据padding不会增加盒子大小
外边距margin
margin-top
margin-bottom
margin-left
margin-right
margin: 30px 上下左右都是30px
margin: 30px 50px 上下30px，左右50px
margin: 30px 50px 30px 上30px 左右50px，下30px
margin: 30px 50px 30px 50px 上30px 右50px 下30px 左50px
让盒子水平居中
盒子必须指定宽度
盒子左右的外边距设置为auto margin: 0 auto;
行内元素或者行内块元素水平居中就是给其父元素添加 text-align: center
外边距合并
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值
解决方案三种：
为父元素定义上边框
为父元素定义上内边距
为父元素添加overflow:hidden
清楚内外边距
网页元素有很多都带有默认的内外边距，而且不同的浏览器默认的也不一致。因此我们在布局前首先要清除网页元素的内外边距
* {
padding: 0;
margin: 0;
}
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
去掉list前面小圆点
list-style: none
css3新增属性
圆角边框
border-radius: length;
radius为圆的半径
border-radius后面可以跟四个值，代表左上、右上、右下、左下
分开写：border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset
值 描述
h-shadow 必须，水平阴影的位置，允许负值
v-shadow 必须，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影的颜色
inset 可选，将外部阴影改成内部阴影
注意：
默认是外阴影，但是不可以写这个单词，否则会出错
阴影不占用空间，不影响其它盒子排列
div.hover 可以营造出鼠标经过才显示阴影的效果
文字阴影
text-shadow: h-shadow v-shadow blur color
