摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。
下一篇：《CSS世界》笔记二：盒模型四大家族
写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》，不过是对CSS3知识的讲解和一些应用，但是《CSS世界》这本书将CSS作为一个体系讲解，颠覆了以往对CSS的认知。这是“二进宫”了，想着我是应该写点什么的。
一、 流体布局引出的几种网页布局方式| 布局方式 | 描述 | 特点 | 场景 |
|---|---|---|---|
| 静态布局 | Static Layout，传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。一般需要设置最小宽度 | 不能根据用户的屏幕尺寸做出不同的表现 | 传统PC网页 |
| 流式布局 | Liquid Layout，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统） | 网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用） | 屏幕分辨率变化时，页面里元素的大小会变化而但布局不变 |
| 自适应布局 | Adaptive Layout，使用@media分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围 | 屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化 | - |
| 响应式布局 | Responsive Layout，一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果 | 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变 | 多终端页面 |
| 弹性布局 | rem/em布局，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位 | 理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应 | 移动端 |
结论：
如果只做pc端，那么静态布局（定宽度）是最好的选择；
如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
《CSS世界》中，提出了“流体布局”的概念：
所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身 具有自适应特性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等同于 “自适应布局”。“自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也可以设置为100%自适应，但表格和“流”不是一路的，并不属于“流体布局”。
通俗的说，流体布局就是在width:auto;或者格式化宽/高中，通过设定margin/border/padding来影响content的布局的方式
二、为什么 list-item 元素会出现项目符号每个元素都两个盒子， 外在盒子和内在盒子（容器盒子）。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责 宽高、内容呈现什么的
| display | 外在盒子 | 容器盒子 | 表现 |
|---|---|---|---|
| inline-block | inline | block | 尺寸可定义，一行显示多个 |
| block | block | block | 尺寸可定义，单行显示 |
| inline | inline | inline | 尺寸不可定义，一行显示多个 |
相对应的，外在盒子有外部尺寸，内部盒子有内部尺寸。外部尺寸盒子表现为“充分利用可用空间”，既有“流”的特性
所谓流动性，并不是看上去的宽度100%显示这么简单，而是一种 margin/border/padding 和 content 内容区域自动分配水平空间的机制
如何创建具有流动性的盒子：
width:auto; 的块级盒子
格式化宽/高的盒子
三、width 注意点宽度值的作用区域与当前盒子的box-sizing相关，默认的box-sizing: content-box;，宽度值等于盒子content宽度，添加padding和border时盒子占位会扩大。box-sizing: border-box;时，宽度值等于盒子border*2+padding*2+content，占位不变，内容区域会改变。
绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的
width:100%;的设置会影响盒子的“流动性”，
四、max-/min- width/height特性1：超越!important；超越!important指的是max-width会覆盖width，即使在width上添加!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;
}
}
五、内联盒模型基本概念理解
内容区域：文本选中的背景色区域作为内容区域；
内联盒子：光秃秃的文字-匿名内联盒子；由行内元素包裹的属于内联盒子
行框盒子：每一行就是一个“行框盒子”，每个“行框盒子”又是由一个个“内联盒子” 组成的
包含盒子：由行框盒子组成
幽灵空白节点：
“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是:在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。
证明幽灵空白节点存在的最简单案例：
div { background-color: #cd0000; } span { display: inline-block; }
代码中没有设置高度，最终的页面却有高度。这个可以由幽灵空白节点解释
下一篇：《CSS世界》笔记二：盒模型四大家族
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116924.html
摘要：块级元素基本概念块级元素是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。其中内部尺寸由内部元素决定还有一类叫作外部尺寸宽度由外部元素决定。所以子元素的高度设为是无效的。此时的就会有计算值，即使祖先元素的计算为也是如此。 块级元素基本概念 块级元素：是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。 块级元素和display 为 block 的元素不是一个概念。 每...
摘要：基本上，等高布局只能满足栏的情况，除非正好是等比例的，那还可以使用实现最多栏布局上一篇世界笔记一流元素尺寸下一篇世界笔记三内联元素与对齐 上一篇：《CSS世界》笔记一：流/元素/尺寸下一篇：《CSS世界》笔记三：内联元素与对齐 写在前面 在读《CSS世界》第四章之前，粗浅的认为盒模型无非是margin/border/padding/content而已，再多无非在不同box-sizing...
摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...
摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...
摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...
阅读 2248·2023-04-25 22:15
阅读 1419·2021-11-19 09:40
阅读 2004·2021-09-30 09:48
阅读 3061·2021-09-03 10:36
阅读 1909·2021-08-30 09:48
阅读 1683·2021-08-24 10:00
阅读 2554·2019-08-30 15:54
阅读 477·2019-08-30 15:54
