盒子模型

1、盒子模型：padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法，这些矩形统称为盒子，英文为box。

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

3、边框：
（1）border-color：颜色

（2）border-width:粗细（thin细的、medium中等，默认值2px、thick：粗的）

（3）border-style:样式（none表示无边框、dotted点线、dashed虚线、solid实线）

4、外边距：位于盒子边框外，指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离。
注意：并集选择器是同时选中各个基本选择器所选择的范围，任何形式的选择器（包括标签选择器，类选择器，ID选择器等）都可以作为并集选择器的一部分，多个选择器通过逗号连接。

5、使用“margin:0px auto”让元素水平居中的条件：这个元素必须是块元素；其次这个元素要设置固定宽度。

6、内边距：用于控制内容与边框之间的距离。

7、盒子模型的尺寸：

（1）内盒的总尺寸=border+padding+内容宽/高

（2）外盒的总尺寸=border+padding+margin+内容宽/高

8、box-sizing拯救布局：

box-sizign:content-box|border-box|inherit

border-box:盒子的宽度或高度等于元素内容的宽度或高度。
content-box:默认值
inherit:此值使元素继承父元素的盒子模型模式

圆角边框

1、border-radius属性的语法：四个属性值按顺时针排列（左上，右上，右下，左下）没有的找对边。

border-radius：length{1,4};

2、使用border-radius制作特殊图形：

（1）圆形：元素的宽度和高度必须相同；圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%。

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

}

（2）半圆形：制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值。制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值。

div{
    background: red;
    margin: 30px;
}
div:nth-of-type(1){
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}
div:nth-of-type(2){
    width: 100px;
    height: 50px;
    border-radius:0 0 50px 50px;
}
div:nth-of-type(3){
    width: 50px;
    height: 100px;
    border-radius:0 50px 50px  0;
}
div:nth-of-type(4){
    width: 50px;
    height: 100px;
    border-radius: 50px 0 0 50px;
}

（3）扇形：遵循“三同，一不同”原则，元素宽度，高度，圆角半径相同；圆角取值位置不同。

div{
    background: red;
    margin: 30px;
}
div:nth-of-type(1){
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
}
div:nth-of-type(2){
    width: 50px;
    height: 50px;
    border-radius:0 50px 0 0;
}
div:nth-of-type(3){
    width: 50px;
    height: 50px;
    border-radius:0 0 50px 0;
}
div:nth-of-type(4){
    width: 50px;
    height: 50px;
    border-radius: 0 0 0 50px;
}

盒子阴影

1、基本语法：

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

inset:阴影类型，可选值，默认为外阴影，inset为内阴影。
blur-radius:阴影模糊半径，代表阴影向外模糊的模糊范围。只能为正值，若为0，表示不具有模糊效果，是可选值。