盒子模型

今天药忘吃喽~ 2023-02-16 06:45 116阅读 0赞

![盒子模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDcxNTk5_size_16_color_FFFFFF_t_70]

### 目录 ###

*  简介：
 *  特性：
 *  一、盒子边框（border）
 *   *  1、定义宽度
     *   *  （1）直接在属性后面指定宽度值
         *  （2）单独为某条边设置宽度
         *  （3）使用border-width 属性定义边框宽度
     *  2、定义颜色
     *  3、定义样式
     *  4、综合写法
     *  5、扩展
 *  二、内边距（padding）
 *  三、外边距（margin）
 *  四、内容(content)
 *  五、盒子模型布局稳定性
 *  六、盒子阴影

# 简介： #

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛放内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。  
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局中所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

# 特性： #

盒子模型特性：  
每个盒子都有：边界、边框、填充、内容 4个属性；  
每个属性都包括4个部分：上、右、下、左；  
属性的4部分可以同时设置，也可以分别设置。

# 一、盒子边框（border） #

border 属性定义了盒子的边框，该属性包含3个子属性：border-width(边框宽度)，border-color(边框颜色)，border-style(边框样式)。

## 1、定义宽度 ##

### （1）直接在属性后面指定宽度值 ###

// 定义顶部边框宽度为元素内字体大小的 0.2倍
    border-top-width:0.2em;

或：

// 定义底部边框宽度为12px
    border-bottom-width: 12px;

### （2）单独为某条边设置宽度 ###

单独为元素的某条变设置宽度，分别使用 border-top-width、border-bottom-width、border-left-width、border-right-width 属性。

### （3）使用border-width 属性定义边框宽度 ###

// 定义4个边都为2px
    border-width:2px;

或：

// 定义上下边为2px,左右边为4px
    border-width:2px 4px;

或：

//定义上边为2px,左右边为3px,下边为4px
    border-width:2px 3px 4px;

或：

//顺时针：上、右、下、左
    // 定义上边2px,右边为 3px,下边为 4px，左边为5px
    border-width:2px 3px 4px 5px;

**Tips**：当定义边框宽度时，必须要定义边框的显示样式，由于默认样式为none；所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。

## 2、定义颜色 ##

定义边框颜色可以使用颜色名、RGB 颜色值或十六进制颜色值。

//上边框定义为红色的边框
    border-top-color: #f00;

## 3、定义样式 ##

边框样式是边框显示的基础，CSS 提供了一下几种边框样式：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>默认值，无边框，不受任何指定的 border-width 影响</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>隐藏边框，IE 不支持</td> 
  </tr> 
  <tr> 
   <td>dotted</td> 
   <td>定义边框为点线</td> 
  </tr> 
  <tr> 
   <td>dashed</td> 
   <td>定义边框为虚线</td> 
  </tr> 
  <tr> 
   <td>solid</td> 
   <td>定义边框为实线</td> 
  </tr> 
  <tr> 
   <td>double</td> 
   <td>定义边框为双线边框</td> 
  </tr> 
 </tbody> 
</table>

## 4、综合写法 ##

// border 是一个复合属性，可以把3个子属性结合写在一起。注意：顺序不能错误。
    border : border-width || border-style || border-color

## 5、扩展 ##

圆角边框：

// 取值可以是指定的固定的长度，也可以使用百分比来表示。
    border-radius: 左上角  右上角  右下角  左下角;

// 一个数值表示4个角都是相同的 10px 的弧度
    order-radius: 10px;

// 100px 50% 取宽度和高度 一半 则会变成一个圆形
    border-radius: 50%;

// 左上角 和 右下角 是 10px 右上角 左下角 40 对角线 
    border-radius: 10px 40px;

// 左上角 10 右上角 左下角 40 右下角80
    border-radius: 10px 40px  80px;

// 左上角 10 右上角 40 右下角 80 左下角 右下角100
    border-radius: 10px 40px  80px  100px;

# 二、内边距（padding） #

padding属性用于设置内边距。 是指 边框与内容之间的距离。  
padding-top:上内边距  
padding-right:右内边距  
padding-bottom:下内边距  
padding-left:左内边距

<table> 
 <thead> 
  <tr> 
   <th>值的个数</th> 
   <th>表达意思</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1个值</td> 
   <td>padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素</td> 
  </tr> 
  <tr> 
   <td>2个值</td> 
   <td>padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素</td> 
  </tr> 
  <tr> 
   <td>3个值</td> 
   <td>padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素</td> 
  </tr> 
  <tr> 
   <td>4个值</td> 
   <td>padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针</td> 
  </tr> 
 </tbody> 
</table>

# 三、外边距（margin） #

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离， 这段空白通常不能放置其他内容。  
margin-top:上外边距  
margin-right:右外边距  
margin-bottom:下外边距  
margin-left:上外边距  
margin:上外边距 右外边距 下外边距 左外边  
**取值顺序跟内边距相同。**  
Tips： 行内元素是只有左右外边距的，是没有上下外边距的。

# 四、内容(content) #

使用宽度属性width和高度属性height可以对盒子的大小进行控制。  
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。  
注意：  
1、宽度属性 width 和高度属性 height 仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。  
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。  
3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

# 五、盒子模型布局稳定性 #

根据稳定性来分，建议如下：  
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。  
width > padding > margin

# 六、盒子阴影 #

语法格式：  
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDcxNTk5_size_16_color_FFFFFF_t_70 1]

1.  前两个属性是必须写的，其余的可以省略。
2.  外阴影 (outset) 默认值，但是不能写 ，想要内阴影写上 inset 即可。
3.  可以添加多个阴影，如同时添加内阴影和外阴影

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDcxNTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020060908584434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDcxNTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDcxNTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200609110113186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDcxNTk5,size_16,color_FFFFFF,t_70