CSS-02(圆角,阴影,轮廓/框模型,margin/padding/box-sizing)

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> < /table> (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一般没有背景色

原文地址:https://www.cnblogs.com/codexlx/p/12461801.html