以下讨论的是和相关的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
关于CSS中流体布局、元素以及尺寸的介绍的内容写到这里就结束啦，您可以收藏本页网址http://www.alixixi.com/web/ a/2018080995917.shtml方便下次再访问哦。