Css学习总结（5）——CSS常见布局方式

一、使用BFC隐藏属性
在对需要自适应的元素BFC化，可以实现两栏或三栏布局

使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题。如果将aside2与article交换位置，那么aside2元素会被挤到article元素之下，无法实现三栏自适应布局。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。
二、float + margin
在自适应宽度的元素上设置margin值，margin的值大于或等于固定宽度的值即可。实现思路与使用BFC隐藏属性差不多。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

三、absolute + margin

使用absolute + margin实现两栏布局时，只需要删除对应的栏目即可。
四、圣杯布局
圣杯布局，为什么叫圣杯布局...其实我觉得很奇怪，倒不如叫float + 负margin + relative更贴切一下。实现思路如下：
1)、两栏和自适应元素都设置同一方向的浮动(如float: left)。
2)、父元素设置左右padding为左右边栏的宽度。
3)、自适应元素设置宽度为100%。
4)、左边栏margin-left为负100%，再设置relative，最后通过left属性偏移负的自身宽度。
5)、右边栏margin-left为负自身宽度，再设置relative，最后通过right属性偏移负的自身宽度。

当然了，缺点也是有的。就是在宽度小于两栏宽度时，元素会因为宽度不足而掉下去。
五、双飞翼布局
双飞翼布局与圣杯布局相似。只不过少了relative与left, right的步骤和共同父元素，主内容元素多了层父元素。实现思路如下：
1)两栏和自适应元素都设置同一方向的浮动(如float: left)。
2)main元素设置左右margin值，值为左右两栏的宽度。main父元素设置宽度为100%。
3)左边栏margin-left为负100%。
4)右边栏margin-left为负自身宽度。

六、flex布局
flex布局新出现的概念较多，有兴趣的朋友可以到以下博客看更为详细的教程。使用flex来实现布局，我个人认为是最简单的方式。在移动端上，Android 4.4+以上、IOS 7.0+以上都支持flex布局。而在PC端上，使用flex布局时还是需要考虑一下的，因为到目前为止，IE11仍然只有部分属性支持。

Css学习总结（5）——CSS常见布局方式相关推荐

【CSS】关于CSS的几种移动端布局方式
关于CSS的几种移动端布局方式一.移动端布局 01.meta视口标签设置 02.移动布局的分类有哪些? 03.为什么需要二倍图? (1)物理像素和物理像素比 (2)二倍图(根据需要确定多倍图) (3 ...
移动端有哪些常见布局方式？
大家好,我是IT修真院深圳分院第九期的学员徐炜,一枚正直.纯洁.善良的前端程序员. 今天给大家分享一下,修真院官网css任务13,深度思考中的知识点--移动端有哪些常见布局方式? 1.背景介绍随着智 ...
css学习笔记（三）——布局模型
布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末 ...
超细的CSS学习笔记（CSS详解）
复习CSS时记录的笔记. 从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局.同时涉及最新版本 CSS3 的内容,掌握新的标准化组件. 文章目录一.CSS介绍 1.CS ...
CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
自学html和css,学习HTML和CSS的5大理由
描述人们学习HTML和CSS最常见的原因是开始从事web开发.但并不是只有web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面有5个你无法拒绝学习H ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
HTML及CSS学习笔记 06 - CSS简介和常见的选择器
本文是HTML及CSS课程的第六课.W3C提倡网页的内容与表现分离,层叠样式表(Cascading Style Sheet)即是网页中的"表现"部分,它描述HTML标签将会显示成什 ...
CSS学习02之css导入方式
回顾什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作.它可以同时 ...

Css学习总结（5）——CSS常见布局方式

Css学习总结（5）——CSS常见布局方式相关推荐

最新文章

热门文章