目录
前言
举个例子，建筑师在设计房屋的时候，需要丈量开发地的尺寸，以及每幢房屋相对于其他房屋的位置。在css布局中，似乎也是这样开始的。我们也会去区分每个元素的尺寸和定位，力争完美的实现整个设计稿。所以，布局首先应该从定位和尺寸开始谈起。
定位
定位的概念就是定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，可是浏览器窗口本身。另外还有浮动，其实浮动并不完全算是定位，它的特性非常的神奇，在布局中也经常被广泛的应用。通俗的说，定位实际上就是实现指定元素摆放到页面的任意位置。
谈及定位，我们就得从position属性说起。position有六个属性值，分别是：static、relative、absolute、fixed、sticky和inherit。
-
static(默认)：默认值，元素没有开启定位。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
-
relative：相对定位。元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
-
absolute：绝对定位。
-
fixed：固定定位。元素框不再占有文档流位置，并且相对于视窗进行定位。
-
sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。
简单地，介绍一下position的属性值的含义后，在来看一下偏移量top、right、bottom、left四个属性。
当初在初学css的时候，很容易会与margin这个属性混淆。但其实，它们之间是很容易去辨识地。因为这四个属性值，其实是，定位时的偏移量。偏移量不会对static的元素起到作用。而margin，相对应的是盒子模型的外边距，它会对每个元素框起到作用，使得元素框与其他元素之间产生空白。
下面：我们来看一下一些常用定位的偏移
-
relative：它的偏移是相对于原先在文档流中的位置；开启元素的相对定位后，如果不设置偏移量，元素不会发生任何变化；相对定位是相对于元素在文档流中原来的位置进行定位，不会脱离文档流，会使元素提升一个层级（元素层级后续会记录）相对定位也不会改变元素性质，块级是块级，行级还是行级如图：
偏移量设置为：top：0px; left：100px;
-
absolute：它的偏移量是相对于最近一级position不是static的祖先元素的；元素框不再占有文档流位置，并且相对于离他最近的开启了定位的祖先元素进行定位（一般来说，子元素开启绝对定位都会同时开启父元素的相对定位），如果所有的祖先元素都未开启定位，则会相对于浏览器窗口进行定位。
-
fixed：它的偏移量是相对于视口的。
盒子模型
把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。
特点：
每个盒子都有：边界、边框、填充、内容四个属性；
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。（以上原理与特点摘于百度）
下面这幅图里面，分别是W3C盒子和IE盒子的模型：
这两种模型整体来说非常的相似。由内到外都是content,padding,border,margin。但是仔细看的话，虚线延长出来的部分，分别标注了height和width，但是在W3C中，虚线包围的部分只有content，而在IE中，虚线包围的部分是content+padding+border。这是最直观的不同，同时这也就是这两种模型的最大不同点。
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
简单实现一下W3C盒子模型:
浮动
1、浮动解决的问题
在日常网页开发中，浮动主要解决三个问题
- 文字环绕图片效果
- 莫名其妙的默认间距问题
- 浮动可以向左向右排版布局
2、浮动的特点
➢一 旦对元素设置浮动后 ，不论之 前元素是内联元素还是块级元素 ，都会被当作块级元素处理
➢一旦对元素设置浮动之后 ，该元素便会脱离标准流，会造成其父元素的内容塌陷
浮动，在布局中被广泛的应用。最初，设计浮动时，其实并不是为了布局的，而是为了实现文字环绕的特效，如图：
类似于ps中的图层一样，浮动的元素会在浮动层上面进行排布，而在原先文档流中的元素位置，会被以某种方式进行删除，但是还是会影响布局。
例如：先准备两个颜色块：
之后我们将left的块设置成左浮动，如图
发现虽然left块因为左浮动，而使得原先元素在文档流中占有的位置被删除，但是，当right块补上原先的位置时，right块中的字体却被挤出来了。这就是所谓的影响布局。
浮动之所以会被使用在布局中，是因为设置浮动后的元素会形成BFC（使得内部的元素不会被外部所干扰），并且元素的宽度也不再自适应父元素宽度，而是适应自身内容。这样就可以，轻松地实现多栏布局的效果。
浮动元素，其实对于布局来说，是特别危险的。因为你可能这一块做过浮动，但未做清除，那么造成高度塌陷的问题。就是上面图示的那种情况。这样就需要用到清除浮动。
清除浮动，最常用的方法有:
- 父元素高度已知情况下给父元素设置高度
- 多加一个空的子元素，给这个新加的子元素设置清除浮动
- 给子元素添加伪元素，要注意伪元素是行内元素，要注意行级和块级之间用display转换
- overflow: 将父元素的overflow，设置成hidden，然后zoom:1
{ overflow:hidden；zoom:1；}
overflow:hidden属性也是css中比较奇怪的特性，它会强制父级元素扩大到包含浮动元素，zoom:1只是触发ie6的hasLayout模式，不会对其他浏览器产生影响。
典型布局方式
两栏布局
两栏布局：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。
实现的方式：float + margin
<body>
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>
.left{
width: 200px;
height: 600px;
background: red;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
其他的方法：还可以使用position的absolute，可以实现同样的效果。
三栏布局
三栏布局，也是经常会被使用到的一种布局。
它的特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。
三栏布局可以有4种实现方式，每种实现方式都有各自的优缺点。
1.使用左右两栏使用float属性，中间栏使用margin属性进行撑开。
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
.left{
width: 200px;height: 300px; background: yellow; float: left;
}
.right{
width: 150px; height: 300px; background: green; float: right;
}
.middle{
height: 300px; background: red; margin-left: 220px; margin-right: 160px;
}
缺点有： 当宽度小于左右两边宽度之和时，右侧栏会被挤下去；html的结构不正确。
2. 使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
.left{
background: yellow;
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.middle{
height: 300px;
margin: 0 220px;
background: red;
}
.right{
height: 300px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background: green;
}
html结构正常。但又当父元素有内外边距时，会导致中间栏的位置出现偏差的缺点。
3. 使用float和BFC配合圣杯布局
将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。
<div class="wrapper">
<div class="middle">
<div class="main">中间</div>
</div>
<div class="left">
左栏
</div>
<div class="right">
右栏
</div>
</div>
.wrapper{
overflow: hidden; //清除浮动
}
.middle{
width: 100%;
float: left;
}
.middle .main{
margin: 0 220px;
background: red;
}
.left{
width: 200px;
height: 300px;
float: left;
background: green;
margin-left: -100%;
}
.right{
width: 200px;
height: 300px;
float: left;
background: yellow;
margin-left: -200px;
}
缺点是：1. 结构不正确 2. 多了一层标签。
4. flex布局
<div class="wrapper">
<div class="left">左栏</div>
<div class="middle">中间</div>
<div class="right">右栏</div>
</div>
.wrapper{
display: flex;
}
.left{
width: 200px;
height: 300px;
background: green;
}
.middle{
width: 100%;
background: red;
marign: 0 20px;
}
.right{
width: 200px;
height: 3000px;
background: yellow;
}
除了兼容性，一般没有太大的缺陷。
对于PC端的网页来说，使用较多，但是移动端，本身宽度的限制，很难做到三栏的方式。因此，移动端盛行的现在，我们应该掌握一些自适应布局技巧和flex等方式。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
