CSS 盒模型

## 概述

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

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

（即网页布局 就是利用 CSS 摆盒子

## 1、内容 content

概述 ：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。

元素的内容及子元素默认从内容区域开始排列。

### 1.width：宽度

length：像素px，rem，em，cm等单位

auto:默认值，浏览器可以计算出内容的实际宽度

百分比%：定义基于包含块（父元素）的宽度百分比来计算宽度的

max-width:最大宽度

min-width:最小宽度

### 2.height：高度

length：像素px，rem，em等单位

auto:默认值，浏览器可以计算出内容的实际高度

百分比%：定义基于包含块（父元素）的高度百分比来计算高度的

max-height:最大高度

min-height:最小高度

## 2.内边距

padding

```html

      padding内填充

        元素边框和元素内容之间的距离

        取值

        - px

        - 百分比

        - 上下内填充和左右内填充百分数值是相对于其父元素的width属性计算的  

        - 不可使用负值

        单边填充：  

            padding-top: 50px;上内填充

            padding-left: 20px;左内填充

            padding-right: 10px;右内填充

            padding-bottom: 20px;下内填充

        复合写法：

        padding: 20px; 一个值  四个填充

        padding: 20px 40px; 两个值 上下填充 左右填充

        padding: 20px 40px 60px; 三个值 上填充 左右填充 下填充

        padding: 20px 40px 60px 80px; 上填充 右填充 下填充 左填充（顺时针方向）

   .box1 {

            width: 100px;

            height: 100px;

            background-color: yellow;

            padding-top: 50px;

            padding-left: 20px;

            padding-right: 10px;

            padding-bottom: 20px;

        }

        .box2 {

            width: 100px;

            height: 100px;

            background-color: tomato;

            padding: 20px 40px 60px 80px;

        }

```

## 3.边框

围绕着内容和内填充区域的线

```html

        1.border-width:边框的宽度

        单位：像素

        注意：只写一个border-width设置不上边框的宽的，得写上边框的线型

        2.border-style：边框的线型

          1.solid 单实线

          2.double 双实线

          3.dashed 条状虚线

          4.dotted 点状边框

          5.none  没有边框

        3.border-color:边框的颜色

          1.关键词

          2.十六进制色值

          3.rgb()

          4.rgba()

          默认边框的颜色为元素本身的前景色

          4.复合写法

          例子：

          border-color: pink； 一个值：四个边框

          border-color: pink gold; 两个值：上下边框  左右边框

          border-color: pink gold greenyellow; 三个值：上边框 左右边框  下边框

          border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向)

          border-width和border-style同样效果

        5.单独设置

        例子：

         /* 上边框 */

        border-top-width: 50px;

        border-top-style: solid;

        border-top-color: yellow;

         /* 下边框 */

        border-bottom-width: 50px;

        border-bottom-style: dashed;

        border-bottom-color: brown;

        单边框复合写法：

        border-left: 50px solid cyan;

        边框的宽度 边框的线型 边框的颜色

        6.边框的复合写法

        border:边框的宽度 边框的线型 边框的颜色

        border: 100px solid purple;

        7.去掉边框

        border:0;

        border:none;

```

利用边框实现三角形

```html

 用边框实现三角形的规律:

 盒子大小宽高为0

 要那个三角形，他的对边为none，他相邻的边框的颜色为透明色，transparent

 /* 上三角形

       实现上边三角形，对边为none，也就是下边框为none，左右边框的颜色为透明色

       

         */

        .box1 {

            width: 0;

            height: 0;

            /* border: 100px solid tomato;

            border-bottom: none;

            border-left-color: transparent;

            border-right-color: transparent; */

            border-top: 100px solid tomato;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

        }

```

利用边框实现梯形

```html

 /* 用边框实现梯形的规律

        盒子大小不能为零

         要那个梯形，他的对边为none，他相邻的边框的颜色为透明色，transparent */

        /* 上梯形

       

        实现上梯形，对边为none，也就是下边框为none，左右边框的颜色为透明色 */

        .box1 {

            width: 100px;

            height: 100px;

            /* background-color: brown; */

            /* border: 100px solid red;

            border-color: tomato purple blue olivedrab;

            border-bottom: none;

            border-left-color: transparent;

            border-right-color: transparent; */

            border-top: 100px solid tomato;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

 

        }

        /* 左梯形

        实现左梯形，对边为none，也就是右边框为none，上下边框的颜色为透明色

         */

        .box2 {

            width: 100px;

            height: 100px;

            /* background-color: brown; */

            /* border: 100px solid red;

            border-color: tomato purple blue olivedrab;

            border-right: none;

            border-top-color: transparent;

            border-bottom-color: transparent; */

            border-left: 100px solid olivedrab;

            border-top: 100px solid transparent;

            border-bottom: 100px solid transparent;

        }

```

## 4.外边距

margin

```html

 外间距：margin

        盒外属性：两个盒子之间的距离

        取值

        - px

        - auto浏览器自动计算

        - 百分比

        - 允许使用负值

单边外间距：

        margin-top: 20px;上外间距

        margin-right: 40px;右外间距

        margin-bottom: 20px;下外间距

        margin-left: 20px;左外间距

        复合写法

        margin: 20px; 一个值  四个外间距

        margin: 20px 40px; 两个值 上下外间距 左右外间距

        margin: 20px 40px 60px; 三个值 上外间距 左右外间距 下外间距

        margin: 20px 40px 60px 80px; 上外间距 右外间距 下外间距 左外间距（顺时针方向）

盒子水平居中

margin: 0 auto; 需要与width属性配合使用才会有效——固定宽度且居中

```

### 1.外边距应用

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

- 需要与width属性配合使用才会有效——固定宽度且居中

```css

.box{

   width:200px;

    /*

    margin-left:auto;

    margin-right:auto;

   */

   margin:0 auto;

}