早期 <table>, 后来 <div> ,再后来 html5 语意化标签按照自上而下的方式顺次排布。
最初设计目的是用于图文环绕排版、不过目前常用于左右布局。
保持与目标元素(position不为static的最近父元素)的绝对距离,使用场景有顶部固定的广告栏,瀑布流等等。
较为系统的布局方案,详见:https://www.w3cplus.com/css/learncssgrid.html
较为系统的布局方案,详见:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
静态布局:网页布局始终按照固定的布局和尺寸来显示,不使用 Flex 之类的弹性盒子方案。
实现方法:
对于PC:一般居中布局,所有样式使用绝对宽度/高度(px),屏幕宽高有调整时,使用滚动条来查阅被遮掩部分;
对于移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如 wap.或m., 在 <viewport meta> 标签上设置 width,页面的各个元素也采用px作为单位。通过用 js 动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。
优点:这种布局方式对设计师和 css 编写者来说都是最简单的,亦没有兼容性问题。
缺点显而易见,不能根据用户的屏幕尺寸做出不同的展现:
流式布局目的是在不同大小的设备上满屏呈现同样网页。它是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)。
实现方法:
优点:页面左右满屏。
但缺点明显:
自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局(页面元素位置可能发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。
自适应布局看作是静态布局的一个合集。
实现方式:
自适应布局 页面里面元素的位置会变化,很好的解决了流式布局中的大屏空间利用率不高弊端。
缺点:单个布局容器无法灵活伸缩,未触发布局切换的情况下,容器仍然容易出现静态布局中提到的问题。
响应式布局同样分别为不同的屏幕分辨率定义布局。改变屏幕分辨率可以通过 CSS Media query 实时地切换不同的布局(页面元素位置可能发生改变),在每个布局中,页面元素会随窗口大小的调整发生流式布局中的自动尺寸变化。
实现方式:
响应式布局 融合了流式布局和自适应布局的优势。
缺点:CSS 代码繁琐,对于特定的设备有较多冗余,适用于对于各个终端(特别是移动端)性能要求不高的 Blog Dos 站点。
布局的目的,归根结底,都是为了网页设计服务。那么就顺带聊一聊和响应式设计(RWD)和自适应设计(AWD)。
Wikipedia: Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. Content, design and performance are necessary across all devices to ensure usability and satisfaction
“Progressive enhancement”, “one-fits-all”
响应式设计基于响应式布局,使用同一套页面在各种各样不同大小的设备上进行大小合适、布局(甚至功能)合理的展现。
响应式设计会根据识别屏幕宽度对于展示的具体内容块进行位置调整,甚至展示和隐藏。
实现方式:
Wikipedia: Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used, including responsive layout. The adaptive design will serve different versions of the site to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout
“All types of web design layouts”, “different versions to different devices”,
自适应设计是通过服务端检测设备类型、从 site 的不同版本中选择最合适该设备类型的设计布局/尺寸的版本进行展示。它可以使用到所有(包括响应式布局)布局方案。
实现方式:
相同点:
不同点:
原文来源:http://elevenbeans.github.io/2018/01/12/front-end-layout-methods/
由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不太完整
经过 CSS盒模型 和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)
在我们的实际开发中,经常会遇到页面中需要悬浮效果,本文将介绍通过fixed的实现,以及通过原生Js实现滚动到一定位置,实现div的悬浮
只能应用于内联元素以及 display 值为 table-cell 的元素。vertical-align 属性只能作用在 display 计算值为 inline、inline- block,inline-table 或 table-cell 的元素上。
浮动的特性:(1)浮动元素有左浮动(float:left)和右浮动(float:right)两种(2)浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来
三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。
CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利弊。
本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。
在网页中,元素有三种布局模型:流动模型(Flow) 默认的、浮动模型 (Float)、层模型(Layer)。下面我们来看一下这三种布局模型。
浮动+margin第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。 第二种:左边绝对定位(脱离文档流,不占位置)
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!