摘要:圣杯布局圣杯布局和双飞翼布局都是为了解决两边定宽,中间自适应的三栏布局,中间栏在最前面优先渲染,多见于商城类网站布局。双飞翼布局不用设置相对布局,以及对应的和值。
合理的布局是产品的基础,可以使人感觉整齐大方,提升用户体验。掌握几种常见的布局形式也是前端开发的基础,对于快速实现页面重构有很大帮助。
原文链接
单列布局单列布局通常用于网站的首页,分为头部的导航、网页内容、页脚相关信息。
//html//css .body{ max-width: 1200px; margin: 0 auto; }
优点:布局实现简单,界面显示整体性强,给人感觉简洁大方。
左右布局左右布局常见于博客、后台管理系统,左侧为导航,右侧做内容显示。
//htmlfloat+margin
左侧元素设置成向左浮动并固定宽度,右侧元素左外边距预留出左侧元素的宽度。
//css .body{ max-width: 1200px; margin: 0 auto; } .left{ width: 200px; float: left; } .right{ margin-left: 200px; }
优点:布局简单,右侧宽带可自适应。
position+margin左侧元素用绝对定位固定在左边,右侧元素预留左外边距。
.body{ max-width: 1200px; margin: 0 auto; } .left{ position: absolute; top: 0; left: 0; width: 200px; } .right{ margin-left: 200px; }
优点:左侧内容可固定位置,右侧内容宽度自适应。
圣杯布局圣杯布局和双飞翼布局都是为了解决两边定宽,中间自适应的三栏布局,中间栏在最前面优先渲染,多见于商城类网站布局。
布局步骤:
1、三列内容都设置向左浮动。
2、设置container宽度为100%,设置两侧栏的宽度。
3、设置left左边距为负100%,设置right左边距为负的自身宽度。
4、设置body的padding值给左右两块内容留空间。
5、设置left、right为相对定位,左侧的left属性值为负自身宽度,右侧的right属性值为负自身宽度。
//html//css .body{ padding: 0 150px; } .container{ float: left; width: 100%; } .left, .right{ position: relative; float: left; width: 150px; } .left{ left: -150px; margin-left: -100%; } .right{ right: -150px; margin-left: -150px; }
这种布局中html的顺序不能更改,当窗口过小时会出现布局错乱,可以设置min-widthmin-width解决。
双飞翼布局双飞翼布局始于淘宝UED,与圣杯布局相似,但是做了改进,是用html结构的调整减少了相对属性设置
布局步骤:
1、三列内容都设置向左浮动。
2、设置container宽度为100%,设置左右内容的宽度。
3、设置left左边距为负100%,设置right左边距为负自身宽度。
4、设置content的margin值给左右内容留空间。
//html//css .container, .left, .right{ float: left; } .container{ width: 100%; } .left{ width: 150px; margin-left: -100%; } .right{ width: 150px; margin-left: -150px; } .content{ margin: 0 150px; }
优点:
圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局,以及对应的left和right值。
通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 150px; ,可以实现left+right+content的布局。
flex布局与传统布局方式相比,flex提供了一套简洁、完整、响应式的解决方案。
可以看下flex布局学习了解一下。
这里只是简单介绍几种布局方式,display+position+float属性可以实现不同特殊效果布局展现形式,选择最适合的方案才是王道
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115527.html
摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...
摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
阅读 3566·2020-12-03 17:42
阅读 2717·2019-08-30 15:54
阅读 2192·2019-08-30 15:44
阅读 535·2019-08-30 14:08
阅读 934·2019-08-30 14:00
阅读 1082·2019-08-30 13:46
阅读 2762·2019-08-29 18:33
阅读 2724·2019-08-29 14:11