Day10
●浮动
浮动是CSS很重要的概念。涉及:左浮动、右浮动、清除浮动。
浮动的必要性:因为默认情况下,div纵向排列:比如:
Div是块级元素,必然会换行。
*现在想达到如图效果:
这时候就必须要用到浮动属性。
☞使用右浮动。当把div1向右浮动时,它脱离标准流并且向右移动,直到它的右边缘碰到包含框的右边缘。
这时候div1会让出自己的位置,其他的div就会抵上去。如图的div2抵到了div1原来的位置上。
*若想达到如图效果:
即让三个块横向排列,除了使用display:inline;使之变为行内元素之外,还可以使用左浮动。
这时候,三个div块都向左浮动,div1向左浮动直到遇到包含框,另外两个框向左浮动知道碰到前一个浮动框。
左浮动:是指让该元素尽量向左边移动,让出自己右边的空间,给下一个元素显示。
☞当然,若我们的div块很多,外面的框无法容纳水平排列的浮动div元素,那么其它浮动块向下移动,直到有足够的空间。、
如下图所示这种情况。如果浮动元素高度不同,那么当他们向下移动时可能被其它浮动元素“卡住”。
解释:div5本来应该在div4后面,但是后面空间不足,它自动换行,这时候的位置按理来说是div1的下面,但div5发现div1下面有一个东西抵住了自己,那么它认为这个位置上已经放了一个div了(即div1的下半部分占用了一个div块的位置),所以它向后放到了div2的后面。
所以如果div5后面继续有div6,div7,div8的话,可以看一下运行效果:
发现div8是不会上去的。
若div2的高度变高,则会卡在div2后面。如图效果:
若div4变高。如图效果:
可以这么理解浮动:
- 它本身会尽可能向右/左移动,直到碰到边框或者别的浮动元素,特别强调浮动对块元素和行内元素都生效。
- 元素向右/左浮动,就相当于让出自己的左/右边,别的元素就会在它的左/右边排列。
看下面一个案例(字包图):
若不用浮动属性,可以看到文字在图片的最后一行才开始排列,也就是说,图片作为一个行内元素也占用了前面很多行。那么如果让图片左浮动,那么它就让出自己右边的所有行,达到如下图效果:
●浮动—清除浮动
如果不希望别的元素在某个元素的左边或者右边,可以使用清除浮动的方法,Clear:right; clear:left;clear:both;
(后面补充)
●css定位
Position属性值有:
☆Relative(相对定位):元素框偏移某个距离(left,top属性)。元素仍保持其未定位前的形状,它原本所占的空间仍保留,从这一角度看,好像该元素仍然在文档流/标准流中一样。
如图:正常全部左浮动效果如下:
而当设置div2为relative定位,并且使之向下向右移动之后:变成如下效果:
对应的Html代码:
<!DOCTYPE html>
<html>
<head>
<title>relative.html</title>
<link rel="stylesheet" type="text/css" href="./relative.css">
</head>
<body>
<div class="s1">内容1</div>
<div class="s1" id="special">内容2</div>
<div class="s1">内容3</div>
<div class="s1">内容4</div>
</body>
</html>
css文件:
.s1 {
width: 100px;
height: 60px;
background-color: green;
float: left;
margin-left: 10px;
}
#special {
position: relative; /*这里我们使用了相对定位*/
left: 40px; /*相对原来的位置,向右移动的大小(如果希望向左边移动,则这个值为负数即可)*/
top: 100px; /*相对原来的位置,向下移动的大小(如果希望向左边移动,则这个值为负数即可)*/
}
特别强调:Relative定位的参照点是:它原来应该出现的位置。然后进行移动。
☆Absolute(绝对定位):元素框从文档中完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素从原来的位置脱离,并让出自己的空间,后面的元素会补上。
原来的效果依然如图:
那么需要强调的是:Absolute定位是对离自己最近的那个非标准流盒子而言的。不一定总是相对于body定位。
所以,我们继续深入这个例子:
若当前页面包含一个非标准流的盒子,那么会出现什么效果呢:
可以看一下代码:
html:
<!DOCTYPE html>
<html>
<head>
<title>relative.html</title>
<link rel="stylesheet" type="text/css" href="./relative.css">
</head>
<body>
<div class="s1">内容1</div>
<div class="s1">内容3</div>
<div class="s1">内容4</div>
<div class="s2">ABC
<div class="s1" id="special2">内容2</div>
</div>
</body>
</html>
css代码:
.s1 {
width: 100px;
height: 60px;
background-color: green;
float: left;
margin-left: 10px;
}
#special {
position: relative; /*这里我们使用了相对定位*/
left: 40px; /*相对原来的位置,向右移动的大小(如果希望向左边移动,则这个值为负数即可)*/
top: 100px; /*相对原来的位置,向下移动的大小(如果希望向左边移动,则这个值为负数即可)*/
}
#special2 {
position: absolute; /*这里我们使用了绝对定位*/
left: 40px; /*相对父元素定位*/
top: 100px;
}
.s2{
/*非标准流*/
position:relative;
left:100px;
top:100px;
width:300px;
height:100px;
background-color: blue;
float:left;
}
☆Static(默认值):元素框正常生成。块级元素生成一个矩形框,作为文档流/标准流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
强调:若定位是static,则left和top属性不生效!
☆Fixed(固定):元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
即它是只相对于body定位。