HTML+CSS宝典 CSS盒模型行盒的盒模型

Go to comments

HTML+CSS宝典 CSS盒模型行盒的盒模型

行盒的“显著特点”

之前只学了块盒的盒模型，为什么要单独学行盒的盒模型？

因为行盒的盒模型跟块盒不太一样，所以要单独的学

常见的行盒元素通常是包含具体内容的元素，

比如span元素、strong元素（表示重要内容）、em元素（表示强调）、i元素、img元素、video元素、audio元素等，这些具体内容的元素都是行盒

行盒的盒模型也有 padding、border、margin、content（内容部分）四个部分，但是行盒确实和块盒有很大差异

一、行盒沿着内容沿伸

行盒沿着内容沿伸，内容走到哪行盒就沿伸到哪，可以理解为行盒就是具体的内容。

行盒是跟着内容走的，内容走到哪行盒就跟到哪，内容要哪截断行盒就跟着截断，内容结束了行盒也跟着结束了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  p, span{
    background: lightblue;
    border: 2px solid;
    line-height: 3;
    margin:16px 0;
  }
</style>
<title>行盒沿着内容沿伸</title>
</head>
<body>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia harum nostrum iusto doloremque, necessitatibus dicta fuga. Harum, repellat nisi est quisquam quas iusto iure aut hic! Aliquid iste autem maxime.</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci velit ea hic aliquid magni minima corrupti nihil odit necessitatibus numquam, laboriosam dolor, dolorem inventore, impedit sequi tempora maiores neque! Eius!</p>

<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aspernatur, repellendus ex iusto veniam modi reiciendis molestias debitis id velit magnam culpa quae mollitia voluptate laboriosam autem consequuntur commodi quod.</span>

<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus animi recusandae aut, aliquid libero pariatur reprehenderit laboriosam voluptatibus saepe vel corrupti praesentium voluptatem soluta excepturi ullam optio hic, quisquam vitae!</span>

</body>
</html>

行盒（span元素）：下一个行盒的头，接着上一个行盒的尾巴排列

块盒（p元素）：是一个元素独占一行，下一个块盒依次排列

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia harum nostrum iusto doloremque, necessitatibus dicta fuga. Harum, repellat nisi est quisquam quas iusto iure aut hic! Aliquid iste autem maxime.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci velit ea hic aliquid magni minima corrupti nihil odit necessitatibus numquam, laboriosam dolor, dolorem inventore, impedit sequi tempora maiores neque! Eius!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aspernatur, repellendus ex iusto veniam modi reiciendis molestias debitis id velit magnam culpa quae mollitia voluptate laboriosam autem consequuntur commodi quod. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus animi recusandae aut, aliquid libero pariatur reprehenderit laboriosam voluptatibus saepe vel corrupti praesentium voluptatem soluta excepturi ullam optio hic, quisquam vitae!

二、行盒不能设置宽、高

设置 span 元素的宽高（width:100px;、height:100px;）不能生效，为什么不能生效呢？

行盒是这样理解的

1. 行盒是根着内容走的，所以行盒的宽高应该取决于内容的宽高

2. 行盒的宽度和高度取决于内容的多少，以及文字的大小，以及的行高，所以行盒不能设置宽高的

因此要调整行盒的宽高，应该使用字体大小、行高、还有字体类型，不同的字体类型高度、宽度都不太一样，应该通过这些间接的调整。

比如，span元素可以通过 line-height 属性，调整行盒的宽高

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  span{
    background: lightblue;
    border: 2px solid;
    line-height: 5;
  }
</style>
<title>行盒不能设置宽高</title>
</head>
<body>

<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aspernatur, repellendus ex iusto veniam modi reiciendis molestias debitis id velit magnam culpa quae mollitia voluptate laboriosam autem consequuntur commodi quod.</span>

<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus animi recusandae aut, aliquid libero pariatur reprehenderit laboriosam voluptatibus saepe vel corrupti praesentium voluptatem soluta excepturi ullam optio hic, quisquam vitae!</span>

</body>
</html>

三、行盒内边距 padding（填充区）

行盒设置 padding: 10px 10px;

1. 水平方向有效

2. 垂直方向仅会影响背景，不会实际占据空间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  span{
    background: lightblue;
    border: 2px solid;
    line-height: 3;
    padding: 20px 20px;
  }
</style>
<title>行盒padding内边距</title>
</head>
<body>

<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aspernatur, repellendus ex iusto veniam modi reiciendis molestias debitis id velit magnam culpa quae mollitia voluptate laboriosam autem consequuntur commodi quod.</span>

<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus animi recusandae aut, aliquid libero pariatur reprehenderit laboriosam voluptatibus saepe vel corrupti praesentium voluptatem soluta excepturi ullam optio hic, quisquam vitae!</span>

</body>
</html>

左右 padding 有效会占据空间，

上下的 padding 有点奇怪，看上去有效，但文字没有动，不会实际占用空间

四、行盒边框 border

边框也是水平方向有效，垂直方向不会实际占据空间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  span{
    background: lightblue;
    border: 2px solid;
    line-height: 2;
    border: 15px solid;
  }
</style>
<title>行盒border边框</title>
</head>
<body>

<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aspernatur, repellendus ex iusto veniam modi reiciendis molestias debitis id velit magnam culpa quae mollitia voluptate laboriosam autem consequuntur commodi quod.</span>

<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus animi recusandae aut, aliquid libero pariatur reprehenderit laboriosam voluptatibus saepe vel corrupti praesentium voluptatem soluta excepturi ullam optio hic, quisquam vitae!</span>

</body>
</html>

border 边框水平方向有效，但是垂直方向跟内边距 padding 一样可以看到效果，但是不会实际占领空间，上下文字的距离是没有变化的

为什么上下没有变化呢？

因为 css 认为内容的高度应该取决行高，而不应该取决于其它设置

五、行盒外边距 margin

水平方向有效，垂直方向不会实际占据空间

margin:20px 20px

左右有效占据空间，

上下完全无效，跟之前是一样的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  span{
    background: lightblue;
    border: 2px solid;
    line-height: 2;
    margin:20px 20px;
  }
</style>
<title>行盒margin外边距</title>
</head>
<body>

<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aspernatur, repellendus ex iusto veniam modi reiciendis molestias debitis id velit magnam culpa quae mollitia voluptate laboriosam autem consequuntur commodi quod.</span>

<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus animi recusandae aut, aliquid libero pariatur reprehenderit laboriosam voluptatibus saepe vel corrupti praesentium voluptatem soluta excepturi ullam optio hic, quisquam vitae!</span>

</body>
</html>

六、初学者通常会犯的错误

在行盒里面不要设置宽高，行盒设置宽高是无效的，初学者通常会犯的错误

比如一个 a 元素，设置宽度 width:100px 没有作用，因为 a 元素是行盒，行盒是不能设置宽高的

想增加a元素的宽度可以设置左右的 padding 属性， padding: 0 20px 因为在水平上 padding 是有效的，上下可以设置 padding，但不会实际占用空间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初学者经常犯的错误</title>
<style>
  a{
    background-color: red;
    color: #fff;
    /* width: 100px; */
    padding:20px 20px;
  }
</style>
</head>
<body>

  <a href="">百度</a> 

</body>
</html>

百度

七、行块盒

display: inline-block display 属性的值等于 inlink-block 的盒子叫行块盒，它既有行盒的特点又有块盒的特点

1、行块盒的特点

1. 不独占一行，还是一个接着一个排列

2. 盒模型中所有尺寸都有效

意思是行盒里面宽高无效，垂直方向上内边距、边框、外边界都是不占据空间的，

但是一旦变成行块盒都有效，只是不独占一行而已，还是水平排列

不使用 padding 属性，直接把a元素变成 display: inline-block 行块盒，a 元素前面一个行盒 span 元素、后面一个行盒 span 元素，它们是水平排列的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行块盒</title>
<style>
  a{
    background-color: red;
    color: #fff;
    display: inline-block; /* 变成行块盒 */
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
</style>
</head>
<body>

  <span>span元素</span>
  <a href="">百度</a>
  <span>span元素</span>

</body>
</html>

只不过现在a元素可以设置宽width、高height、水平居中text-align、垂直居中line-height，这些都是有效的

span元素百度span元素

2、小练习

行块盒做分页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行块盒做分页</title>
<style>
  .pager a{
    border:1px solid #e1e2e3;
    text-decoration: none;
    color: #3951B3;
    display: inline-block;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
  }
  .pager a:hover{
    border-color:#38f;
    background: #f2f8ff;
  }
  .pager a.selected{          
    border-color:#38f;
    background: initial; /* 背景为初始值 */
  }
</style>
</head>
<body>
  <div class="pager">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
  </div>
</body>
</html>

Ps：

用到的快捷键

div.pager

a*10>{$}

解决背景冲突的问题：

选择器 .pager a:hover 比 .pager .selected 特性高，所以背景冲突的时候，用到了这个背景 background: #f2f8ff

1. 将选择器 .pager .selected 改为 .pager a.selected

2. .pager a.selected 的特性和 .pager a:hover 就一样了，

3. 然后 .pager a.selected 的原次序靠后，所以 background: initial 背景生效

3、空白折叠

因为空白折叠的，a元素行盒块之间会有间隙，

空白折叠，发生在行盒包括行块盒内部，或行盒包括行块盒之间，

具体原因很复杂，涉及到了行盒的参考线，现在不用管那么多，记住这个就行了

两个行块盒之间有很多空白字符，会折叠成一个空格，

想要消除空格，a元素写的时候不换行，这也就是平时不怎么用行块盒的原因

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行块盒做分页</title>
<style>
  .pager a{
    border:1px solid #e1e2e3;
    text-decoration: none;
    color: #3951B3;
    display: inline-block;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
  }
  .pager a:hover{
    border-color:#38f;
    background: #f2f8ff;
  }
  .pager a.selected{ /* selected前面要加元素选择器a，因为这样鼠标移动上去的时候没有变化 */
    border-color:#38f;
    background: initial;
  }
</style>
</head>
<body>
  <div class="pager">
    <a href="">1</a>
    <a href="">2</a>
    <a href="" class="selected">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
  </div>
</body>
</html>

八、可替换元素和非可替换元素

1、非可替换元素

大部分元素，页面上显示的结果，取决于元素的内容，

比如p元素、div元素、a元素里面写了那些东西会在页面上显示，叫做非可替换元素

2、可替换元素

少部分元素，页面上显示的结果，取决于元素的属性，

比如 img 元素没有元素内容，显示出内容取决于src属性，这种元素称为可替换元素，比如 img元素、video元素、audio元素等

<img src="/blog/uploads/image/201907/pic1564549780422166.jpg" alt=""/>

3、可替换元素和非可替换元素在显示上是有区别的

绝大部分可替换元素均为行盒，img元素图片和span元素文字是排成一行显示的，但这些行盒跟其它普通行盒不太一样，怎么不一样呢？

<img src="http://ruyic.com//blog/uploads/image/201907/pic1564549780422166.jpg" style="width:200px" alt=""/>

<span>图片是行盒</span>

区别一：

图片的宽、高是自适应的，只要设置的宽度，高度会按照比例增加

区别二：

图片是行盒

图片默认没有设置 display 属性，在 Computed 检查一下 display 属性默值是 inline，但是可以给 img 属性设置宽度、高度

可替换元素类似于行块盒，盒模型中所有的尺寸都有效，img 图片是可以设置宽高的，包括视频元素、音频元素。

4、object-fit 属性

object-fit 属性一般用在图片里面使用，表示图片的适用方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object-fit属性</title>
<style>
  img{
      border:6px solid #ccc;
      width:200px;
      height:200px;
      object-fit: contain;
  }
</style>
</head>
<body>

   <img src="http://ruyic.com/blog/uploads/image/202204/165105213862823.jpg" alt=""/>

</body>
</html>

object-fit: contain 图片宽高比例不变，但是图片所有内容又要显示在img元素里面

object-fit: fill 默认取值 fill，就是填充会把整个图片全部显示出来，但是不能保持比例

object-fit: cover 保证把img区域填充满，同时又不能打破比例，只能牺牲掉图片的信息，图片的有些部分显示不出来了

图片是可替换元素，包括后面的文本框、按钮这些都是行盒，它们是可替换元素，因此也可以设置宽高