《CSS世界》笔记一：流/元素/尺寸

下一篇：《CSS世界》笔记二：盒模型四你们族

写在前面

初读《CSS世界》仍是在深圳，属于换工做前的充能。那时候除了工做，其余时间基本都在这本书里了，由于它的确吸引人。以前看过《CSS揭密》，不过是对CSS3知识的讲解和一些应用，可是《CSS世界》这本书将CSS做为一个体系讲解，颠覆了以往对CSS的认知。这是“二进宫”了，想着我是应该写点什么的。

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

布局方式	描述	特色	场景
静态布局	Static Layout，传统Web设计，网页上的全部元素的尺寸一概使用px做为单位。无论浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。通常须要设置最小宽度	不能根据用户的屏幕尺寸作出不一样的表现	传统PC网页
流式布局	Liquid Layout，页面元素的宽度按照屏幕分辨率进行适配调整，但总体布局不变。表明做栅栏系统（网格系统）	网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用）	屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
自适应布局	Adaptive Layout，使用@media分别为不一样的屏幕分辨率定义布局，即建立多个静态布局，每一个静态布局对应一个屏幕分辨率范围	屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化	-
响应式布局	Responsive Layout，一个页面在全部终端上（各类尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出使人满意的效果	每一个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变	多终端页面
弹性布局	rem/em布局，包裹文字的各元素的尺寸采用em/rem作单位，而页面的主要划分区域的尺寸仍使用百分数或px作单位	理想状态是全部屏幕的高宽比和最初的设计高宽比同样，或者相差很少，完美适应	移动端

结论：

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

《CSS世界》中，提出了“流体布局”的概念：

所谓“流体布局”，指的是利用元素“流”的特性实现的各种布局效果。由于“流”自己 具备自适应特性，因此“流体布局”每每都是具备自适应性的。可是，“流体布局”并不等同于 “自适应布局”。“自适应布局”是对凡是具备自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也能够设置为100%自适应，但表格和“流”不是一路的，并不属于“流体布局”。

通俗的说，流体布局就是在width:auto;或者格式化宽/高中，经过设定margin/border/padding来影响content的布局的方式

2、为何 list-item 元素会出现项目符号

每一个元素都两个盒子， 外在盒子和内在盒子（容器盒子）。外在盒子负责元素是能够一行显示，仍是只能换行显示；内在盒子负责 宽高、内容呈现什么的

display	外在盒子	容器盒子	表现
inline-block	inline	block	尺寸可定义，一行显示多个
block	block	block	尺寸可定义，单行显示
inline	inline	inline	尺寸不可定义，一行显示多个

相对应的，外在盒子有外部尺寸，内部盒子有内部尺寸。外部尺寸盒子表现为“充分利用可用空间”，既有“流”的特性

所谓流动性，并非看上去的宽度100%显示这么简单，而是一种 margin/border/padding 和 content 内容区域自动分配水平空间的机制

如何建立具备流动性的盒子：

1. width:auto; 的块级盒子
2. 格式化宽/高的盒子

3、width 注意点

1. 宽度值的做用区域与当前盒子的box-sizing相关，默认的box-sizing: content-box;，宽度值等于盒子content宽度，添加padding和border时盒子占位会扩大。box-sizing: border-box;时，宽度值等于盒子border*2+padding*2+content，占位不变，内容区域会改变。
2. 绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，可是，非绝对定位元素则是相对于 content box 计算的
3. width:100%;的设置会影响盒子的“流动性”，

4、max-/min- width/height

特性1：超越!important；超越!important指的是max-width会覆盖width，即便在width上添加!important

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

// 此刻，图片展现宽度为256px

特性2：超越最大；超越最大指的是min-width覆盖max-width，此规则发生在min-width和 max-width冲突的时候

.container {
    min-width: 1400px;
    max-width: 1200px;
}
// 此刻，container展现为至少1400px

应用：

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

5、内联盒模型基本概念理解

1. 内容区域：文本选中的背景色区域做为内容区域；
2. 内联盒子：光秃秃的文字-匿名内联盒子；由行内元素包裹的属于内联盒子
3. 行框盒子：每一行就是一个“行框盒子”，每一个“行框盒子”又是由一个个“内联盒子” 组成的
4. 包含盒子：由行框盒子组成

幽灵空白节点：

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

证实幽灵空白节点存在的最简单案例：

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

div {
  background-color: #cd0000;
}
span {
  display: inline-block;
}

代码中没有设置高度，最终的页面却有高度。这个能够由幽灵空白节点解释

下一篇：《CSS世界》笔记二：盒模型四你们族