CSS的定位机制有3种：普通流、浮动、定位。
普通流
即标准流。
指有一个网页内标签元素正常从上到下，从左到右排列顺序的意思。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.son{
height: 150px;
width: 150px;
background-color: green;
}
.daughter{
height: 150px;
width: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="son"></div>
<div class="daughter"></div>
<span>我是行内元素1</span>
<span>我是行内元素2</span>
<span>我是行内元素3</span>
<span>我是行内元素4</span>
</body>
块级元素div按照性质独占一行，行内元素span按顺序依次前后排列。
浮动
让任何盒子可以一行排列。
什么是浮动
元素的浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
选择器{float:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认） |
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.son{
height: 150px;
width: 150px;
float: left;
background-color: green;
}
.daughter{
height: 150px;
width: 200px;
float: left;
background-color: purple;
}
</style>
</head>
<body>
<div class="son"></div>
<div class="daughter"></div>
</body>
给两个div增加向左浮动属性，
浮动特性
浮动首先有包含块的概念。
即：浮动的元素总是找离他最近的父级元素对齐，但不会超出父元素的内边距的范围。
浮动的元素排列位置与上一个元素（块级）有关。
如果上一个元素浮动，则浮动元素顶部会与上一个元素的 顶部 对齐。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.son{
height: 150px;
width: 150px;
float: left;
background-color: green;
}
.daughter{
height: 150px;
width: 200px;
float: right;
background-color: purple;
}
</style>
</head>
<body>
<div class="son"></div>
<div class="daughter"></div>
</body>
如果上一个元素是标准流，则浮动元素的顶部会与上一个元素的 底部 对齐。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.son{
height: 150px;
width: 150px;
background-color: green;
}
.daughter{
height: 150px;
width: 200px;
float: right;
background-color: purple;
}
</style>
</head>
<body>
<div class="son"></div>
<div class="daughter"></div>
</body>
由上图可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动，则其他子级都需要浮动，这样才能一行对齐。
总结：
1.浮动脱离标准流，不占位置，会影响标准流。
2.元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。
3.浮动根据元素书写的位置来显示相应的浮动。
清除浮动
为什么要清除浮动
由于浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响，因此要清除浮动。
清除浮动本质
主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
正常标准流盒子：
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
body{
color: white;
text-align: center;
}
/*父元素没有设置高度*/
.d1{
border: 1px purple solid;
background-color: purple;
}
/*子元素设置高度 父元素被撑开*/
.d2{
background-color: orange;
height: 150px;
width: 30%;
}
.d3{
background-color: green;
height: 150px;
width: 30%;
}
.d4{
background-color: pink;
height: 200px;
width: 65%;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">我是儿子一号</div>
<div class="d3">我是女儿一号</div>
</div>
<div class="d4">我是朋友</div>
</body>
没有设置高度的父元素紫色div被撑开。
子盒子浮动：
<style>
/*子元素浮动，父元素不会被撑开*/
.d2,.d3{
float: left;
}
</style>
子盒子浮动，父盒子没有高度，其他标准流盒子占领地盘，排版造成影响。
清除浮动的方法
clear属性
选择器{clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 清除左侧浮动的影响 |
| right | 清除右侧浮动的影响 |
| both | 同时清除左右两侧浮动的影响 |
额外标签法
W3C推荐做法：通过在浮动元素末尾添加一个空的标签。
例如<div style=”clear:both”></div>或其他<br />标签等。
| 优点 | 通俗易懂，书写方便 |
|---|---|
| 缺点 | 添加许多无意义的标签，结构化较差 |
overflow属性
通过触发BFC（下回分解），可以实现清除浮动效果。
给 父级 添加overflow：hidden | auto | scroll均可实现。
| 优点 | 代码简洁 |
|---|---|
| 缺点 | 内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素 |
after伪元素
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
| 优点 | 符合闭合浮动思想，结构语义化正确 |
|---|---|
| 缺点 | 由于IE6、7不支持:after，使用zoom: 1触发hasLayout |
hasLayout是IE7-浏览器的特有属性，是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。
注意：
content: "."里面尽量跟一个小点或者其他，尽量不要为空，否则在firefox 7.0前的版本会有生成空格。
before和after双伪元素
.clearfix:before,.clearfix:after {
content:".";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
定位
定位属性
边偏移
| 属性 | 描述 |
|---|---|
| top | 顶级偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
注意：
边偏移要与定位模式搭配使用。
定位模式
选择器{position:属性值;}
| 属性值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
静态定位（static）
网页中所有元素都默认是静态定位。
在取值为static时，无法通过边偏移属性来改变元素位置。
相对定位（relative）
将元素相对于它在标准流中的位置进行定位。
可以通过边偏移属性改变元素的位置，但它在文档流中的位置仍然保留，即 原来的位置继续占有。
<head>
<meta charset="UTF-8">
<title>css定位</title>
<style>
.d2{
background-color: orange;
border: 1px solid;
width: 30%;
height: 150px;
}
.d3{
background-color: pink;
border: 1px solid;
width: 30%;
height: 150px;
}
.d4{
background-color: skyblue;
border: 1px solid;
width: 30%;
height: 150px;
}
</style>
</head>
<body>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
添加相对定位
.d3{
position: relative;
left: 50px;
top: 50px;
}
粉色div原来的位置依旧存在
绝对定位（absolute）
如果文档可以滚动，绝对定位会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
可以通过边偏移属性改变元素的位置，但它完全脱标，，即 原来的位置丢失。
父级没有定位：
当所有父元素都没有定位时，以浏览器为准进行定位。
<head>
<meta charset="UTF-8">
<title>css定位</title>
<style>
.d1{
background-color: orange;
border: 1px solid;
width: 70%;
height: 310px;
margin:0px auto;
}
.d2{
background-color: pink;
border: 1px solid;
width: 30%;
height: 150px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
父级有定位：
绝对定位是将元素依据最近的已经定位（绝对、固定、相对）的父元素（祖先）进行定位。
.d1{
background-color: orange;
border: 1px solid;
width: 70%;
height: 310px;
margin:0px auto;
/*给父元素添加相对定位*/
position: relative;
}
如果只是给盒子指定了定位，但是没有给边偏移，则该盒子以标准流来显示排序，和上一个盒子的底边对齐，但是不占有位置。
子绝父相
即子级是绝对定位，父级是相对定位。
子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。
父盒子布局时，需要占有位置，因此父亲只能是相对定位.。
注意：
子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。
固定定位(fixed)
是绝对定位的一种特殊形式，以浏览器窗口作为参照物来定义网页元素。
特点：
1.固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index）
当多个元素同时设置定位时，定位元素之间可能会发生重叠，z-index可用于调整重叠定位元素的堆叠顺序。
取值可为正整数、负整数、0。
注意：
1.z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2.如果取值相同，则根据书写顺序，后来居上。
3.后面数字一定不能加单位。
4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都没有这个属性。
<head>
<meta charset="UTF-8">
<title>css定位</title>
<style>
.d1{
background-color: orange;
border: 1px solid;
width: 70%;
height: 310px;
margin:0px auto;
/*给父元素添加相对定位*/
position: relative;
}
.d2{
background-color: green;
border: 1px solid;
width: 30%;
height: 150px;
}
.d3{
background-color: pink;
border: 1px solid;
width: 31%;
height: 160px;
}
.d2{
position: absolute;
right: 50px;
top: 50px;
}
.d3{
position: absolute;
right: 50px;
top: 20px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
.d2{
position: absolute;
right: 50px;
top: 50px;
/*添加层叠属性*/
z-index: 1;
}
定位总结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动 |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
定位模式转换
元素添加了绝对定位和固定定位之后， 元素模式也会发生转换，都转换为行内块模式。
元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见，他们分别是 display visibility 和 overflow。
主要目的是让一个元素在页面中消失，但是不在文档源码中删除。
display显示
设置或检索对象是否及如何显示。
| 属性值 | 作用 |
|---|---|
| none | 隐藏对象 |
| block | 1.显示元素（2.转换为块级元素） |
特点：
隐藏之后，不再保留位置。
visibility 可见性
设置或检索是否显示对象。
| 属性值 | 作用 |
|---|---|
| visible | 对象可视 |
| hidden | 对象隐藏 |
特点：
隐藏之后，继续保留原有位置。
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
| 属性值 | 作用 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
扫一扫
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
