今日学习内容
CSS的盒子模型
页面布局的时候我们要学习三大核心：
盒子模型、浮动和定位
盒子模型的组成
1.边框
border属性可以设置元素的边框，边框是由三部分组成，宽度、样式、颜色
语法：
border：border-width border-style border-color；
例如：border：10px solid(实线) red（复合型写法）
border-style：（单独写法）
border-top：（单独设置上边框）
加入边框会使整体盒子变大（减小盒子）
常用的属性值：
solid
dotted（点线边框）
dashed（虚线边框）
表格的细线边框：
border-collapse：collapse；将相邻的边框合并在一起
2.内边距（padding）
padding的属性来设置内边距，就是边框和内容之间的距离
属性：
padding-left
padding-right
padding-top
padding-bottom
简写为
padding：像素值；顺序为上右下左
只写一个代表全部为一个像素值
两个代表上下为第一个 左右为第二个
三个为 第一个是上 第二个是左右 第三个是下
padding不撑开盒子
如果盒子没有指定宽度，就不会被padding撑开盒子，反之则会撑开
若不想被撑开，将宽高减掉padding值
3.盒子的外边距
简写：
margin：同padding相同
典型应用
1）盒子水平居中
margin：0 auto（居中）
盒子必须有宽度
2）让行内盒子水平居中
给父元素加text-algin：center
外边距的合并
使用margin定义块元素的垂直外边距时，可能会出现外边距合并问题’
主要有两种情况：
相邻块元素的垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上盒子有下边距，下盒子有上边距，他们之间的边距为较大的一方而不是相加，这种现象就是垂直边距的合并
解决方法：只设置一个
嵌套块元素的垂直外边距的塌陷
如果两个嵌套的盒子，父子元素都有上外边距，此时父盒子会塌陷
解决方法：
1）给父元素添加上边框
2）给父元素添加上内边距
3）给父元素添加overflow：hidden；属性
清除内外边距
* {
margin：0；
padding：0；
}
CSS的圆角边框
border-radius：像素值/百分比；（数值为框内四个角的圆的半径）
画一个正圆
先设置一个正方形，将属性值设为宽高的一半 或50%
如果想要单独设置四个角的圆角边框值不一致
border-top-left-radius:左上角圆角边框设置
CSS的盒子阴影
在css中使用box-shadow属性来为盒子添加阴影
相应的属性值：
h-shadow 必须值，水平阴影的位置，允许有负值
v-shadow 必须值，垂直阴影的位置，允许有负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
inset 可选 ，外部阴影是outset 内部阴影是inset
color 可选 阴影的颜色
box-shadow:h-shadow v-shadow blur spread color inset;
注意：
默认的阴影是外部阴影（outset），但是不能在box-shadow里面写
盒子阴影不会影响盒子大小，不会影响盒子排列
|
