首页 > 代码库 > 常用页面布局分享

常用页面布局分享

 

1. 页面常用布局

常用的页面布局方式主要有:浮动,弹性盒子,定位,设置表格模式,行内与块级相结合。

布局方式

Float

flex

position

table

block&Inline-block

兼容性

IE4

IE10

IE7

IE8

IE8

注意

清除浮动

设置自适应子容器与父容器

嵌套使用,各中关系

内容会自适应

效果有局限性,行内块之间有缝隙

 

1.1.浮动布局(Float)

描述

left

元素向左浮动。

right

元素向右浮动。

none

默认值。元素不浮动,并会显示在其在文本中出现的位置。

inherit

规定应该从父元素继承 float 属性的值。

注意: 绝对定位的元素忽略float属性!

为什么要清除浮动?

页面的元素定位机制分为:普通文档流,浮动,绝对定位 (其中"position:fixed" 是

"position:absolute" 的一个子类)。 
1)普通流:很多人或者文章称之为文档流或者普通文档流,其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ,但标准里只有另一个词,叫做 普通流 (normal flow),或者称之为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的。比如《CSS Mastery》,英文原书中至始至终都只有普通流 normal flow(普通流) 这一词,从来没出现过document flow (文档流) 

正常文档流示例图:(元素以自然顺序从上自下从左自右,块级占整行,行内元素据内容占位原则。

技术分享


2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,会导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。 

使用浮动布局方式,一定要记得清楚浮动,不清楚浮动有可能导致元素重叠,或其他兼容问题。

 技术分享

基本左、右浮动示例:

 技术分享

常用清除浮动的办法:

2.1) 添加额外标签 

通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可。

缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦,这是坚决不能忍受的,所以你看了这篇文章之后还是建议不要用了吧。 

2.2) 父元素设置 overflow:hidden 

原理来自于块级格式化上下文,此方法会使溢出内容隐藏

2.3)父元素设置overflow:auto

原理来自于块级格式化上下文,此方法在多个嵌套后,firefox某些情况会造成内容全选。元素内容超出时会使其显示导致样式错乱。

2.4)使其父元素也设置浮动

       会导致与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用

2.5)父元素设置display:table 

       使用此方法父元素会具有table表格相应属性根据内容自适应,有可能与布局样式不符。

2.6)使用:after 伪元素 
       其原理与加空标签一样,用伪元素可以精简代码,优雅dom

 

聊聊块级格式化上下文BFC

BFC是block formatting context,在文档流的类型中,普通文档流属于FC,而BFC可以理解为一种占位的普通文档流。它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。

  满足下列条件之一就可触发BFC

  【1】根元素,即HTML元素

  【2】float的值不为none

  【3】overflow的值不为visible

  【4】display的值为inline-block、table-cell、table-caption

  【5】position的值为absolute或fixed

效果分享:

http://www.cnblogs.com/xiaohuochai/p/5248536.html

 

1.1.定位position

定位文档流:在使用position这个属性时,分两种情况。

(1)       当position:relative时,并没有脱离普通文档流,元素根据top,right,left,bottom值相对自身定位,元素本身所占的位置会保留。

示例效果图:技术分享

 

(2)     当position:absolute;与position:fixed;时,元素脱离普通文档流,不再占据位置,类似一个漂浮层。absolute定位是相对于自己最近的“祖先元素”定位。Fixed定位是相对于浏览器窗口进行定位的。

Absolute示例:

 技术分享

 

1.2.弹性布局flex

弹性布局不会脱离普通文档流,也不会改变当前元素的定位,它是一个自适应的伸缩容器。

Flex的应用可参考微信移动端布局框架WeUI

https://weui.io/#flex

此处的示例主要用于做横向布局,flex也可用于纵向布局,此处不做过多示例,可参考官方文档中相关属性。

1.3.设置表格布局display:table

设置display:table的元素会被以作为块级表格来显示,前后自带换行符。

在html4中<table></table>标签的js源码中可以了解到,也是利用css中display:table来实现的。而在布局中,我们选中display:table而不是<table></table>来布局,是为了取长补短。

举个例子:

         某个元某的高度是动态获取的,若想让内容始终垂直居中。可以利用父元素display:table;子元素display:table-cell;(如<td></td>) vertical-align:middle;即可。

 技术分享

常见的框架如boostrap的栅格就是利用display:table来做的。

效果可见网页: http://demo.cssmoban.com/cssthemes4/btts_47_binary-Admin-v1.1/index.html

1.4.设置block&Inline-block

通过html标签与css中block或inline-block相结合也可以现实一系列的布局效果。

注:被设置inline-block的元素与元素之间会产生微小的间隙

例:因为有间隙,导致父元素的宽度放不下两个宽度为50%的子元素,被挤到下方

 技术分享

将子元素宽度调整为49%时。

 技术分享

若想要去掉中间的间隙方法有很多。分享文章:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/  

           

2.样式重构要点

1.在做基础布局时尽量避免多种布局方法交互使用。定位方式只在必要时使用。

2.所有的浮动都要清楚

3.做好公共样式和功能模块样式的分离。

4.初始编写公共样式时不要“内容化”。注:在之前传统的静态页面开发时,我们都要求见名知意,许多开发人员喜欢将‘内容为主,展现为辅’的原则作为样式的命名规则之一。但是在做公共样式时应与之相反。因为一套公共样式会运用到多个页面,多个组件中,若某个三栏布局的class被命名为 .foot-3 当此布局样式运用到头部菜单栏时,就会很奇怪。同时会增加后期维护人员的难度,误导理解。

5.在修改公共样式时,每修改一次,都应在相应位置添加注释,便于维护。

6.编写功能模块样式时,命名内容化,便于理解。样式应该用最外层容器包裹,避免样式的冲突。注:最外层容器千万不能以.content式命名,应如.emial-w表式邮箱外层。

7.样式的嵌套建议不超过5层。尽量避免用+  >  # 此类的选择器,最好统一使用.class以防破坏样式的优先级。

优先级计算:

         1)id选择器   100

         2)类选择器,属性选择器,伪类选择器   10

         3)元素和伪元素    1

         4)通配选择器*    0

         5)!important 权重没有值,优先级最高,方便记忆设成10000

常用页面布局分享