03|流,元素与基本尺寸

作者: 井润 | 来源:发表于2019-11-27 02:19 被阅读0次

03|流,元素与基本尺寸
前端知识整理-CSS
3 流，元素与基本尺寸
流，元素和基本尺寸
《CSS世界摘要》
《CSS世界》读书笔记——流、元素与基本尺寸
CSS世界-流的理解
第三章-流、元素和基本尺寸
web前端入门到实战：JavaScript中尺寸类样式
内联元素与流

01|块级元素

在HTML中标签众多,但是通常分为两类:"块级元素" 和 "内联元素"

01|块级元素

块级元素中常见的标签有 <div> <li><table> 但是块级元素和display:block不是一个概念! 为什么这么说呢?

li的display的值为:display:list-item 对应的table的值为:display:table!

他们之所以是块级元素,是因为他们都符合块级元素的特征,也就是水平流上只能单独显示一个元素,多个块级元素则换行显示!

块级元素都有换行的特性,理论上来讲是可以通过clear来清除浮动带来的影响的!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      
      .box {padding: 10px;background-color: #cd0000;}
      
      .box > img {float: left;}
      /* 不使用list-item:
      1. 字符比较多
      2. 需要多加额外的代码 list-style:none;
      3. 兼容性不好 IE不支持为元素的display值为 list-item 普通元素设置display:list-item;可以 
      但是伪元素 :before{display:list-item;} 不行!
       */
      .clear:after {content: '';display: '';clear: both;}

    </style>
  </head>
  <body>
    <div class="box clear">
      <img src="/images/common/l/1.jpg" />
    </div>
  </body>
</html>

预览请见:

https://demo.cssworld.cn/3/1-1.php

在我们通过声明的时候

.clear:after{
    content:'';
    display:table;//或者通过block
    clear:both;
}

为什么不能够使用list-item呢?

list-item 字符比较多其他的都是5个字符
会出现不需要的项目符号! 并且需要加一个 list-style:none;
IE浏览器不支持为元素的display:list-item 兼容性不好但是可以使用 display:list-item; :before就不行!

那么这样一来又会引出一个新的问题:

02|为什么使用list-item会出现项目符号:

其中涉及到了典故,以前只有块级盒子和内联盒子,分别负责结构和内容,但是后面发现list-item默认要显示项目符号应该怎么办?
所以 list-item 出现了项目符号是因为生成了一个附加盒子,学名marker box 专门用来放圆点,数字这些项目符号!

本想着这样设计就完事了结果后面杀出一个inline-block,穿着inline的皮,藏着block的心! 后面有新增了一个盒子,这样一来没一个元素都有两个盒子,外在盒子和内在盒子,外在盒子负责元素是一行显示还是可以换行显示,内在盒子负责宽高和内容呈现之类的,但是内在盒子虽然说容易理解, 后面又有了专业的名词叫做"容器盒子"

名称	外在	内在
display:block	block	block(块级容器盒子)
display:inline-block	inline	block
display:inline	inline	inline

这样在一些排版过程中,我们就能够很轻松的理解了!

03|display:inline-table盒子是怎样组成的?

其中还是比较好理解的,外面是内联盒子,里面是table盒子,得到的就是一个文字可以在一行中显示的表格!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .inline-table {
        display: inline-table;
        width: 128px;
        margin-left: 10px;
        border: 1px solid #cad5eb;
      }
      .inline-table > p {
        display: table-cell;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    和文字平起平坐的表格：
    <div class="inline-table">
      <p>第1列</p>
      <p>第2列</p>
    </div>
  </body>
</html>

预览请见:

https://demo.cssworld.cn/3/1-2.php

如果说我们将display:table换成了对应的table的话,那么所谓的width/height式作用在那一个盒子上面的!

其实在我们前面就提到了,外在盒子只是负责页面的结构,内在盒子负责宽高和对应的内容呈现!

02|width/height作用的具体细节

其实width的默认值为auto,因为是默认值,因此出镜率(使用率)不高! 但是它却包含了4种不同的宽度表现!

充分利用可用空间 块级元素宽度默认100%于父级容器的! fill-available
收缩与包裹浮动绝对定位 inline-block或者是inline-table 收缩到合适!
收缩到最小表格布局中的auto的表格中
超出容器限制除非有明确的width设置,否则不会超出父容器的宽度的!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .father {
        width: 150px;
        padding: 10px;
        background-color: #cd0000;
        white-space: nowrap;
      }
      .child {
        display: inline-block;
        padding: 5px;
        background-color: #f0f3f9;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="father">
      <span class="child">恰如一江春水向东流，流到断崖也不回头</span>
    </div>
  </body>
</html>

nowrap不换行超出容器限制

在CSS世界中,盒子分为"内在盒子"和"外在盒子",显示也分为"内部显示"和"外部显示",同样的尺寸也分为"内部尺寸"和"外部尺寸".

其中的话内部尺寸表示尺寸由内部元素决定!

其中的外部尺寸就是div默认宽度为100%,其余的都是内部尺寸!

01外部尺寸与流体特性:

正常流宽度当我们在容器中倒满水的时候,水一定会均匀地铺满整个容器!

也就是说默认的块级元素的宽度默认会铺满整个容器(这里主要是讲的宽度!)

在我们应用过程中的时候,别的类型的元素转换成块级元素的时候就不需要重新设定width了,因为是默认铺满容器的! width:100% 就多余了!

其中书中还提到了"鑫三五准则": 也就是所谓的 无宽度,无图片,无浮动!

其中在本章节中讲到的无宽度是怎么一回事呢?

因为如果说我们显示设定了宽度的话,表现为"外部尺寸",这样一设定了的话,流动性就消失了!

所谓的流动性:其实并不仅仅是100%的width那么简单,为什么这么说呢? 其实可以简单的通过例子说明的:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .width {
        width: 100%;
      }

      .nav {
        background-color: #cd0000;
      }
      .nav-a {
        display: block;
        margin: 0 10px;
        padding: 9px 10px;
        border-bottom: 1px solid #b70000;
        border-top: 1px solid #de3636;
        color: #fff;
      }
      .nav-a:first-child {
        border-top: 0;
      }
      .nav-a + .nav-a + .nav-a {
        border-bottom: 0;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <h4>无宽度，借助流动性</h4>
    <div class="nav">
      <a href="" class="nav-a">导航1</a>
      <a href="" class="nav-a">导航2</a>
      <a href="" class="nav-a">导航3</a>
    </div>
    <h4>width:100%</h4>
    <div class="nav">
      <a href="" class="nav-a width">导航1</a>
      <a href="" class="nav-a width">导航2</a>
      <a href="" class="nav-a width">导航3</a>
    </div>
  </body>
</html>

预览请见:

https://demo.cssworld.cn/3/2-3.php

对应的流动性,是一种margin/border/padding以及content区域的自动分配水平空间的一种机制!

看到对应的效果后应该能够很清楚的明白,对应的width:100%对应的尺寸超出了外部的容器,没有像所谓 水流完全利用容器空间,即所谓的"流动性丢失"

在均匀的铺满整个水平容器的同时,其实相较于我们人工手动计算的时候少了很多麻烦!(少了很多计算!)

为什么这么说呢? 因为一旦该页面需要进行微调的时候,利用流动的特性可以自动铺满,比我们人工计算之后的微调导致在此进行计算和方便许多了!

无宽度这条准则的话,少了代码,少了计算,少了维护,何乐而不为呢?

之前前面介绍到的,display:block block;其实是为了我们更好地理解,CSS3中的作者们为了更好的表示这个内在盒子,用的是flow 也就是"流"来进行表示,因此display:block; 更规范来讲的话,其实是 display:block flow;

02|格式化宽度

其实所谓的"格式化宽度",也就是出现在position属性值为absolute或者是fixed的元素中,默认情况下,绝对定位元素的宽度表现是"包裹性",宽度由内部尺寸决定的,但是有一种情况下宽度是由外部尺寸决定的!那么是什么情况呢?

对于非替换元素的话来说,当left/right或者说top/bottom对李方伟的属性值同时存在的时候,元素的宽度表现为格式化宽度! 其宽度大小相对于最近的具有定为特性(position属性值不是static)的祖先元素计算!

03|内部尺寸与流体特性

简单来讲元素的尺寸是由内部的元素决定,而非外部的容器决定的,如何快速判断一个元素使用的是否为"内部尺寸"呢? 很简单,如果说元素里面没有内容,那么对应的宽度就是0,那么就是应用的内部尺寸!

内部尺寸的三种表现形式:

包裹性
自适应性
首选最小宽度
首选最大宽度

包裹性:
- 按钮其实就是CSS世界中极具代表性的inline-block元素,也是展现包裹性比较好的例子,具体的体现为:
  
  按钮的文字越多宽度越宽(内部尺寸特性),但是如果说文字足够多的话,那么就会对应的换行!(自适应特性)
- 如果你没有意识到的话,说明按钮上的文字是非常有限的,没有机会换行,还有就是button默认会自动换行的,但是input标签里面的type为button的时候默认white-space:pre; 不会自动换行的!
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .box {
        width: 240px;
        margin: 20px auto;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <button>按钮</button>
    </div>
  </body>
</html>
```
预览请见:

https://demo.cssworld.cn/3/2-4.php

但是包裹性在实际应用中有什么效果呢?

文字少的时候居中显示,文字超过一行的时候向左显示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .box {
        padding: 10px;
        background-color: #cd0000;
        text-align: center;
      }
      .content {
        display: inline-block;
        text-align: left;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <p id="conMore" class="content">文字内容</p>
    </div>
    <!-- 按钮 -->
    <p><button id="btnMore">更多文字</button></p>
    <script>
      var btn = document.getElementById('btnMore'),
        content = document.getElementById('conMore');

      if (btn && content) {
        btn.onclick = function() {
          content.innerHTML += '-新增文字';
        };
      }
    </script>
  </body>
</html>

预览请见:

https://demo.cssworld.cn/3/2-5.php

04|首选最小宽度

其实所谓的"首选最小宽度",指的就是元素最合适的最小宽度,加入一宽度为0的元素那么里面inline-block里面的元素宽度为多少?

是0吗? 其实是不是的,因为图片和文字的权重要远大于布局的,所以CSS是不会让图文的宽度在width:auto时宽度编程0的!

具体的表现规则如下:

东亚文字最小宽度为每个汉字的宽度
西方文字由特定的连续的英文字符单元决定! 并不是所有的英文字符都会组成连续单元,一般会止于空格,短横线,问号以及其他非英文字符!
类似与图片这样的替换元素的最小宽度就是该元素内容本身的宽度!

05|最大宽度

最大宽度其实就是元素可以有的最大宽度,实际上来讲的话等同于"包裹性"元素设置white-space:nowrap; 声明后的宽度,如果说内部没有块级元素或者块级元素没有设定宽度值,则"最大宽度"实际上是最大的连续内联盒子的宽度!

全部为内联元素级别的一堆元素!

那么最大宽度的实际应用价值在哪里?

很大宽度:

如果说我们遇到一个需求,就是将五张图片放到一行中,每一张200px,但是我们懒得计算,我们就可以设置width:2000px;这样一来的话作用就是保证不会因为容器宽度而不在一行内显示!

那么最大宽度的应用场景

一种就是借助原生的滚动,通过scrollLeft/scrollTop,优点就是简单,缺点就是效果呆板,

另一种就是通过根据内部元素的尺寸和容器的关系,通过修改修改内部元素的位置来实现滚动效果,优点是效果可以非常绽放!iScroll其实就是使用的后者,如果我们希望使用iScroll的话,只能使用 最大宽度!

06|width值的作用的细节

其中在介绍该部分的时候,涉及到了盒模型!

从最外层的 margin-border-padding-content 依次递进!

其中有三种盒子,分别是:

border-box (边款盒子)
padding-box (内边距盒子)
content-box (内容盒子)

为什么没有margin-box,margin的背景永远是透明的,盒子本身的尺寸也不会因为margin的值变化而变化!

默认的box-sizing:content-box; 盒子的宽度是作用在content-box上的,我们对padding和border进行设定的话是会改变原有盒子的尺寸的!

如果说我们对盒子进行宽度设置会有什么影响吗?

流动性丢失

对于块级元素,默认的width:auto,一旦设置了具体的宽度数值,元素的流动性就会丢失,这样的布局就会很局限,之前也提到 "无宽度"也是这个原因,布局会更加灵活!容错性更好!

与现实世界表现不一致的困扰

因为CSS2.1的内容是面向内容设计的,因此width设计成了直接作用在content box上面的!

这样的话不利于我们进行页面的设计,因为padding的值的设定会随着width的变化总体尺寸发生变化!

如何避免这种错位问题的出现呢?方法之一就是采用书写方式约束，使用"宽度分离原则!"

07|CSS流体布局下面的宽度分离原则

所谓的跨度分离原则就是,CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存!

为什么要实行宽度分离?

前端领域一提到所谓的"分离",其实一定的程度上是为了可维护性,就如我们所说的:'行为样式分离','前后端分离',这里的 '宽度分离'

例如:此时宽度是102像素,设计师希望元素边框内有20像素的留白,如果做最好呢?

.parent{width:102px;}
.son{padding:20px;border:1px;}

其实这样一来的话,子元素的content-box变成了60px,这样一来的话我们就不需要花费太多时间去计算了，页面结构反而更加稳固!

这样一来的话,别人可能会问,这样的宽度分离的原则,虽然不错,但是又多出了一个元素,增加了维护成本! 但是总体来说只是多了一个标签而已,对应的成本收益比简单太高了!

那么有什么方法,即无需额外的计算,又无需嵌套标签的实现呢? 有那就是改变对应元素的width作用细节的 box-sizing值!

08|改变width/height作用细节的box-sizing

box-sizing顾名思义就是"盒尺寸"

box-sizing:content-box; 默认值
box-sizing:padding-box; Firefox曾经支持过
box-sizing:border-box; 全线支持

之前的问题可以这样解决:

.parent{
    width:102px;
    box-sizing:border-box;
    padding:20px;
    border:1px;
}

这样的话也可以直接使用一层表现实现,还不需要计算!

为什么不支持margin-box,其实一句话就能够解释:

一个本身不会改变元素尺寸的盒子,他有让box-sizing支持的道理吗? 详情请见:p31

09|如何评价*{box-sizing:border-box}?

文中作者不喜欢这种做法,观点如下:

容易产生没必要的消耗, 默认的search类型的搜索框默认的就是border-box
这种做法并不能解决所有问题,只有当前元素没有水平margin的时候,box-sizing才能做到正真的无计算,而宽度分离能够彻底解决所有的宽度计算问题!

box-sizing发明的初衷:

详情见P33 其实box-sizing发明出来的最大的初中应该是解决替换元素宽度自适应的问题,!

10|相对简单而单纯的height:auto;

和宽度相比较高度的话显得比较随意,有几个元素盒子每个多高然后加在一起就是最终的高度值了!

关于height:100% 父元素的height为auto,那么对应的子牙UN苏如果说在文档流中,其百分比值完全被忽略了!

他会发现子元素的高度为0,哪怕父级<body>塞满了内容也是如此!需要如下设置:

html,body{height:100%;}
//以下设置也不行 因为body也没有具体的值
body{height:100%;}

为什么父级没有具体的高度的时候,height:100%;会无效?

详情请见P35 其实一句话总结就是: 如果包含快的高度没有显示指定的话(高度由内容指定!),

并且该元素不是绝对定位,则计算值为auto!

那么对应的高度和百分比进行计算的话,肯定是算不了的:

'auto'*100/100=NAN

宽度的话是这样解释的,如果包含块的宽度取决于该元素的宽度,那么产生在CSS2.1中是未定义的!

11|如何让元素支持height:100%

1.显示的设置元素的高度值

html,body{height:100%;}

2.使用绝对定位

div{height:100%;position:absolute;}

绝对定位的元素的百分比计算和费姐对定位的百分比计算是有区别的:

绝对定位的宽高百分比计算是相对于padding box的,也就是说会把padding大小值计算在内,但是非绝对定位元素则是相对于content box的计算的!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .box {
        height: 160px;
        padding: 30px;
        box-sizing: border-box;
        background-color: #beceeb;
      }
      .child {
        height: 100%;
        background: #cd0000;
      }
      .rel {
        position: relative;
      }
      .rel > .child {
        width: 100%;
        position: absolute;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <div class="child">高度100px</div>
    </div>
    <div class="box rel">
      <div class="child">高度160px</div>
    </div>
  </body>
</html>

预览请见:

https://demo.cssworld.cn/3/2-11.php

通过查看效果图还是比较显而易见的发现其中的区别的,因为绝对定位的百分比计算值是相对于padding-box因此父元素和子元素是left和top个差了30px!

最后作者对于高度的观点是这样的:

显示高度中规中矩,意料之中
绝对方法剑走偏锋,支持隐式高度计算给人意外之喜但本身脱离文档流!

其中还介绍到了只要在图片上覆盖两个绝对定位,同时设置height:100% 无论图片多高,我们的左右半区都能自动和图片高度一模一样,无需任何使用javascript计算!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .box {
        display: inline-block;
        position: relative;
      }
      .prev,
      .next {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        opacity: 0.5;
      }
      .prev {
        left: 0;
        background-color: #cd0000;
      }
      .next {
        right: 0;
        background-color: #34538b;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <a href="javascript:" class="prev" title="上一张">上一张</a>
      <a href="javascript:" class="next" title="下一张">下一张</a>
      <img src="/images/common/l/1.jpg" />
    </div>
  </body>
</html>

预览请见:

https://demo.cssworld.cn/3/2-12.php

03|CSS min-width/max-width和min-height/max-height二三事

01|为流体而生的min-width/max-width

使用的场景:自适应布局或者是流体布局!

对应的min-width和max-width是有边界的行为的属性,如果没有变化的话,就不会触发该属性,因此也不会体现出应用价值!

特定区间内的自适应方案出现了,就是在1200-1400像素自适应,满足大屏的同时也满足了笔记本的良好显示!

因此我们可以通过特殊的方式进行布局操作:

.container{
    min-width:1200px;
    max-width:1400px;
}

如果说图片的话,有些公众号的热门文章里面经常会有图片,因为是用户自定义上传的,对应的尺寸也会有大有小,为了避免在移动端展示过大而影响用户体验,常常会有下面的体验:

img{
    max-width:100%;
    height:auto!important;
}

max-width生效的时候图片会被水平压缩,height:auto是为了保证宽度不超出同时图片依然能够保持原来的比例! 但是体验上还是会有差距,就是高度从0到计算高度图文会有明显的瀑布式下落!

02|与众不同的初始值

max-height,max-width初始值:none

min-height,min-width初始值:auto

为什么这么说呢,直接在不同的浏览器下面进行设置,看输出结果如何

<body style="min-width:auto;">
    
</body>
<scirpt>
    console.log(document.body.style.min-width);
</scirpt>

但是如果说对max-width或者是max-height进行这样设置的话,通过document.body.style.max-width拿到的值为'' 因此也就说明max-width/max-height的值不为'auto',

那么为什么max-width/max-height的初始值为none呢?

我们设计一个实验,如果说父元素宽度为400px,子元素为800px,假如说max-width的初始值为auto,那么按照自然的结息规则来讲的话,max-width的计算值应该就是父元素400px了,但是子元素的800px直接完蛋了,因为max-width会直接kill掉width,于是我们的width永远不能够设置比auto计算值更大的宽度值了,这显然是有问题的,因此这就是为什么max-width初始值为none的原因了!

03|权重问题

超越!important 超越最大 (max-width和min-*都是如此!)
超越最大 min-* 权重比 max-*

04|任意高度的展开收起技术

这种效果应该屡见不鲜了吧,但是一般的做法是使用display在none和其他的状态之间切换,但是效果略显生硬,我们想要的是一种类似于jQuery中的slideUp和slideDown那样的动画,但是如果说在移动端里面的话,因为移动短的动画支持度良好,没有内置动画模块,因此需要自己实现动画,我们一般来讲通过height+overflow:hidden 成了首选目标,因此height的默认值为auto,应该知道auto是一个默认值,并非数值, height:100%无法和auto像计算一样! 从0px到auto也是无法计算的,因此无法形成过渡或者动画效果!

但是有什么办法能够解决吗?

通过 max-height! 这样一来的话保证比展开的值高度大的值就可以了!

04|内联元素

之前前面提到了外在盒子的类型,分别分为三种:

inline
inline-block
run-in 鲜有人使用淘汰风险!

因此现在最主流的外在盒子也只剩下两种了,从作用上面来讲的话 块级负责结构,內联负责内容!

内联盒子表现来看,典型特征就是可以和文字在一行显示,因此文字是内联元素,图片是内联元素,按钮也是内联元素,输入框和下拉框等原生表单控件都是内联元素!

01|内联世界深入的基础-内联盒模型!

其实这里面涉及到的内容是CSS进阶的标志知识点,是入门CSS开发人员和熟练CSS开发人员之间的分水岭,是需要反复拿来体味的!

<p>这是一行普通的文字<em>em</em>标签!</p>

其实上面这段文字,包含了很多术语和概念,或者换种通俗的说法,就是里面包含了很多种盒子,下面进行一一讲解:

内容区域 content area 围绕文字看不见的盒子,大小受限字符本身的特性控制,本质上是一个字符盒子! 还有就是类似于图片这样的替换元素,内容不是文字,不存在字符盒子,因此对于这种元素的话呢,内容区域可以看成元素自身!
其实说内容区域看不见的,这样是不利与理解内容区域本身的, 我们可以把文本选中的背景区域作为内容区域!
但是实际上内容区域并没有明确的定义,所以将其理解为em盒子(em 中文字符占据的1cm高度区域) 但是在本书中,将其理解为文本选中的区域!

内联盒子不会让内容成块显示这里所说的就是元素的 "外在盒子" 用来决定元素是内联还是块级元素, 该盒子又可以细分为 内联盒子 和 匿名内联盒子 两类:

如果是内联元素的标签的话,就是内联元素,如果只是光秃秃的文字的话 那么对应的就是 匿名内联盒子!

内联盒子 line box

每一行就是一个 行框盒子 每个行框盒子有是有一个一个 "内联盒子" 组成的!

包含盒子 containing box

所谓的p标签其实就是一个包含盒子 该盒子由一行一行的 "行框盒子"组成!

其实在CSS规范中,并没有"包含盒子"的盒子! 其实更准确的说法是包含块(containing block) 但是为了更好的理解将其统一名称为包含盒子!

02|幽灵空白节点

其实这个概念在内联元素中非常重要的一个概念, 具体指的是,在HTML5文档声明中,内联元素的所有解析和渲染表现就如同每一个行框盒子前面有一个 空白节点 一样, 这个空白节点永远透明不占据任何宽度看不见也无法用脚本获取,好像幽灵一般, 但是又确确实实存在,表现如同文本一般, 称之为 "幽灵空白节点"

<div><p><span></span></p></div>

虽然说里面的内联元素高度为0,但是对应的div确实有高度,如果说通过后面的 line-height和vertical-align的深入理解,这里只是证明幽灵空白节点是说得通的!

但是呢.CSS规范中是提及过这个所谓的 幽灵空白节点的实际上也是一个盒子不过是假想盒 名叫 strut 是一个存在于每个行框盒子前面的, 同时具有该元素的字体和行高属性为0宽度的内联盒子!

03|流,元素与基本尺寸
01|块级元素在HTML中标签众多,但是通常分为两类:"块级元素" 和 "内联元素" 01|块级元素块级元素中...
前端知识整理-CSS
目录：引用方式选择器流、元素、与基本尺寸块级元素内联元素盒子模型
3 流，元素与基本尺寸
块元素：一个流上只能显示一个元素，多个块级元素立马换行 1 .div,li,h1,table,img2 .块元素和...
流，元素和基本尺寸
每元素都有一个外在盒子和容器盒子(内在盒子) 外在盒子负责元素是否一行显示容器盒子负责元素的宽高、内容呈现块级...
《CSS世界摘要》
1 流，元素与基本尺寸 1.1 块级元素特性:一个水平流上只能单独显示一个元素，多个块级元素则换行显示常见的...
《CSS世界》读书笔记——流、元素与基本尺寸
一、块级元素块级元素是指一个水平留上只能单独显示一个元素，多个块级元素则换行显示。 1.1 块级元素和displ...
CSS世界-流的理解
今天看完了这本书的第三章——流、元素与基本尺寸, 对CSS有了很奇妙的体会, 原来CSS的体系是这么奇妙, 单单一...
第三章-流、元素和基本尺寸
由于块元素具有换行特性、可以用它清除浮动不使用list-item原因：IE11不支持after,before的d...
web前端入门到实战：JavaScript中尺寸类样式
一：鼠标尺寸类样式都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开，鼠标类尺寸样式都是X,Y，浏览器及元素...
内联元素与流
圣经：块级元素负责结构字母X-css世界中隐匿的举足轻重的角色基线 1 .在各种内联相关模型中，凡是涉及垂直方...

03|流,元素与基本尺寸

01|块级元素

01|块级元素

02|为什么使用list-item会出现项目符号:

03|display:inline-table盒子是怎样组成的?

02|width/height作用的具体细节

01外部尺寸与流体特性:

02|格式化宽度

03|内部尺寸与流体特性

04|首选最小宽度

05|最大宽度

06|width值的作用的细节

07|CSS流体布局下面的宽度分离原则

08|改变width/height作用细节的box-sizing

09|如何评价*{box-sizing:border-box}?

10|相对简单而单纯的height:auto;

11|如何让元素支持height:100%

03|CSS min-width/max-width和min-height/max-height二三事

01|为流体而生的min-width/max-width

02|与众不同的初始值

03|权重问题

04|任意高度的展开收起技术

04|内联元素

01|内联世界深入的基础-内联盒模型!

02|幽灵空白节点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读