CSS02（圆角，阴影，轮廓/框模型，margin/padding/boxsizing）

4 边框的圆角（倒角）
border-radius：
取值：px/%
单角定义：border-top-left-radius:

5 边框阴影
box-shadow:0px 0px 0px 0px 000 inset/outset;
值1：h-shadow---水平方向的阴影偏移（阴影左右移动）
值2：v-shadow---垂直方向的阴影偏移（阴影上下移动）
值3：blur---阴影模糊距离（越大越淡）
值4：cspread---阴影尺寸（阴影大小）
值5：color---阴影颜色，默认黑色
值6：内阴影或者外阴影（默认）
最简写：box-shadow:h-shadow v-shadow

6 轮廓
outline:width style color;
边框外面的一圈,轮廓不占用元素的占地空间。项目中常用于去除边框
outline:0;

五 框模型（盒子模型）
每个元素在页面上都有自己的占地空间，元素在页面上实际占地空间的计算方式就叫框模型。
**元素实际占地宽度：** 左右外边距+左右边框+左右内边距+内容区域宽度
**元素实际占地高度：** 上下外边距+上下边框+上下内边距+内容区域高度

1 外边距margin
改变外边距元素会有位移效果；外边距没有颜色。
注意：左右外边距如果冲突，以左为准；上下外边距冲突，以上为准
**margin:v1**---同时设置上下左右四个方向的外边距
**margin：v1 v2**---设置上下 左右的外边距
**margin：v1 v2 v3** ---设置上 左右 下的外边距
**margin：v1 v2 v3 v4** ---设置上 右 下 左四个方向的外边距
**margin-top/right/bottom/left**---单独设置四个方向的外边距
取值：①px为单位②%为单位（不论是宽还是高，都是按照父元素的宽度的百分比）
③取值为正：left 向右；top 向下；right 向左；bottom：向上
④取值为负：与上相反
⑤auto：上下外边距无效，自动计算块级元素的左右外边距，让块级元素（此块级元素设置了宽度）居中。设置了auto，**左右外边距=（父元素的内容宽度-当前元素内容区域宽度-左右边框-左右内边距）/2**
auto对上下外边距无效，对行内元素无效，对行内块元素无效。多用：margin：0 auto

外边距的特殊效果：
**（1）外边距合并：** 两个垂直外边距相遇时，会合并成一个，值以大的为准
解决方案：只写上外或者下外。
**（2）外边距溢出：**
特殊情况下为子元素设置上外边距，会作用到父元素上。
特殊情况：①父元素没有上边框；②子元素内容区域的上边与父元素的内容区域的上边重合
解决方案：①给父元素加上边框；②给父元素加上内边距；③给父元素添加overflow：hidden/auto(如果想要溢出显示，就不能用了)；**④**在子元素之前加一个空的

（table的特殊机制）
**（3）行内，行内块，块级元素的总结（★★★★★）**
① 行内元素的特点：
a 设置宽高无效，宽度根据内容自动撑开
b 上下外边距无效，左右外边距有效
c 可以和其他行内元素和行内块元素公用一行，一行放不下，再折行
② 行内块元素的特点：
a 四个方向外边距有效
b 如果一个行内块上下外边距调整，改变了位置，会带着其他元素一起改变位置。
（4）自带外边距的元素：
body h1-h6 p  dd dl dt
body:4个8px
ul>li:上下外边距16px，左内40px
**css reset**：不同浏览器对默认的外边距解析有差别，所以在写代码之前，一般会把内外边距清空，这个行为称为css reset
2 内边距padding
内边距发生变化，感觉是元素大小发生变化，但是元素的内容区域没有变，改变的是元素的占地大小。
什么时候使用内边距：把元素撑开的时候。以及在特殊情况下作为元素之间的空白间距。
什么时候使用外边距：位置的微调
padding: v1
padding: v1 v2
padding: v1 v2 v3
padding: v1 v2 v3 v4
padding-top/right/botton/left:
取值：①以px为单位的数字；②％（父元素的款的百分比）；③padding没有auto
块级，行内块，行内的padding都有用
padding的颜色与背景色一致

3 box-sizing
**box-sizing:**
**content-box** (默认：意思是设置的宽度是内容区域的宽度，即正常元素占地宽度)
**border-box**（表示此时设置的宽度是边框以内的内容区域的宽度）
改变盒子模型的计算方式
正常元素占地宽度：左右外边距+左右边框+左6右内边距+内容区域宽度
改变盒子模型后的计算方式：width+左右外边距
注意：box-sizing:border-box要写在设置了百分比宽高的元素上
border-box一般没有背景色