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

一、 块级元素

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

• 块级元素和“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;
  }

二、list-item 元素会出现项目符号的缘由

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

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

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

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

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

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

三、width:auto

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

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

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

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

• 超出容器限制

就第一个是“外部尺寸”，其他所有是“内部尺寸”。而这惟一的“外部尺寸”，是“流”的精髓所在。

四、外部尺寸与流体特性

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

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

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

五、内部尺寸与流体特性

元素尺寸由内部元素决定，“内部尺寸”有下面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 声明后的宽度。若是内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”其实是最大的连续内联盒子的宽度。

六、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. 与现实世界表现不一致的困扰。

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

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

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

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

八、改变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;
   }

九、关于height

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

• 对于height 属性，若是父元素height 为auto，只要子元素在文档流中，其百分比值彻底就被忽略了。百分比高度值要想起做用，其父级必须有一个能够生效的高度值。

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

  1. 设定显式的高度值。

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

十、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 使用足够安全的最小值，这样，收起时即便有延迟，也
会由于时间很短，很难被用户察觉，并不会影响体验。

十一、内联元素

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

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

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

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

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

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

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

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

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

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

十二、幽灵空白节点

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

注意:这里有一个前提，文档声明必须是HTML5 文档声明（HTML 代码以下），若是仍是 不少年前的老声明，则不存在“幽灵空白节点”。