《css世界》笔记之流、元素与基本尺寸

1、 块级元素

• 基本特性：就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。

• 块级元素和“display 为block 的元素”不是一个概念，display:list-item、display:table均是块级元素。

• 用display值为block和list-item来配合clear属性来清除浮动带来的影响（不使用list-item的原因：字母比较多、会出现项目符号、ie浏览器不支持伪元素的display 值为listitem）。

  .clear: after {
    content: '';
    display: table; // 也可以是block，或者是list-item
    clear: both;
  }

2、list-item 元素会出现项目符号的原因

• list-item 元素会出现项目符号是因为生成
  
  了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目号。
  
  IE浏览器下伪元素不支持list-item 或许就是无法创建这个“标记盒子”导致的。

• display值为block的元素由外在的“块级盒子”和内在的“块级容器盒子”组成。

• display值为inline-block的元素由外在的“内联盒子”和内在的“块级容器盒子”组成。

• display值为inline的元素内外均是“内联盒子”。

• display值为inline-table的元素外面是“内联盒子”，里面是“table 盒子”。

• width/height 作用在是内在盒子，也就是“容器盒子”。

3、width:auto

width 的默认值是auto,默认值的4种表现：

• <div>、<p>这些元素的宽度默认是100%于父级容器的，这种充分利用可用空间的行为还有个专有名字，叫作fill-available。

• 是浮动、绝对定位、inline-block 元素或table 元素收缩到合适。

• 收缩到最小，这个最容易出现在table-layout 为auto 的表格中。

• 超出容器限制

就第一个是“外部尺寸”，其余全部是“内部尺寸”。而这唯一的“外部尺寸”，是“流”的精髓所在。

4、外部尺寸与流体特性

元素尺寸由外部的容器决定

• 正常流宽度是一种margin/border/padding和content 内容区域自动分配水平空间的机制，尽量用无宽带的流来布局。

• 格式化宽度：在position属性值为absolute 或fixed 的元素中。在默认情况下，宽度由内部尺寸决定。当left/top 或top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position 属性值不是static）的祖先元素计算。margin、border、padding 和content 内容区域同样会自动分配水平（和垂直）空间

5、内部尺寸与流体特性

元素尺寸由内部元素决定，“内部尺寸”有下面3 种表现形式：

• 包裹性:元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）按钮:

  1. 按钮就是inline-block 元素。

  2. 按钮文字越多宽度越宽（内部尺寸特性），但如果文字足够多，则会在容器的宽度处自动换行（自适应特性）。

  3. <button>标签按钮才会自动换行，<input>标签按钮，默white-space:pre，
     
     是不会换行的，需要将pre 值重置为默认的normal。

  4. 按钮最大宽度就是容器的240 像素

• 首选最小宽度:元素最适合的最小宽度.外部容器的宽度是240 像素，假设宽度是0，里面的inline-block 元素的宽度是首选最小宽度。具体表现规则：

  1. 东亚文字（如中文）最小宽度为每个汉字的宽度。

  2. 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。

  3. 如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS 中的word-break:break-all。

  4. 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。

• 最大宽度:是元素可以有的最大宽度。“最大宽度”实际等同于“包裹性”元素设置white-space:nowrap 声明后的宽度。如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度。

6、width 值作用的细节

• width 是作用在“内在盒子”上的，“内在盒子”又被分成了4 个盒子，分别是content box、padding box、border box和margin box。

• content box ： content-box，padding box ：padding-box，border box ：border-box。margin box没有名字。

• margin 的背景永远是透明的。

• 在CSS2.1 的规范中，有一段非常露骨的描述：content box 环绕着width 和height 给定的矩形。这种宽度设定和表现并不合理：

  1. 流动性丢失：对于块状元素，如果width:auto，则元素会如水流般充满整个容器，而一旦设定了width具体数值，则元素的流动性就会被阻断。

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

7、CSS 流体布局下的宽度分离原则

• 所谓“宽度分离原则”，就是CSS 中的width 属性不与影响宽度的padding/border（有时候包括margin）属性共存。写法：

      .father {
        width: 180px;
      }
      .son {
        margin: 0 20px;
        padding: 20px;
        border: 1px solid;
      }

• 为何要宽度分离:当一件事情的发展可以被多个因素所左右的时候，这个事情最终的结
  
  果就会变数很大而不可预期。宽度在这里也是类似，由于盒尺寸中的4 个盒子都能影响宽度，自然页面元素的最终宽度就很容易发生变化而导致意想不到的布局发生。使用“宽度分离”后，咱们不需要烧脑子去计算了，而且页面结构反而更稳固。

8、改变width/height 作用细节的box-sizing

• box-sizing 的作用：改变了width 作用的盒子。box-sizing:border-box 就是让100 像素的宽度直接作用在border box上，从默认的content box 变成border box。此时，content box 从宽度值中释放，形成了局部的流动性，和padding 一起自动分配width 值。

• box-sizing 并不支持margin-box。

• 如何评价*{box-sizing:border-box}。从纯个人角度讲，不喜欢这种做法的。

  1. 这种做法易产生没必要的消耗，通配符*应该是一个慎用的选择器，因为它会选择所
     
     有的标签元素。

  2. 这种做法并不能解决所有问题。box-sizing 不支持margin-box，只有当元素没
     
     有水平margin 时候，box-sizing 才能真正无计算，而“宽度分离”等策略则可以彻底解决
     
     所有的宽度计算的问题。

  3. 替换元素css重置更合适：

   input, textarea, img, video, object {
     box-sizing: border-box;
   }

9、关于height

• 对于width 属性，就算父元素width 为auto，其百分比值也是支持的。

• 对于height 属性，如果父元素height 为auto，只要子元素在文档流中，其百分比值完全就被忽略了。百分比高度值要想起作用，其父级必须有一个可以生效的高度值。

• 如何让元素支持height:100%效果：

  1. 设定显式的高度值。

  2. 使用绝对定位。绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box 的，也就是说会把padding 大小值计算在内，但是，非绝对定位元素则是相对于content box 计算的。

10、min-width/max-width和min-height/max-height

• max-width 和max-height 的初始值是none,min-width/min-height 的初始值都是auto。

• 超越!important 指的是max-width 会覆盖width，而且这种覆盖不是普通的覆盖，是超级覆盖。

 <img src="1.jpg" style="width:480px!important;">
 img { max-width: 256px; }

答案是256px。

• min-width覆盖max-width，此规则发生在min-width和max-width冲突的时候。

• 任意高度元素的展开收起动画技术：

.element {
  height: 0;
  overflow: hidden;
  transition: height .25s;
}
.element.active {
  height: auto; /* 没有transition 效果，只是生硬地展开 */
}

可以试试下面方法

.element {
  max - height: 0;
  overflow: hidden;
  transition: max - height .25s;
}
.element.active {
  max - height: 666px; /* 一个足够大的最大高度值 */
}

注意：即虽然说从适用范围讲，max- height 值越大使用场景越多，但是，如果max-height 值太大，在收起的时候可能会有“效果延迟”的问题。因此，我个人建议 max-height 使用足够安全的最小值，这样，收起时即使有延迟，也

会因为时间很短，很难被用户察觉，并不会影响体验。

11、内联元素

• 块级负责结构，内联负责内容。

• “内联元素”的“内联”特指“外在盒子”，和“display 为inline的元素”不是一个概念。

• “内联元素”的典型特征就是可以和文字在一行显示。

• 内容区域（content area）：域指一种围绕文字看不见的盒子可以理解为把文本选中的背景色区域作为内容区域。

注意：在IE 和Firefox 浏览器下，文字的选中背景总能准确反映内容区域范围，但是Chrome 浏览器下，::selection 范围并不总是准确的，例如，和图片混排或者有垂直padding 的时候，范围会明显过大，这一点需要注意。

• 内联盒子（inline box）：“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类：

  1. 内联盒子:外部含内联标签（<span>、<a>和<em>等）。

  2. 匿名内联盒子:光秃秃的文字。

• 行框盒子（line box）:每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

• 包含盒子（containing box）:<p>标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。

12、幽灵空白节点

• 在HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。

注意:这里有一个前提，文档声明必须是HTML5 文档声明（HTML 代码如下），如果还是

很多年前的老声明，则不存在“幽灵空白节点”。