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{
    width:200px;
    background-color:red;
    padding-left:10px;
    padding-right:20px;
    padding-top:30px;
    padding-bottom:40px;
}

4.3、简写

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

• 语法：padding：1-4个值 【空格隔开】

• 规则：

  • 1个值：表示【四个方向】的内边距值

  • 2个值：分别表示【上下，左右】的内边距值

  • 3个值：分别表示【上，左右，下】的内边距值

  • 4个值：分别表示【上，右，下、左】的内边距值

.box{
    width:200px;
    background-color:red;
    
    padding:10px 20px 30px 40px;
}

5、外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

5.1、单个方向定义

• margin-bottom 设置下内边距

• margin-left 设置左内边距

• margin-right 设置右内边距

• margin-top 设置上内边距

.box{
    width:200px;
    background-color:red;
    
    margin-left:10px;
    margin-right:20px;
    margin-top:30px;
    margin-bottom:40px;
}

5.2、简写

• 语法：空格隔开

• 取值：1-4个规则与padding值一致

• 取值

  • px

  • auto浏览器自动计算

  • 允许使用负值

.box{
    width:200px;
    background-color:red;
    margin:10px 20px 30px 40px;
}

5.3、外边距应用

外边距实现已知宽度的块级盒子水平居中。