CSS世界读书笔记-流与宽高

隐居者

1.前言在学习CSS的过程中，我经常会被数不清的属性和特性弄得晕头转向。作为前端新手，经常会坐在显示器前花很多很多时间去“追”视觉稿，也经常会在“为什么这个属性不生效”和“为什么这个属性生效了但是不是我想要的效果”之间摇摆，直到我开始看张鑫旭老师的《CSS世界》，才开始渐渐地走进CSS世界，才明白原来CSS的背后也是有一套“物理”和“魔法”法则。遵循着法则，很多问题也许会迎刃而解。因为在阅读本书CSS的“流”相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇读书笔记。首先，用张鑫旭老师在本书开篇写下的一句话送给大家：“挖掘简单现象背后的原因，会让你学到很多别人很难学到的CSS技能和知识。”2.流CSS中，有一个隐形的基本定位和布局机制，那便是“流”。在网络上，随便搜索一篇CSS教程，基本都会提到“普通流”和“文档流”，还有“文本流”这些关键词，有时候经常会弄混淆他们。这里我专门去查了一下才发现了他们之间的差异。所谓的文档流，实际就是普通流，在W3C的规范中并没有“documentflow”，只有“nomalflow”，之所以出现普通流和文档流，很可能是早期对英文文档的不同翻译而造成的混淆。而从W3C的中对normalflow的介绍中，也可以看出，普通流是用来针对于盒模型来说的。而“文本流”是针对元素内部文字（符）的排列来说的。两者都是“流”，只是描述的对象不同。“流”跟现实世界的“水流”有异曲同工的表现。所谓“流”，就是CSS世界中引导元素排列和定位的一条看不见的“水流”。对比水流和CSS文本流： 作为块级元素就像是铺满容器的水，注意是铺满；而  作为内联元素就像是漂浮在水中的木头。如果没有人为的干预（比如魔鬼float），元素总是会按照既定的流（块级元素自上而下，行内元素从左到右），有顺序有组织地排列。2.1流体布局既然流是布局的机制，那么利用流的机制和特性就可以实现流体布局。使用流体布局从一定程度上可以帮助我们编写精简且巧妙的CSS，保持布局的强扩展性和韧性。2.2块级元素和内联元素块级元素：block-levelelement常见的块级元素有 、、、 ,、  -   等，需要注意是，“块级元素”和“display:block”不是一个概念。这里需要注意一下块级元素的基本特征：一个水平流上只能单独显示一个元素，多个块级元素则换行显示。除此之外，块级元素还有可以控制高度、行高、以及宽度默认为包含该块级容器的100%。而在这些列举的块级元素中  元素默认的display值是 list-item， 元素默认的display值是 table，但是它们均是“块级元素”，因为它们都符合了块级元素的基本特征。下面就来仔细的看看上面提到的“display:block”、“display:list-item”、“display:table”：display:block1.如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行。例子中，宽度继承于父元素body。2.高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。例子中高度被两个   子元素撑开。display:list-item默认会把元素作为列表显示，要完全模仿列表的话还需要加上list-style-position，list-style-type。 “盒子”魔术：为什么list-item元素会出现项目符号？所有的“块级元素”都有一个“主块级盒子”，list-item除此之外还有一个“附加盒子”。list-item元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（markerbox），专门用来放圆点、数字这些项目符号。display:table作为块级表格来显示（类似table），表格前后带有换行符。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了 table 那样的制表标签所导致的语义化问题。正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响。🌰 点击内联元素：inlineelement与块级元素负责结构不同，内联元素负责内容。比如