盒子模型（box model）

一、什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型

---

二、盒子模型的使用

1.边框（border）

(1) 边框颜色属性：border-color。

当同时设置4个边框颜色时，顺序为上右下左。

border的颜色属性

(2)边框的粗细属性：border-width

示例

(3)边框的样式：border-style

边框样式属性指定要显示什么样的边界。

none: 默认无边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

(4)border的简写

border:1px solid #3a6587;

border: 1px dashed red;

---

2.外边距（margin）

(1)margin属性：

lmargin-top：设置元素的上外边距。    lmargin-right：设置元素的右外边距。

lmargin-bottom：设置元素的下外边距。    lmargin-left：设置元素的左外边距。

lmargin：简写属性。在一个声明中设置所有外边距属性。

margin属性的四个值，总是按照上，右，下，左的顺序。

如果有三个值，那左右相同。如果有两个值，那上下相同，左右相同。如果有一个值，那四面相同。

---

(2)maigin实现网页居中对齐：

margin:0px  auto;

条件：1、块元素    2、固定宽度

---

3.内边距（padding）

pading属性一到四个值

---

4.盒子模型的尺寸

盒子模型尺寸

---

(1)box-sizing

content-box：默认标准盒模型，总宽=width+padding+border+margin

inherit：指定 box-sizing 属性的值，应该从父元素继承

border-box：盒子的宽度和高度就是给定的宽度和高度，如果设置了padding和border，将减少内容的宽度和高度。

---

三、圆角边框

向 div 元素添加圆角边框。

border-radius:20px  10px  50px 30px;

四个属性值按照顺时针排列。

圆角边框举例 效果图

---

四、盒子阴影

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

offset-x：必需，取值正负都可。offset-x水平阴影的位置。

offset-y：必需，取值正负都可。offset-y垂直阴影的位置。

blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。

color:可选。阴影的颜色。

inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。

例如： box-shadow:5px 5px 10px red;