盒子模型

1.什么是盒子模型

网页里面的每一个标签，都可以当做是一个盒子，该盒子是用来放内容的

通过：宽高，内边距，边框，外边距定义盒子

2.边框

每条边框可以通过三个属性设置，分别设置：边框宽度 边框颜色 边框类型

边框类型solid，表示实线

边框类型double，表示双实线

边框类型dashed，表示虚线

边框类型dotted，表示点线

通常情况下，盒子的四条边框的样式应该是统一的，可以通过下面的三个属性去统一设置

border:10pxtomatodotted

去掉文本框的轮廓线

outline:none

3.内边距

可以分别设置盒子四个方向的内边距

padding-top:20px;padding-right:40px;padding-bottom:60px;padding-left:80px;

padding是缩写属性，可以分别设置：上 右 下 左 四条边的内边距。（顺序是顺时针）

padding:20px40px60px80px;

padding如果只设置3个属性值，分别是：上 右 下，左边采用右边的值

padding:20px40px60px

padding如果只设置2个属性值，分别是：上 右，左边采用右边的值，下面采用上面的值

padding:20px40px

padding如果只设置1个属性值，表示上 右 下 左采用相同的内边距

padding:20px

4.外边距

外边距是设置盒子与盒子的间距

margin-top:50px;margin-right:50px;margin-bottom:100px;margin-left:100px;

注意：上下两个盒子的间距，采用上面盒子的底边距和下面盒子的上边距的最大值

margin的缩写属性，用法根padding一样

5.盒子居中

因为网页中的很多标签，都有默认的样式，在实际开发中，我们又不需要这些默认的样式，

所以，可以使用通用选择器，去掉这些默认样式

*{/* 去掉外边距 */margin:0;/* 去掉内边距 */padding:0;/* 去掉列表符号 */list-style:none;/* 去掉轮廓线 */outline:none;/* 去掉下划线 */text-decoration:none;}

如果设置盒子居中显示。属性值auto，表示自动，左右外边距的属性值为auto，会自动平分剩余的空间

margin:0auto

6.盒子尺寸

width和height属性设盒子内容区域的大小

border，padding，margin 会增长盒子的整体尺寸

盒子的实际宽度= width + border-left + border-right + padding-left + padding-right + margin-left + margin-right

box-sizing属性设置盒子的类型，默认值是content-box，是内容盒子，表示width和height的空间全部给内容

属性值border-box，是边框盒子，盒子的边框和内边距产生的空间从width和height里面扣除

7.display属性

块级元素：特点是独占一行，可以识别宽高属性

一个块级元素的实际宽度 = width + border-left/right + padding-left/right + margin-left/right

margin-right属性的默认值是auto，所以，剩余的空间会给margin-right

行级元素：特点是按行显示，一行不够放，会自动换行，不识别宽高属性，它的实际大小还有内容决定

通过display属性，可以设置标签的显示方式，inline表示行内元素，block表示块级元素，none表示不显示

inline-block表示行内块元素，既有块级元素可以识别宽高的特点，又有行内元素在一行显示的特点

8.盒子阴影

盒子阴影：属性值分别是：X轴偏移量 Y轴偏移量 模糊半径 阴影颜色

box-shadow:10px10px5pxblue

第一个属性值设置为inset，表示内阴影

box-shadow:inset0px0px30pxblue

9.圆角边框

分别设置4个角的圆角

border-top-left-radius:20px;border-top-right-radius:40px;border-bottom-right-radius:60px;border-bottom-left-radius:80px;

一个属性值是横向宽度，第二个属性值是纵向宽度，这样的圆角就是椭圆圆角

border-top-left-radius:20px40px;border-top-right-radius:40px60px;border-bottom-right-radius:60px80px;border-bottom-left-radius:80px100px;

border-radius是缩写属性，可以同时设置：左上 右上 右下 左下，四个角的圆角

border-radius:20px40px60px80px;

四个角的圆角都设置为50%，就是正圆

border-radius:50%;