常见CSS布局

2019-03-27 本文已影响5人 kiterumer

CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。

正常布局流

正常布局流，即我们所说的文档流，是原生的、未经人为刻意控制的浏览器默认的HTML布局排版方式。
“霸道”的块级元素，从上往下，另起一行；“温柔”的内联元素（最常见的文字），从左到右依次紧挨着排布。一个元素的性格是“霸道”或是“温柔”，通常出生时便已确定，但我们可以刻意地通过display属性的设置来“调教”它的性格，亦霸道（display:block），亦温柔（display:inline），亦或霸道兼温柔（diaplsy:inline-block）。

浮动

通常元素默认是不浮动的，即浮动属性为none。使用浮动的“调教”后，我们便能让两个块级元素从默认的垂直布局变为水平布局。
注意：子元素设置float属性后，通常需要在其父元素设置清除浮动的样式，即在父元素添加一个.clearfix的类，样式为

.clearfix::after{
   content: '';
   display: block;
   clear: both;
}

这样，如果那个元素需要清除浮动，直接多加一个.clearfix的类名即可，一劳永逸。这里利用的伪元素的一些特性。

左右布局

1. 简单的左右布局

HTML代码

<body>
   <div class="father clearfix">
     <div class="left">我在左</div>
     <div class="right">我在右</div>
   </div>
</body>

CSS样式

.father{
  border:1px solid black;
}
.left{
  background:red;
  width:40%;
  float:left;
}
.right{
  background:yellow;
  width:40%;
  float:right;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

效果

如果父元素没有添加.clearfix类，则会出现父元素没有高度的bug，如图

2. 左侧固定，右侧自适应布局（float + margin）

2.1 左侧左浮动，右侧设置margin-left

html代码

<body>
  <div class="left"></div>
  <div class="main"></div>
</body>

CSS代码

.left{
  width:200px;
  height:100px;
  background:#abcdef;
  float:left;
}
.main{
  height:100px;
  background:#777;
  margin-left:200px;
}

2.2 利用浮动和负外边距来进行左边固定右边自适应的布局，与上面有些许不同，可以仔细琢磨下两这有何区别

html

<body>
  <div class="left"></div>
  <div class="wrap">
    <div class="main"></div>
  </div>
</body>

CSS

.left{
  width:200px;   
  height:100px;
  background:#abcdef;
  float:left;
  margin-right:- 200px;  /*如果不设置负右外边距，.warp会被挤到下一行；设置多大呢？绝对值大于等于左边栏目宽度即可*/
}
.wrap{
  width:100%;
  height:100px;
  background:#777;
}
.main{
  margin-left:200px;   /*等于左边栏的宽度*/
  background:orange;
  height:100%;
}

效果

这里第二部分用了一个div进行包裹，如果不是很好理解，可以粘贴代码到js.bin看看效果，然后打开开发者工具进行调试。

左中右布局

左中右布局的实现由很多种，大体可分为传统的浮动+margin和绝对定位+margin，现代比较“潮”的flex弹性盒子布局，以及科技含量更高的Grid布局。

浮动+margin
绝对定位+margin
flex弹性盒子
Grid栅格

浮动+margin

左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应三栏布局。
这种布局需要注意主体main标签必须放在最后，左右随意，一定要注意div书写的顺序。

html代码

<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>

CSS代码

html,body{
  margin:0; 
  height:100%;
}
#main{
  height:100%; 
  margin:0 210px; 
  background:#ffe6b8;
}
#left,#right{
  width:200px; 
  height:100%;
  background:#a0b3d6;
}
#left{
  float:left;
}
#right{
  float:right;
}

效果

浮动+margin负值法

首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动，内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100% margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
html

<body>
 <div id="main">
    <div id="body"></div>
 </div>
 <div id="left"></div>
 <div id="right"></div>
</body>

CSS

html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}   /*本来在屏幕外，通过负外边距想坐移了一个屏幕的宽度*/
#right{margin-left:-200px;} /*同上，本来自屏幕外，向左移了自身宽度的长度*/

这种方法较难理解，推荐动手利用开发者工具调试调试。

绝对定位+margin

左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。div顺序没有要求。

html

<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>

CSS

html,body{
margin:0; 
height:100%;
}
#left,#right{
position:absolute; 
top:0;
width:200px;
height:100%;
}
#left{
left:0; 
background:#a0b3d6;
}
#right{
right:0; 
background:#a0b3d6;
}
#main{
margin:0 210px; 
background:#ffe6b8; 
height:100%;
}

在用绝对定位时，通常会在其父元素使用相对定位，即position:absolute和position:relative是成对出现的，两者相辅相成。

flex布局

给父元素（Flex容器）设置 display:flex；子元素（Flex项目）会默认排成一行，通过设置容器或项目的各种属性来改变项目布局的方式。

.father{
  display: flex;
  justify-content:space-between;
}

限于知识水平，这里只做简要介绍，详情请查阅 flex

参考博文：张鑫旭