css布局

按照是否相应浏览器宽度变化划分:

固定宽度布局:body的width是一个固定值,当浏览器的窗口缩小时,底部出现滚动条。无论几栏布局,各栏的width都是事先设为定值。比较复杂的网站一般采用这种布局,例如:京东
弹性(flex)布局:body的width不是一个固定的值,当浏览器窗口缩小时,浏览器里的内容宽度也相应收缩。网页为多栏布局时,即可都为弹性布局,也可部分固定宽度,部分弹性布局。一般用于简单网站,例如:谷歌
响应式布局:设计师事先设计多种方案的布局,前段工程师根据媒体查询,获取当前浏览器的宽度,呈现不同的布局。一般用于多终端(PC、PAD、PHONE等)

按照网页整体内容布局划分

  1. 单栏布局
    单栏布局,是指网页内容呈中心展示。如下图所示。

    注:在这里,设置width为固定宽度布局;设置max-width为弹性布局
    一栏布局
    一栏布局(通栏)
  2. 两栏布局
    浮动元素 + 普通元素margin

    两栏布局(一栏弹性)
    两栏布局(两栏都弹性)
  3. 三栏布局
    两侧两列固定宽度,中间列自适应宽度


  • 普通三栏布局
    html设计:
  <div id="content">
    <div class="menu">aside</div>
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>

css设计:两边列宽分别左浮和右浮,中间区块设置左右margin,大小分别为左右列块宽度。普通三栏布局

  • 圣杯布局和双飞翼布局

与上面普通三栏布局在html结构上不同。将呈现内容的区块放在两边列块的前面,浏览器优先解析该区块

利用浮动 和负margin:对于相邻的浮动元素,如果因为空间不够导致第n个浮动元素下移,可以通过给第n个浮动元素设置 margin为负值,来让第n个元素上移,其中负值的数值等于第n个元素的
宽度减去父容器被其他元素占用后还剩下的宽度,即第n个元素与其他元素折叠部分的宽度。浮动和负margin让元素上移实例

圣杯布局和双飞翼布局的html结构不一样

  • 圣杯布局:两边栏位于父元素的margin上方,为了保证自适应宽度的父元素的宽度>左边栏的宽度,需要为父元素设置min-width
  • 双飞翼布局:两边栏位于上一兄弟元素(中间栏)的子元素的margin上方。只需要(中间栏)的子元素的margin大小就可保证(中间栏)的宽度永远>左边栏的宽度

圣杯布局

html设计:
 <div id="content"> 
      <div class="main">main</div>
     <div class="aside">aside</div> 
      <div class="extra">extra</div> 
</div>
css设计:
#content:after{
content: ''; /*8*/
display: block; /*8*/ 
clear: both; /*8*/
} 
/*父容器设置padding和margin都可使content区块两边出现空白,并且使content内容宽度变小,
即,使main的内容宽度边小,此布局为弹性布局,
当浏览器窗口缩小,content的内容宽度(main的内容宽度)小于左边列块的宽度,
左边列宽将不会上移,布局将发生错乱。
此时需要设置main的min-width为左边列块的宽度*/
 #content{
 padding-left: 100px; /*5*/ 
padding-right: 150px; /*5*/ 
  /*margin-left: 110px;*/
/*margin-right: 160px;*/
} 
.aside, .main, .extra{
 float: left; /*2*/ 
}
 .aside{
 width: 100px; /*1*/ 
height: 300px; /*1*/
 background: red; /*1*/ 
/*浮动和负margin是元素上移。左边列宽上移后还需要移到main的右边*/
margin-left: -100%; /*4*/ 
/*相对定位*//*左右两个侧边栏仍然包裹在父容器里面,移动相对于自身宽度的位置,就先当于移动到了父容器的margin或者padding上方*/
position: relative; /*6*/ 
/*两边区块通过负margin上移后,再通过移动自身宽度的位置,实际占用的是父元素的margin*/
left: -100px; /*6*/ 
} 
.extra{ 
width: 150px; /*1*/
 height: 300px; /*1*/ 
background: yellow; /*1*/
/*浮动和负margin是元素上移*/
 margin-left: -150px; /*5*/ 
/*相对定位*/
position: relative; /*7*/
 left: 150px; /*7*/
 } 
.main{ 
height: 350px; /*1*/ 
background: blue; /*1*/ 
/*main的内容的宽度等于父容器内容的宽度*/
width: 100%; /*3*/
 }

圣杯布局实例

双飞翼布局(和圣杯布局里,左右列块上移之前的步骤一样)

圣杯布局中当浏览器窗口减小,使得main内容宽度减小,而左边列宽的负margin值与main内容宽度有关,main内容宽度减小到左边列块宽度以下,导致左边列宽不上移,布局出现混乱的问题,出现了双飞翼布局。
双飞翼布局是基于圣杯布局出现问题的改进。浏览器窗口变小,左边列宽位置不发生变化的关键在与main的内容宽度,即aside的上一个元素main的宽度永远大于等于左边列块的宽度,就能保证布局不发生错乱。为此,双飞翼布局在html排列上做出了改变。

html设计:

 <div id="content"> 
<div class="main">
 <div class="wrap">main</div> 
</div>
 <div class="aside">aside</div> 
<div class="extra">extra</div> 
</div>

css设计:

main内部多包裹了一层,需要实现的是wrap内容宽度变化,但是main内容宽度自动保持最小值。做法就是给wrap加margin(main的最小值是wrap两边margin和,始终大于左边列块的大小),实现左右列块在页面内容的两边排列。

 #content:after{
 content: ''; /*8*/
 display: block; /*8*/ 
clear: both; /*8*/
 } 
#content{ }
 .aside, .main, .extra{ 
float: left; /*2*/ 
}
 .aside{
 width: 100px; /*1*/
 height: 300px; /*1*/ 
background: red; /*1*/ 
margin-left: -100%; /*4*/
 }
 .extra{ 
width: 150px; /*1*/ 
height: 300px; /*1*/ 
background: yellow; /*1*/ 
margin-left: -150px; /*5*/ 
}
 .main{
 /* background: blue; */ /*第1步添加,第7步注释掉*/
 /* height: 350px; */ /*第1步添加,第7步注释掉*/ 
width: 100%; /*3*/
 } 
.wrap{ 
margin-left: 100px; /*6*/ 
margin-right: 150px; /*6*/ 
background: blue; /*7*/
 height: 350px; /*7*/
 } 

双飞翼布局实例

其他布局知识:

  • 水平等距排列
  • 浮动和负margin结合,是元素上移,必须都是浮动元素
  • 浮动元素的宽度根据内容自动收缩,所以必须设置宽高。若要实现宽度铺满父容器,需要使用width:100%(自身内容的宽度等于父容器内容的宽度)
  • 最好不要设置外部容器的宽高,使用内容的宽高撑开父容器
  • 浮动元素对margin:0 auto和text-align:center失效
  • 先根据页面结构写html,布局交给CSS
  • 写了float,一定要清除浮动
  • float不要与绝对定位一起使用
  • margin:0 auto和绝对定位一起使用无效
  • 文字的高度使用line-height好于height,可使单行文字垂直居中

文章著作权归本人所有,转载须说明来源

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,379评论 1 84
  • CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...
    web前端学习阅读 934评论 0 38
  • 目录 常用居中垂直居中水平居中垂直水平居中 单列布局 双列&三列布局 常用居中 垂直居中 单行文本垂直居中 图片垂...
    听城阅读 74评论 1 2
  • 前言 因为要在团队内作一次技术分享,想了几个题目,最后还是决定系统总结一下我在CSS布局这方面的知识。一是这个题目...
    Samhanx阅读 340评论 0 6
  • 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使...
    Calvin李阅读 183评论 0 0