第六章 盒子模型
1.盒子模型组成
边框(border)
外边距(margin)
内边距(padding)
盒子的内容(content)
2.边框
border-color:边框颜色
border-top-color 上边框颜色
border-right-color右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-width:边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style:边框样式
border-top-style
border-right-style
border-bottom-style
border-left-style
常见样式:
none
hidden
dotted
dashed
solid
double
border:边框简写
同时设置边框的颜色、粗细和样式
例:border: 1px dashed red;
3.外边距margin(CSS外边距是围绕在元素边框的空白区域)
margin-top
margin-right
margin-bottom
margin-left
margin
注意：margin:0px auto;可以使元素居中对齐
4. 内边距padding(元素的内边距在边框和内容区之间)
margin-top
margin-right
margin-bottom
margin-left
margin
5. 盒子模型的尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
6.box-size
content-box:默认值，盒子的总尺度
border-box:盒子的宽度或高度等于元素内容的宽度或高度
inherit:元素继承父元素的盒子模型模式
7.圆角边框(border-radius)
7.1 border-radius:x y z m;
例:border-radius: 20px 10px 50px 30px
注意:四个属性值按顺时针排列
7.2 圆形
a.元素的宽度和高度必须相同
b.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
例:div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
7.3 半圆
a.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
b.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
7.4 扇形
a.“三同”是元素宽度、高度、圆角半径相同
b.“一不同”是圆角取值位置不同
7.5 盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
inset:阴影类型内阴影
x-offset：X轴位移，指定阴影水平位移量
y-offset:Y轴位移，用来指定阴影垂直位移量
blur-radius:阴影模糊半径阴影向外模糊的模糊范围
color:阴影颜色，定义绘制阴影时所使用的颜色
