CSS系列篇：布局

前言

这是一篇对常见的CSS布局进行汇总整理。还有flex布局待我补充。

一、单列布局

Paste_Image.png

1、width和max-width的区别

注意点：设置width，当屏幕宽度缩放缩小到比设置值还小时，就会产生滚动条。而如果是设置max-width的话，当屏幕宽度缩放缩小到比设置值还小时，元素的大小就会缩小到当时实际的大小（100%），而不会产生滚动条。

没有设置最大宽度.png

设置最大宽度.png

2、单列布局实现：

思路：使用一个外部div包裹住头部、内容、尾部，然后头部、内容、尾部设置高度，对外部div设置宽度和margin为auto，实现单列布局的居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
  </div>
</body>
</html>

/*样式设置*/
.wrapper{
  border:1px solid black;
  max-width:500px;
  /*或者设置为width:500px;*/
  margin:20px auto;
}
.header{
  height:100px;
  background-color:red;
}
.container{
  height:300px;
  background-color:yellow;
}
.footer{
  height:100px;
  background-color:blue;
}

3、改进

在此基础上，做改善，去除外部标签，将wrapper的样式设置，直接放到头部、内容和尾部的样式上即可。这样可以减少标签，也可以对每个局部做控制。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="header mid"></div>
  <div class="container mid"></div>
  <div class="footer mid"></div>
</body>
</html>
/*样式设置*/
.mid{
  max-width:500px;
  margin:0px auto;
}
.header{
  height:100px;
  background-color:red;
}
.container{
  height:300px;
  background-color:yellow;
}
.footer{
  height:100px;
  background-color:blue;
}

4、单栏布局——通栏的实现

因为上下部分是实现通栏，背景色充满整个屏幕，而内容部分还要保证居中。所以将上下部分外面包裹一层，对外面一层只设置颜色，而对上下部分的div则实际设置宽度和居中的设置，来实现目的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="header">
    <div class="mid">haha头部</div>
  </div>
  <div class="container mid">内容</div>
  <div class="footer">
    <div class="mid">haha尾部</div>
  </div>
</body>
</html>
/*样式设置*/
.mid{
  max-width:500px;
  margin:0px auto;
}
.header{
  height:50px;
  background-color:red;
}
.container{
  height:300px;
  background-color:yellow;
}
.footer{
  height:50px;
  background-color:blue;
}

效果：

Paste_Image.png

注意：这里对居中的设置，.mid的宽度是设置了一个最大宽度的。
这样可以避免如下情况：当页面缩小到一定程度时，出现滚动条，上下部分出现白色空隙：

Paste_Image.png

如果不在例子中.mid中设置最大宽度，就需要分别在上下两部分设置最小宽度，这样页面宽度缩小到比最小宽度最小时，也还是最小宽度的大小，而不会产生空白缝隙，虽然此时就有滚动条了。.mid的宽度是设置了一个最大宽度的设置，就不会出现滚动条。

.mid{
  width:500px;
  margin:0px auto;
}
.header{
  height:50px;
  background-color:red;
  min-width:500px;
}
.container{
  height:300px;
  background-color:yellow;
}
.footer{
  height:50px;
  background-color:blue;
  min-width:500px;
}

上下两部分设置最小宽度.png

.mid中设置最大宽度-没有滚动条.png

二、内部元素水平居中

这个很明了了，不推荐使用浮动然后margin:auto的方式。直接使用行内元素居中的text-align:center设置。父元素设置文本居中，子元素设置为inline-block：

.parent{text-align:center;}
.child{display: inline-block;}

对于IE67，不支持inline-block，就使用hack的写法：

.child{*display:inline;*zoom:1}

*号是只有IE67才能识别，zoom:1让其产生BFC，触发了块级的特性。

实际例子：实现如下常见效果：

Paste_Image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <a href="">HTML</a>
    <a href="">CSS</a>
    <a href="">JavaScript</a>
    <a href="">Output</a>
  </div>
</body>
</html>
/*css设置*/
.container{
  text-align:center;
  background-color:#ccc;
  font-size:0;
  padding:5px;
}
.container a{
  display:inline-block;
  text-decoration:none;
  border:1px solid #eee;
  border-right:0;
  font-size:14px;
  padding:5px 6px;
  color:#fff;
}
.container a:last-child{
  border-right:1px solid #eee;
  border-radius:0px 5px 5px 0px;
}
.container a:first-child{
  border-radius:5px 0px 0px 5px;
}

三、双列布局

Paste_Image.png

对这种一边固定宽度，另一边宽度最大化的布局的实现，就需要借助浮动和margin来设置。
固定宽度的那一列，设置为浮动，向左或向右浮动。然后父元素清除浮动，这样footer部分才能正常文档流位置。自适应宽度的那一列，则设置margin-left或margin-right，留出缝隙出来。

具体代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="right">随意扩展宽度</div>
  </div>
  <div class="footer">这是底部</div>
</body>
</html>
/*样式设置*/
.container:after{
  content:" ";
  display:block;
  clear:both;
}
.left{
  width:200px;
  height:400px;
  background-color:blue;
  float:left;
}
.right{
  height:400px;
  background-color:red;
  margin-left:210px;
}
.footer{
  height:50px;
  background-color:#ccc;
}

Paste_Image.png

如果要实现侧边栏在右，则只需要改下浮动的方向以及margin-right即可。
注意，这里浮动的设置需要关注浏览器的渲染顺序，所以div的顺序还是不变。

<div class="container">
    <div class="left"></div>
    <div class="right">随意扩展宽度</div>
 </div>

而非

<div class="container">
    <div class="right">随意扩展宽度</div>
    <div class="left"></div>
</div>

如果是这样，按照浏览器渲染顺序，则会变成：

Paste_Image.png

对于浏览器的渲染顺序，在三栏布局中就更为明显：

四、三栏布局

注意html的书写顺序:

<body>
  <div class="container">
    <div class="aside"></div>
    <div class="aside2"></div>
    <div class="content">随意扩展宽度</div>
  </div>
  <div class="footer">这是底部</div>
</body>

而不是

<body>
 <div class="container">
   <div class="aside"></div>
   <div class="content">随意扩展宽度</div>
   <div class="aside2"></div>
 </div>
 <div class="footer">这是底部</div>
</body>

因为对于第一种写法，左右两栏都是浮动，中间content部分会当它们不存在，直接同行，而设置左右margin之后，就能留出空隙

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="aside"></div>
    <div class="aside2"></div>
    <div class="content">随意扩展宽度</div>
  </div>
  <div class="footer">这是底部</div>
</body>
</html>
/*样式设置*/
.container:after{
  content:" ";
  display:block;
  clear:both;
}
.aside{
  width:100px;
  height:300px;
  background-color:blue;
  float:left;
}
.aside2{
  width:100px;
  height:300px;
  background-color:blue;
  float:right;
}

.content{
  height:200px;
  background-color:red;
  margin-right:110px;
  margin-left:110px;
}
.footer{
  height:50px;
  background-color:#ccc;
}

效果：

Paste_Image.png

五、圣杯布局

圣杯布局其实也是三栏布局，但不同之处就在于，它是将主体dom部分写在前面，仍能实现三栏布局：

<body>
 <div class="container">
   <div class="aside"></div>
   <div class="content">随意扩展宽度</div>
   <div class="aside2"></div>
 </div>
 <div class="footer">这是底部</div>
</body>

具体实现：
将三个div都左浮动，然后将main这个div的宽度等同于100%，等于父元素宽度。然后对左右div设置margin-left的负值，让它们三个同处一行。

Paste_Image.png

然后就考虑怎么留左右缝隙的事了。因为main的宽度是父元素宽度的100%,所有如果还是使用margin-left和margin-right的方式来留左右空白是无效的，只会加长宽度。
所以设置三个div的父元素的左右padding，让整行留空白出来，然后对左右两个div设置相对定位，进行移动即可

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="main">haha</div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

/*样式设置*/
.ct:after{
  content:"";
  display:block;
  clear:both;
  width:500px;
}
.ct{
  padding-left:100px;
  padding-right:100px;
}
.main{
  height:300px;
  background:blue;
  float:left;
  width:100%;
}
.left{
  width:100px;
  height:300px;
  background:yellow;
  float:left;
  margin-left:-100%;
  position:relative;
  left:-110px;
}
.right{
  width:100px;
  height:300px;
  background:red;
  float:left;
  margin-left:-100px;
  position:relative;
  left:110px;
}

最终效果：

Paste_Image.png

六、双飞翼布局

圣杯布局的实现，然后页面缩小到一定程度，就会错乱：

Paste_Image.png

这是就需要进一步优化，就是双飞翼布局啦。

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="双飞翼布局" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .main
    {
     /* height:350px;
      background:blue;*/
      width:100%;
    }
    .leftside
    {
      width:100px;
      height:300px;
      background:red;
      margin-left:-100%;
    }
    .rightside
    {
      width:100px;
      height:300px;
      background:yellow;
      margin-left:-100px;
    }
    .main,.leftside,.rightside
    {
      float:left;
    }
    .wrap
    {
      margin-left:100px;
      margin-right:100px;
      height:350px;
      background:blue;
    }
    .container
    {
      content:'';
      display:block;
      clear:both;
    }
  </style>
</head>
<body>
    <div class=container>
      <div class="main">
       <div class="wrap">main</div> 
      </div>
      <div class="leftside">leftside</div>
      <div class="rightside">rightside</div>
    </div>
</body>
</html>

实现效果

Paste_Image.png

七、浮动和负margin的区别以及应用

负margin是会改变到元素的实际所占坑位的大小的，所以当多个元素并行浮动放不下时，可以设置最后一个元素的负margin值，放到同一行。
负margin和position:relative的区别，CSS系列篇：零碎、细节点整理（二）的这篇文章中已经梳理了。

1、应用：水平等距排列

子元素li设置浮动，父元素ul设置负margin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>
</body>
</html>
/*样式设置*/
*{
  margin:0;
  padding:0;
  list-style:none;
}
.ct{
  border:1px solid black;
  width:640px;
  margin:0 auto;
  overflow:hidden; /*形成BFC，清除浮动*/
}

li{
  width:200px;
  height:200px;
  background-color:red;
  float:left;
  margin:20px 0px 20px 20px;
}
ul{
  margin-left:-20px;
}

效果：

Paste_Image.png

最后编辑于：2017.12.09 01:54:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

CSS系列篇：布局

前言

一、单列布局

1、width和max-width的区别

2、单列布局实现：

3、改进

4、单栏布局——通栏的实现

二、内部元素水平居中

三、双列布局

四、三栏布局

五、圣杯布局

六、双飞翼布局

七、浮动和负margin的区别以及应用

1、应用：水平等距排列

推荐阅读更多精彩内容