盒子模型

目录

1.什么是盒子模型？

2.边框

2.1 border-color边框颜色

2.2 border-width指定border的粗细

2.3 border-style指定border的样式

2.4 border的简写属性

3.外边距

4.内边距

5.盒子模型的尺寸

6. box-sizing拯救布局

6.1常用属性值

7.圆角边框

7.1圆角的使用

7.2 使用border-radius制作特殊图形

7.2.1圆形

7.2.2半圆

7.2.3扇形

8.盒子阴影

8.1语法属性

8.2 box-shadow的使用

---

1.什么是盒子模型？

每一个在页面中可以被看到的元素都是一个盒子模型

在CSS中，一个独立的盒子模型由content（网页内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成。

 

2.边框
 

2.1 border-color边框颜色

属性	描述
border-top-color	上边框颜色
border-right-color	右边框颜色
border-bottom-color	下边框颜色
border-left-color	左边框颜色
border-color	三种简写： 1.写四个颜色（顺序为上右下左） 2.写两个颜色（顺序为上下，左右） 3.写一个颜色（四边同一颜色）

 

2.2 border-width指定border的粗细

属性	描述
border-top-width	上边框宽度
border-right-width	右边框宽度
border-bottom-width	下边框宽度
border-left-width	左边框宽度
border-width	四种简写： 1.写一个（设置四个边框） 2.写两个（设置上下，左右） 3.写三个（设置上，左右，下） 4.写四个（设置上，右，下，左）

2.3 border-style指定border的样式

一般想让一个元素显示其边框，需设置边框样式为实线才能显示

属性	描述
border-top-style	设置上边框线的样式
border-right-style	设置右边框线的样式
border-bottom-style	设置下边框线的样式
border-left-style	设置左边框线的样式
border-width	四种简写： 1.写一个（设置四个边框） 2.写两个（设置上下，左右） 3.写三个（设置上，左右，下） 4.写四个（设置上，右，下，左）

border-style常用值，默认none无

值	描述
dotted	虚线
solid	实线
double	双线
dashed	虚线

 

2.4 border的简写属性

示例：border：9px #F00 dashed 即设置某网页元素的下边框为红色 9px、虚线显示
注意当同时设置三个属性时，统通常的顺序为粗细、颜色和样式

 

3.外边距

属性	描述
margin-top	设置上外边距
margin-right	设置右外边距
margin-bottom	设置下外边距
margin-left	设置左外边距
margin	四种简写： 1.写一个（设置四个边框） 2.写两个（设置上下，左右） 3.写三个（设置上，左右，下） 4.写四个（设置上，右，下，左）

 

4.内边距

属性	描述
padding-top	设置上内边距
padding-right	设置右内边距
padding-bottom	设置下内边距
padding-left	设置左内边距
padding	四种简写： 1.写一个（设置四个边框） 2.写两个（设置上下，左右） 3.写三个（设置上，左右，下） 4.写四个（设置上，右，下，左）

 

5.盒子模型的尺寸

提示：一般设置width或height是设置元素的长宽

内盒的总尺寸：border+padding+内容宽/高

外盒的总尺寸：border+padding+margin+内容宽/高

 

6. box-sizing拯救布局

更多了解

属性	描述
box-sizing	定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。

6.1常用属性值

属性	描述
border-radius：10px	设置四个边的弧度为10px距离
border-radius：10px 20px	设置上下边的弧度为10px距离，左右边的弧度为20px距离
border-radius：10px 20px 30px	设置下内边距

 

 

7.圆角边框

7.1圆角的使用

设置圆角的四种写法，border-radius的单位可以使px，也可以是%

属性	描述
border-radius：10px	设置四个边的弧度为10px距离
border-radius：10px 20px	设置上下边的弧度为10px距离，左右边的弧度为20px距离
border-radius：10px 20px 30px	设置下内边距
border-radius：10px 20px 30px 40px	设置左内边距

配图：

 

7.2 使用border-radius制作特殊图形

7.2.1圆形

利用border-radius属性制作圆角是有两个要点
①元素的高度和宽度必须相同
②圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

示例：

div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}

 

7.2.2半圆

利用border-radius属性制作半圆形的两个要点
①制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
②制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

示例：

div{
    width: 300px;
    height: 150px;
	border-radius: 150px 150px 0px 0px ;
	border-style: solid;
}

 

7.2.3扇形

利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同，“一不同”是圆角取值位置不同

示例：

div{
	width: 300px;
	height: 300px;
	border-radius:0px 0px 0px 300px;
	border-style: solid;
}

 

8.盒子阴影

8.1语法属性

语法：

box-shadow:inset x-offset y-offset blur-radius color;

 

属性	描述
inset	阴影类型，可选，不选默认外阴影，inset表示内阴影
x-offset	X轴位移
y-offset	Y轴位移
blur-radius	阴影模糊半径
color	阴影颜色

X轴Y轴坐标图：

 

8.2 box-shadow的使用

示例代码：

			div:nth-child(2){
				width: 50px;
				height: 50px;
				margin: 50px 0px 0px 100px;
				border: solid;
				box-shadow: 20px 10px 10px #00FFFF;
			}

效果：