css 世界学习总结 - 第三章 流、元素与基本尺寸

流体布局引出的几种网页布局方式

结论：

1. 如果只做pc端，那么静态布局（定宽度）是最好的选择；
2. 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的3选择，一份css+一份js调节font-size搞定；
3. 如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

流体布局是什么

所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身 具有自适应特性，所以“流体布局”往往都是具有自适应性的。 但是，“流体布局”并不等同于 “自适应布局”。 “自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也可以设置为100%自适应，但表格和“流”不是一路的，并不属于“流体布局”。 通俗的说，流体布局就是在width:auto;或者格式化宽/高中，通过设定margin/border/padding来影响content的布局的方式

什么是块级元素

HTML标签通常分为块级元素(block-level element)和内联元素(inline element) 块级元素：一个水平流上只能单独显示一个块级元素如 内联元素：一个水平流可显示多个内联元素（常用如 img a span button input etc）

哪些元素是内联元素

从表现看就行为表现来看，“内联元素”的典型特征就是可以和文字在一行显示。因此，文字是内联元素，图片是内联元素，按钮是内联元素，输入框、下拉框等原生表单控件也是内联元素

为什么list-item元素会出现项目符号

list-item 使用附加的标记盒子，专门用来放圆点、数字这些项目符号。

盒子模型

深藏不露的width:auto

1. 充分利用可用空间 块级元素的默认宽度是父级元素的宽度的100%
2. 收缩与包裹 当元素处于浮动、绝对定位或者为内联块元素或table元素，父级元素失去原有宽度收缩到与内部元素一样
3. 收缩到最小 这个容易出现在table-layout为auto的表格中，为了不超过父级元素的宽度
4. 超出容器限制 除非有明确的width相关设置，否则上面3种情况尺寸都不会主动超过父级容器宽度，但是存在一些特殊情况。除非是很长的英文，或者设置white-space: nowrap

外部尺寸与流体特性

1.正常流宽度 100%

在页面中随便扔一个div元素，其尺寸表现就会和水流一样铺满容器。这就 是block 容器的流特性。

举一个书中的例子

这是一个对比演示，上下两个导航均有margin和padding，前者无width设置，完全借助流的特性，后者宽度width:100%。 结果，后者的尺寸超出了外部的容器，完全就不像“水流”那样完全利用容器空间，即所谓的“流动性丢失”

2.格式化宽度

格式化宽度仅出现在"绝对定位模型"中，也就是出现在position属性值为absolute和fixed的元素中，在预设情况下绝对定位元素的宽度表现是"包裹性"，"宽度由内部尺寸决定"，但是有一中情况下由外部尺寸决定。

典型的可替换元素有：<iframe><video><embed><img>

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

例子格式化宽度实现水平垂直居中

内部尺寸与流体特性

1.包裹性

包裹性”除了“包裹”，还有“自适应性”。所谓“自适应性”指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸(除非容器尺寸小于元素的“首选最小宽度”)。

2.首选最小宽度

图片和文字的权重要远大于布局，当布局中存在更高权重元素时(如width:0 不生效)最小宽度受其内容影响 (文字中的最小宽度为单个字符宽度)

break-all 对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

3.最大宽度

最大宽度就是元素可以有的最大宽度。“最大宽度”实际等同于“包裹性”元素设置white-space: nowrap 声明后的宽度。(连续的空白符会被合并。但文本内的换行无效) 如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度

css流体布局下的宽度分离原则

使用双层嵌套实现内容自适应

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

box-sizing的作用

box-sizing属性是改变width的作用细节,改变了width作用所在的盒子

.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* firefox曾经支持 */
.box3 { box-sizing: border-box; } /* 全线支持 */
.box4 { box-sizing: margin-box; } /* 从未支持过 */

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

这种做法易产生没必要的消耗。通配符 * 应该是一个慎用的选择器，因为它会选择所有的标签元素。其对与某些元素 box-sizing 无论是什么值，对其渲染表现都没有影响，* 对这些元素而言就是没有必要的消耗。

/* 这样重置更合理 */
input, textarea, img, video, object {
    box-sizing: border-box;
}

box-sizing发明的初衷

box-sizing:border-box最常见的用途就是原生普通文本框input和文本域textarea的100%自适应父容器宽度

例如textarea宽度100%自适应

相对简单而单纯的height:auto

关于height:100%

div {
    width: 100%; /* 这是多余的 */
    height: 100%; /* 这是无效的 */
    background: url(bg.jpg);
}

为何height:100%无效

要明白其中的原因要先了解浏览器渲染的基本原理。 首先，先下载文档内容，加载头部样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染DOM内容。 套用本例就是，先渲染父级元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个元素的时候，父元素的宽度已经固定，此时的width:100%就是已经固定好的父元素的宽度。 宽度不够怎么办？溢出就好了，overflow属性就是为此而生的

因为没有显示定义height由仅内容填充，则解释成了auto。

'auto' * 100/100 = NaN

height:100%无效

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

设定显式的高度值

html, body {
    height: 100%;
}

使用绝对定位

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

如绝对定位和非绝对定位元素百分比值计算区别

任意大小图片的左右半区布局

CSS min-width/max-width和min-height/max-height

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

比如，网页宽度在1200～1400像素自适应，既满足大屏的大气又满足笔记本的良好显示，此时，min-width/max-width就可以大显神威了

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

公众号的热门文章中，经常会有图片，这些图片都是用户上传产生的，因此尺寸会有大有小，为了避免图片在移动端展示过大的影响体验，常常会有下面的max-width限制

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

但这样也会有体验上的问题，那就是在加载时图片占据高度会从0变成计算高度，图文会有明显的瀑布式下落

与众不同的初始值

超越!important，超越最大

超越 !important 指的是 max-width 会覆盖 width

比方说，针对下面的 HTML 和 CSS 设置，图片最后呈现的宽度是多少？

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

答案是256px。style、!important通通靠边站！因为max-width会覆盖width

超越最大指的是 min-width 的值大于 max-width 值时取 min-width 的值 超越最大值得是 min-width 覆盖 max-width ，此规则发生在 min-width 和 max-width 冲突时

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

最小宽度比最大宽度设置得还要大，遵循“超越最大”规则(注意不是“后台者居上”规则) 值取min-width,max-width被忽略，于是，.container元素表现为至少1400像素宽

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

第一反应就是使用height + overflow:hidden实现，但是，很多时候我们展开的元素内容是动态的，换句话说高度不是固定的，因此，height使用的值是默认的auto，应该都知道的auto是个关键字值，并非数值，正如height: 100%的100%无法和auto相计算一样，从0px到auto是无法计算的，因此无法形成过渡或动画效果

/* 因此，下面代码呈现的效果也是生硬的展开和收起 */
.element {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

.element.active {
    height: auto; /* 没有transition效果，只是生硬的展开 */
}

/* 难道就没有什么一劳永逸的实现方法吗？有，不妨试试max-height */
.element {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
}

.element.active {
    max-height: 666px /* 一个足够大的高度值 */
}

在本交互中，也就是height: auto时候的高度值。于是，一个高度不定的任意元素的展开动画就实现了

应用：

/* 使用max-height实现任意高度元素的展开收起动画 */
@mixin slide-vertical($maxHeight, $initMaxHeight:0, $duration:.25s) {
  max-height: $initMaxHeight;
  overflow: hidden;
  transition: max-height $duration;
  &.active {
    max-height: $maxHeight;
  }
}

因此，建议max-height使用足够安全的最小值，这样，收起时即使有延迟效果，也会因为时间很短，很难给用户察觉，并不会影响体验

点击原文链接查看代码案例：个人博客