下一个：《CSS世界》注2：箱型四大家族写在前面。初读《CSS世界》还是在深圳，属于换工作前的充电。当时除了工作，其他时间基本上都在这本书里度过，因为真的很吸引人。之前看过《CSS揭密》，不过只是对CSS3知识和一些应用的讲解，而这本书《CSS世界》将CSS作为一个系统来讲解，颠覆了以往对CSS的认知。这是“二进宫”，我觉得应该写点什么。一、流体布局衍生的几种网页布局方式布局描述特点场景静态布局StaticLayout，传统的网页设计，网页上所有元素的大小都以px为单位。不管浏览器的确切大小如何，网页的布局总是按照最初编写代码时的布局显示。一般需要设置最小宽度，不能根据用户的屏幕大小做出不同的表现。传统PC网页流式布局LiquidLayout，页面元素宽度根据屏幕分辨率适配调整，但整体布局不变。代表性的工作栅栏系统（网格系统）使用网页中主要划分区域大小的百分比（与min-、max-属性一起使用）。当屏幕分辨率改变时，页面中元素的大小会改变但布局不会改变AdaptivelayoutAdaptiveLayout，使用@media为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应toascreenresolutionrange当屏幕分辨率改变时，元素在页面中的位置会改变但大小不会改变-Responsivelayout响应式布局，一个页面在所有终端（PC，手机，手表，冰箱网络浏览器等）布局样式，即元素的位置和大小会发生变化。终端页面的灵活布局是rem/em布局。包裹文字的每个元素的大小以em/rem为单位，页面主要划分区域的大小仍然以百分比或px为单位。理想状态是所有屏幕的纵横比都和原来设计的纵横比一样，或者差不多，完美适配移动端。结论：如果只在PC端做，那么静态布局（固定宽度）是最好的选择；如果在移动端做，而且设计对高度和元素间距要求不高，那么elasticlayout（rem+js）是最好的选择，一段css+一段js调整font-size；如果pc、mobile一定要兼容，要求高那么Responsivelayout还是最好的选择，前提是根据不同的高宽设计，根据mediaquery做responsivelayout。在《CSS世界》中，提出了“流体布局”的概念：所谓“流体布局”是指利用元素的“流动”特性实现的各种布局效果。因为“流”本身就具有自适应的特性，所以“流体布局”往往是自适应的。但是，“流体布局”与“自适应布局”不同。“自适应布局”是任何一种具有自适应特性的布局的总称，“流体布局”的范围要窄得多。比如表格布局也可以设置成100%自适应，但是表格和“流”不一样，不属于“流体布局”。通俗地说，流体布局就是width:auto;或格式化宽度/高度，并设置边距/边框/填充以影响内容的布局。有外箱、外箱和内箱（集装箱箱）。外部框负责元素是否可以一行显示，或者只能换行显示；内部框负责显示的宽度、高度和内容。externalboxcontainerbox显示inline-block。可以定义行内块大小，一行可以显示多个块。block块大小可以定义，单行Displayinlineinlineinlinesize不能定义，一行显示多个对应的，outerbox有outersize，innerbox有innersize。外部尺寸盒是“充分利用可用空间”，具有“流动”的特点。所谓的流动性并不是外观100%宽度那么简单，而是一种自动分配margin/border/padding和content内容区域水平空间的机制如何创建一个fluidbox：width:auto;block-levelboxformatwidth/heightbox3,width注意width值的作用区域与当前box的box-sizing有关，默认box-sizing:content-box;,width值等于框的内容宽度，添加padding和border时框会扩大。当box-sizing:border-box;时，宽度值等于boxborder*2+padding*2+content，占用不变，content区域会变化。绝对定位的宽高百分比计算是相对于paddingbox的，也就是说paddingsize值会被统计，但是非绝对定位的元素是相对于contentbox计算的。宽度：100%；该设置会影响框“Fluidity”，四个，max-/min-width/heightfeature1:beyond!important;beyond!important意味着max-width将覆盖宽度，即使你添加!important
