CSS 盒模型

CSS 盒模型

1、概述

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

所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）

2、内容 content

概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。

2.1、width

作用：设置宽度

取值

auto默认值。浏览器可计算出实际的宽度。

px

百分比

2.2、height

作用：设置高度

取值

auto默认值。浏览器可计算出实际的宽度。

px

百分比

3、边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。

3.1、border-width边框宽度

作用

设置所有边框宽度，或者单独地为各边边框设置宽度。

取值

长度值

不允许指定负长度值。

语法

空格隔开1-4个值

1个值 设置所有边框宽度

2个值 设置上下、左右

3个值 设置上、左右、下

4个值 设置上、右、下、左

3.2、border-style边框样式

作用

设置标签所有边框的样式，或者单独地为各边设置边框样式。

取值

none 定义无边框。

dotted 定义点状边框。

dashed 定义虚线。

solid 定义实线。

double 定义双线。双线的 宽度等于 border-width 的值。

其他（了解——掌握以上5个即可）

语法

1个值 设置所有边框

2个值 设置上下、左右

3个值 设置上、左右、下

4个值 设置上、右、下、左

注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0。

3.3、border-color边框颜色

作用

设置所有边框颜色，或者单独地为各边边框设置颜色。

取值

颜色的名称，如 red

RGB 值， 如 rgb(255,0,0)

16进制值，如 #ff0000

语法

1个值 设置所有边框

2个值 设置上下、左右

3个值 设置上、左右、下

4个值 设置上、右、下、左

3.4、边框实例

.box{

    width:100px;

    height:100px;

    /* 边框 宽度 上下 左右 */

    /* border-width:1px 10px*/  

    /* 边框 样式 */

    /* border-style:solid dashed double; */

    /* 边框 颜色 上 右 下 左 */

    border-color:red blue green yellow; 

​

}3.5、简写

定义四个边

语法：border:样式 宽度 颜色； 

  .box{

      width:100px;

      height:100px;

     /* 四个边简写 */            

      border:10px solid red;       

 }单个方向定义

说明：每个边框都可以设置样式宽度颜色。 语法：border-方向：宽度 样式 颜色；

拆分语法

border-方向-width

border-方向-color

border-方向-style

.box{

            /* 单个边简写 */

            border-left:10px solid red;

            border-right:10px solid green;

            border-top:10px solid pink;

            /* border-bottom:10px solid red; */

​

            /* 单个边拆分的写法 */

            border-bottom-width:10px;

            border-bottom-style:solid;

            border-bottom-color:yellow;

}注意:

边框会影响盒子实际大小

边框样式、边框宽度、边框颜色无书写顺序要求

4、内边距 padding

CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。 padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

4.1、单个方向设置

padding-bottom 设置标签的下内边距

padding-left 设置标签的左内边距

padding-right 设置标签的右内边距

padding-top 设置标签的上内边距

4.2、取值

px 

默认值0

百分比

不可使用负值

.box{