前端——CSS盒子模型

盒子模型

盒子模型原理

在 CSS 中，矩形对象统称为盒子(box)
盒子模型由网页内容(content)、边框(border)、内边距(padding)、外边距(margin)组成。
盒子模型的边框、内外边距有上(top)、下(bottom)、左(left)、右(right)四条边，设置样式时可以分别设置。

边框颜色

border-color 属性用于设置盒子模型的边框颜色。
border-color 属性的基本用法:
所有边框的颜色值;border-color:
border-color:上下边框颜色值 左右边框颜色值;
border-color:上边框颜色值 右边框颜色值 下边框颜色值 左边框颜色值；
border-color:上边框颜色值 左右边框颜色值 下边框颜色值;
border-top-color:上边框颜色值
border-bottom-color:下边框颜色值:
border-left-color:左边框颜色值:
border-right-color:右边框颜色值
经验:使用 border-color 给边框设置边框颜色时，遵循“上右下左，没有找对边”的原则。

边框粗细

border-width 属性用于设置边框粗细。

基本用法

border-width:所有边框的粗细;
border-width:上下边框粗细 左右边框粗细;
border-width:上边框粗细 右边框粗细 下边框粗细 左边框粗细
border-width:上边框粗细 左右边框粗细 下边框粗细;
border-top-width:上边框粗细:
border-bottom-width:下边框粗细;
border-left-width:左边框粗细:
border-right-width:右边框粗细
常见的边框粗细:
边框粗细                    描述
thin                          细的边框。
medium(默认值)     中等边框。
thick                        粗的边框。
像素值                    具体的边框宽度。

边框

border-style 属性用于设置边框样式

基本用法

border-style:所有边框的样式;
border-style:上下边框样式 左右边框样式;
border-style:上边框样式 右边框样式 下边框样式 左边框样式;
border-style:上边框样式 左右边框样式 下边框样式:
border-top-style:上边框样式:
border-bottom-style:下边框样式
border-left-style:左边框样式:
border-right-style:右边框样式
边框样式
边框样式            描述
none(默认值)   无边框。
dotted              点线边框。
dashed            虚线边框。
solid                实现边框。

边框属性

border 属性是一个复合属性，是 border-color、border-width、border-style 属性的简写形式。这三个属性的编写顺序没有限制，可以按照任意顺序设置。
border 属性的基本用法:
border:边框颜色 边框粗细

外边距

margin 属性用于设置盒子模型的外边距。
基本用法
margin:所有方向的外边距
margin:上下外边距 左右外边距:
margin:上外边距 右外边距 下外边距 左外边距
margin:上外边距 左右外边距 下外边距
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距

margin 属性除了设置像素值的外边距外，还可以设置为 auto，可以使元素水平居中。
magin 属性让元素水平居中，要求元素必须是块元素。
元素必须要有固定宽度。

内边距

padding 属性用于设置盒子模型的内边距。
基本用法
padding:所有方向的内边距
padding:上下内边距 左右内边距
padding:上内边距 右内边距 下内边距 左内边距
padding:上内边距 左右内边距 下内边距
padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距

圆角边框

border-radius
border-radius 属性用于为盒子模型添加圆角边框

基本用法

border-radius:四个角的圆角半径
border-radius:左上右下 右上左下
border-radius:左上右上右下左上
border-radius:左上左下右上右下
border-top-left-radius:左上
border-bottom-left-radius:左下
border-top-right-radius:右上
border-bottom-right-radius:右下

制作特殊图形

制作圆形

元素的宽度和高度必须相同。
圆角半径为 50%。

制作半圆形

制作上半圆或下半圆时，元素宽度=2*元素高度，圆角半径=元素高度。
制作左半圆或右半圆时，元素高度=2*元素宽度，圆角半径=元素宽度。

制作扇形

实际上是使用 border-radius 属性制作四分之一圆形。
三同:元素宽度、元素高度、圆角半径相同。
一不同:圆角位置不同，就可以制作出左上、右上、右下、左上的扇形。

盒子阴影

box-shadow

box-shadow 属性用于设置盒子模型的阴影。
box-shadow 属性基本用法:
box-shadow:阴影类型 x轴位移 y轴位移 模糊半径 阴影颜色;

常见配置

配置                                                描述
阴影类型        阴影类型可选如果不设置，默认投影方式为外阴影。inset:内阴影。
x轴位移          x>0 时阴影向右偏移:
y轴位移          y>0 时阴影向下偏移
y轴位移          y>0 时阴影向下偏移。
模糊半径        模糊半径值越大阴影越模糊。
阴影颜色        如果不设置，默认使用浏览器的默认颜色。

盒子模型尺寸

盒子模型总尺寸 = 边框 + 内边距 + 外边距 + 内容宽度。
box-sizing 拯救布局
box-sizing 属性用于设置盒子模型尺寸的解析方式。box-sizing 属性的基本用法:
box-sizing:解析方式
常见的盒子模型尺寸解析方式:
解析方式                                        描述
content-box(默认值)          W3C盒子模型/标准盒子模型。
border-box                        IE盒子模型/怪异盒子模型。
inherit                                盒子模型继承父元素的盒子模型模式。