一、什么是盒子模型
二、边框
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;
}