第六章盒子模型

一、什么是盒子模型

二、边框

1.边框颜色border-color

/*定义块宽高10px，行内块元素*/
div{width: 10px;height: 10px;display: inline-block;border: 1px solid;}
/*上边框颜色*/
#main1{border-top-color:red ;}
/*下边框颜色*/
#main2{border-bottom-color:blue ;}
/*左边框颜色*/
#main3{border-left-color:green ;}
/*右边框颜色*/
#main4{border-right-color:yellow ;}
/*四个边框为同一个颜色*/
#main5{border-color: blanchedalmond;}
/*上下和左右边框颜色*/
#main6{border-color: red green;}
/*上、左右、下边框颜色*/
#main7{border-color: red green blue;}
/*上、下、左、右边框各个的颜色*/
#main8{border-color: red green blue yellow;}

2.边框粗细border-width

thin细的、medium中等的、thick厚的、像素值
border-top-width:5px; 顶部边框宽度
border-right-width:10px; 右边框宽度
border-bottom-width:8px; 底部边框宽度
border-left-width:22px; 左边框宽度
border-width:5px ; 四条边框宽度相同
border-width:20px 2px;上下和左右边框宽度
border-width:5px 1px 6px;
上、左右、下边框宽度
border-width:1px 3px 5px 2px;
上、下、左、右各个边框宽度

3.边框样式border-style

none默认值，不显示、hidden隐藏、
dotted点虚线、dashed虚线、solid实线、double双行线
border-top-style:solid;顶部边框实线
border-right-style:solid;右边框实线
border-bottom-style:solid; 底部边框实线
border-left-style:solid; 左边框实线
border-style:solid ; 四条边框样式相同
border-style:solid dotted;上下和左右边框样式
border-style:solid dotted dashed;上、左右、下边框样式
border-style:solid dotted dashed double;上、下、左、右各个边框样式

/*定义块宽高20px，行内块元素,边框宽度1像素，颜色红色*/
div{width: 20px;height: 20px;
display: inline-block;border-width: 1px ;border-color: red;}
/*上边框样式none不显示*/
#main1{border-top-style:none ;}
/*下边框样式hidden隐藏(不显示)*/
#main2{border-bottom-style:hidden ;}
/*边框样式实线soild*/
#main3{border-style:solid ;}
/*边框样式虚线dashed*/
#main4{border-style:dashed ;}
/*边框样式点虚线dotted*/
#main5{border-style: dotted;}
/*边框样式双实线double*/
#main6{border-style: double;}

4.border

border:不分顺序包括颜色，粗细，样式
必须有颜色和粗细，不然不能显示

三、外边距margin

1.方向

margin-top:1px      上外边距
margin-right:2px    右外边距
margin-bottom:2px   下外边距
margin-left:1px     左外边距
margin :3px 5px 7px 4px; 上、右、下、左外边距
margin :3px 5px;上下、左右外边距
margin :3px 5px 7px;上、左右、下外边距
margin :8px;上下左右外边距均为

2.网页居中

网页居中对齐的必要条件
①必须是块元素、②必须是固定宽度

margin：水平像素 auto;

四、内边距padding

padding-top:1px      上内边距
padding-right:2px    右内边距
padding-bottom:2px   下内边距
padding-left:1px     左内边距
padding :3px 5px 7px 4px;     上、右、下、左内边距
padding :3px 5px;上下、左右内边距
padding :3px 5px 7px;上、左右、下内边距
padding :8px; 上下左右内边距均为

五、盒子的尺寸

盒子模型总尺寸=border+padding+margin+内容宽度
左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

六、拯救盒子模型box-sizing

box-sizing：content-box;默认值，盒子的总尺寸
width 与 height 只包括内容的宽和高，
不包括边框（border），内边距（padding），外边距（margin）。
内边距、边框和外边距都在这个盒子的外部

box-sizing: border-box; 
盒子的宽度或高度等于元素内容的宽度或高度
边框以内的宽度=设置的宽度，里面的内容紧贴紧，不考虑外边距

box-sizing:inherit;元素继承父元素的盒子模型模式

浏览器兼容性

七、圆角边框

1.语法

border-radius: 左上  右上  右下  左下;对角线组合

2.圆形

元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
(只有正方形才能实现圆形)

3.半圆形

制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
(只有正方形才能实现半圆形)

4.扇形

“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
(只有正方形才能实现扇形)

/*圆形占面还是正方形的站面*/
#main1{
width: 40px;
height: 40px;
border: 1px solid red;
border-radius: 50%;
}
/*上半圆，左上和右上为高度值*/
#main2{
width: 40px;
height: 20px;
border: 1px solid green;
border-radius: 20px 20px 0px 0px;
}
/*左半圆，左上和左下为宽度值*/
#main3{
width: 20px;
height: 40px;
border: 1px solid yellow;
border-radius: 20px 0px 0px 20px;
}
/*左上扇形，左上为宽度值，其余角不动*/
#main4{
width: 40px;
height: 40px;
border: 1px solid blue;
border-radius: 40px 0px 0px 0px;
}

八、盒子阴影

1.语法

内阴影
box-shadow:inset  x-offset  y-offset  blur-radius  color;
外阴影
box-shadow:  x-offset  y-offset  blur-radius  color;
inset：阴影类型内阴影
x-offset：X轴位移，指定阴影水平位移量
正值阴影在对象右边，负值阴影在对象左边
y-offset：Y轴位移，用来指定阴影垂直位移量
正值阴影在对象底部，负值阴影在对象顶部
blur-radius：阴影模糊半径阴影向外模糊的模糊范围
默认为0，只能是正值，值越大阴影边缘越模糊
color：阴影颜色，定义绘制阴影时所使用的颜色

/*设置行内块元素，右外边距，设置宽高像素，边框样式粗细颜色*/
div{display: inline-block;
margin-right: 50px;
width: 40px;
height: 40px;
border: 1px solid red;}
/*inset内阴影，一个盒子阴影*/
#main1{
box-shadow: inset orange 5px 5px 1px; 
}
/*不加inset外阴影，一个盒子阴影*/
#main2{
box-shadow:yellow  5px 5px 1px; 
}
/*一内一外盒子阴影*/
#main3{
box-shadow: inset blue 5px 5px 1px, green 5px 5px 1px; 
}

2.浏览器兼容