您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

CSS中流体布局、元素以及尺寸的介绍

  本站整理   互联网   2018-08-09   点击:   我要评论
这篇文章给大家介绍的内容是关于CSS中流体布局、元素以及尺寸的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

布局方式描述特点场景
静态布局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的布局的方式

二、为什么 list-item 元素会出现项目符号

每个元素都两个盒子, 外在盒子和内在盒子(容器盒子)。外在盒子负责元素是可以一行显示,还是只能换行显示;内在盒子负责 宽高、内容呈现什么的

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

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

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

如何创建具有流动性的盒子:

  1. width:auto; 的块级盒子

  2. 格式化宽/高的盒子

三、width 注意点

  1. 宽度值的作用区域与当前盒子的box-sizing



    更多关于 的文章
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行