@zhouyy 2018-05-10T06:17:05.000000Z 字数 3563 阅读 500

Positioning elements

css

绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position绝对定位非常方便布局对象。

绝对定位position示范适用图、不规律布局，为即可利用position:absolute；position:relative进行绝对定位

绝对定位与float浮动不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位，这也算是IE6 CSS HACK吧，注意不要混用即可。

文档流：文档内元素的流动方向
内联元素从左往右流动，如果遇到宽度不够另起一行继续从左向右流动。
块级元素从上到下流动

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围；

而对于使用absolute、fixed的position脱离文档流的元素，其他盒子内的文本都会无视它。

绝对定位

static absolute relative

static : 　无特殊定位，对象遵循HTML定位规则。Static positioning is default for all elements, except html
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框。absolute positioning needs a relative or an absolute parent or an ancestor.we just need to anchor the ancestor or the container of our paragraph tag with the position relative.Absolute positioning is relative to closest ancestor which has positioning set to non-static value。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以为父级（参考级）进行绝对定位
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。仍然有占位符：The original space for that element still remains and the originally laid out elements around that element still remain exactly the same, because they think the element is still sitting in its original spot.

<html>
<head>
<style>
div#container{
  background-color:#00FFFF;
}
p{
 width:50px;
 height:50px;
 border:1px solid black;
 margin-bottom:15px;
}
section{
}
#p1{
 position:relative;
 top:65px;
 left:65px;
}
#p2{
}
*{
 box-sizing:border-box;
 margin:0px;
 padding:0px;
}
</style>
</head>
<body>
<div id="container">
<p id="p1">1</p> 
<p id="p2">2</p>
<p>3</p>
<section>
This is a paragraph.lalalallalalalal
</section>
</div>
</body>
</html>

浮动定位

Float are taken out of normal document flow, and don't have vertical margin collapse

In regular document flow, the margin between each element collapse. However, when it comes to floated elements, the margins never collapse.

to resume normal document flow,use clear:

clear: left;//right ; both;

what this is doing is telling the browser that the section element is announcing that nothing should be allowed to be floating to the left of it.

Then the elememt will jump over the floating-left element.

<html>
<head>
<style>
div{
background-color:#00FFFF;
}
p{
width:50px;
height:50px;
border:1px solid black;
float:left;
margin-right:10px;
}
section{
clear:left;
}
#p2{
clear:left;
}
</style>
</head>
<body>
<div>
<p>1</p> 
<p id="p2">2</p>
<p>3</p>
<section>
This is a paragraph.lalalallalalalal
</section>
</div>
</body>
</html>

when we set the width 50% and the border 1px，the second element will float the next line as the whole width is a bit more then the screen size. To solve this problem, use * {box-sizing:border-box;}

inline-block 和 float

①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。

②float：设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。

两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。

区别：

①inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。

②float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。

场景：

①inline-block：当我们要设置某些元素在一行显示，并且排列方向一致的情况下，我们尽可能去用inline-block。因为inline-block的元素仍然在当前文档流里面，这样就减少了程序对DOM的更改操作，因为DOM的每一次更改，浏览器会重绘DOM树。理论上会增加性能消耗。这样也不用像flaot那样麻烦，需要清除flaot.

②float：即使inline-block为布局首选，但是也有inline-block所不能涉及的一些业务需求，比如：有两个元素，我们需要一个向左，一个向右排列，这时候我们就只能用float来实现，对于新手来说，会纠结float不好调，比较麻烦，想到达到预期效果，需要多次调整，有时候我们给元素设置了浮动，元素显示的顺序却变了，一时搞不清楚就改变HTML中元素的前后顺序等等。因为浏览器的解析顺序是逐行解析，当设置两个元素的右浮动时，顺序在前面的元素会先被解析，他是右浮动，那么在前边的元素就先往右浮动占位置，后边的元素依次被解析到以后，才往右排列，这样我们看到的顺序就是反的，当弄明白原因之后，调试就方便多了