盒子模型和元素的显示模式

盒子模型

css 处理网页时，它认为每个元素都包含在一个不可见的盒子里，这就是盒模型。盒子由内容区域、内边距（padding）、边框（border）和外边距（margin）构成。在这里插入图片描述

内边距（padding）

元素的内边距在边框和内容区之间。控制该区域的属性是 padding 属性。padding 属性接受长度值或者百分比值（基于父元素的宽度百分比的值），但是不允许使用负值。

padding-top：设置元素的上内边距。
padding-right：设置元素的右内边距。
padding-bottom：设置元素的下内边距。
padding-left：设置元素的左内边距。
padding：简写属性。作用是在一个声明中设置元素的所有内边距属性。接受 1~4 个属性值，接受不同数量的属性值时的含义如下面的代码示例。

padding:10px;
/*4个内边距均为10px*/
padding:10px 5px;
/*上内边距和下内边距为10px，右内边距和左内边距为5px*/
padding:10px 5px 15px;
/*上内边距为10px，右内边距和左内边距为5px，下内边距为15px*/
padding:10px 5px 15px 20px;
/*上内边距是10px,右内边距是5px，下内边距是15px，下内边距是20px*/

即可以使用值复制。css定义了一些规则：

如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内外边距的值。

左右内边距的值不同时,无论上下是否相同都要使用 4 个属性值.

边框（border）

元素的边框是围绕着元素内容和内边距的一条或多条线。css 的 border 属性用于规定边框的样式、宽度和颜色。

border-style：设置边框的样式（必需属性，没有边框样式就没有边框）。定义了10个不同的非 inherit 样式，包括 none。其中常用的有 dotted、dashed、solid等。属性值可以使用值复制
border-top (right、bottom、left)-style：设置某一边的边框样式。
border-width：指定边框的宽度。为边框指定宽度有两种方法，可以指定长度值，例如 2px 或 0.1em；或者使用3个关键字之一，他们分别是 thin、medium（默认值）和 thick。属性值可以使用值复制。
border-top (right、bottom、left)-width：设置某边边框的宽度。
border-color：设置边框的颜色。它的值的形式有 color_name、hex_number、rgb_number、transparent、inherit等。属性值可以使用值复制。
border-top (right、bottom、left)-color：设置某边边框的颜色。
border-top (right、bottom、left)：简写属性，用于把上（右、下、左）边框的所有属性设置到同一个声明中。可以在同一个声明中同时设置 border-style、border-width、border-color 值。也可以不设置其中的某个值。例如 border-left：solid #f0a;
border：简写属性，用于把针对四个边的属性设置在一个声明。

由于 border-style 的默认值是 none，如果没有声明样式，就相当 border-style:none。因此要出现边框就必须声明一个边框样式。

p{
    
    
    border-style:none;
    border-width:50px;
}
/*尽管边框的宽度是50px，但是边框样式设置为 none。在这种情况下，不仅
边框的样式没有了，其宽度也会变为0。这是因为如果边框样式为 none，即边
框根本不存在，那么就不可能有边框宽度，因此边框宽度自动设置为 0，而不
论你原先定义的是什么。*/

外边距

外边距是边框和边框外面将元素与相邻元素隔开的不可见区域。设置外边距的最简单的方法是使用 margin 属性，这个属性接受任何长度单位，百分比数值甚至负值。

margin-top：设置元素的上外边距。
margin-right：设置元素的右外边距。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。
margin：元素外边距的简写属性，可以使用值复制。

可以看出涉及单一样式（不包括 border )的简写属性都可以使用值复制；例如：padding、margin、border-style、border-width、border-color。

外边距合并问题

外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。

当一个元素出现在另一个元素的上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如图所示：
当一个元素包含在另一个元素中时（假设没有内边距或者边框把外边距分隔开），他们的上或者下外边距也会发生合并。如图所示：

出现第一种合并情况则外边距会使用较大的那个值，而不是两个值的和。

出项第二种情况可以：

在父元素上添加边框

在父元素上添加上内边距

在父元素上添加 overflow:hidden 属性

元素的显示模式

每个元素在默认情况下要么显示在单独的行（例如 div、p、h1~h6等），要么显示在行内（如 em、span、a等）。元素的显示模式就是指元素以什么样的方式进行显示。独占一行的元素称为块级元素，相邻元素同行显示的元素称为行内元素。还有在行内元素中有几个特殊的标签<img />、<input />、<td>，他们同时具有块元素和行内元素的特点，称为行内块元素。

块级元素的特点：独占一行，高度、宽度、内外边距均可以设置。高度若不设置则由元素的内容撑开，宽度默认是父元素的宽度。
行内元素的特点：相邻的行内元素显示在同一行上，宽度和高度直接设置则无效（由内容撑起）。
行内块元素的特点：一行内可以容纳多个行内块元素。高度、宽度、内外边距均可以设置。宽度高度默认由内容撑开。

display 属性，display 属性用于改变元素的显示模式。其不同的属性值对应的显示模式如下表：

值	描述
none	此元素不会显示。
block	此元素将显示为块级元素，元素前后会带有换行符。
inline	默认，此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。

注意：对于行内元素不能直接设置高度、宽度、内边距和外边距等属性。要先将元素的显示模式转化成块元素或者行内块元素再进行设置，否则会无效或者出现问题。

扬尘/2020/12/19