css浮动与定位
块级元素和行内元素的区别
- 格式:
默认情况下，块级元素会新起一行。行内元素不会以新行开始 - 内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。行内元素只能包含数据和其他行内元素
浮动元素的特征,对父容器、其他浮动元素、普通元素、文字的影响
- 特征：
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐
float造成的影响：
- 对其父元素的影响
- 对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
- 对其兄弟元素（非浮动）的影响
- 如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
- 对其兄弟元素（浮动）的影响
- 同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
- 对子元素的影响
- 当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动概念：
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，
下面的元素会自动补位，所以这个时候要进行浮动的清除。
清除浮动方式：
- 使用overflow属性来清除浮动卓
.ovh{
overflow:hidden;
}
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
- 使用额外标签法
.clear{
clear:both;
}
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
- 使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{
centent:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
定位的方式，实现原理
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
z-index的作用
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
使用position属性的对象能够覆盖未使用position属性或者position属性值为static的对象。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>z-index</title>
<style type="text/css">
div{
width:100px;
height:100px;
}
.a{
position:relative;
right:20px;
top:20px;
background-color:red;
}
.b{
background-color:green;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
注意:如果z-index设置为负数，也会被未使用position属性或者position属性值为static的对象覆盖。
网友评论