午夜上床片,一级操人妻人人操,日韩三级不卡在线

關(guān)鍵字:

1 浮動元素相關(guān)
2 清除浮動
3 定位方式
4 z-index
5 position:relative
6 BFC是什么,作用,生成
7 外邊距合并的幾個實例
8 代碼練習(xí)4個實例

1 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?

什么是浮動元素?
通過設(shè)置浮動元素是 float 屬性值不是 none 的元素,比如flaot:left的元素

浮動特征:一個正常元素脫離普通文檔流.然后被安放到它所在容器的的左端或者右端，并且其他的文本和行內(nèi)元素環(huán)繞它,浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
對父容器的影響:浮動屬性的子元素造成父容器高度塌陷,像脫離一樣

Paste_Image.png

造成影響的原因: 在CSS規(guī)范中，浮動定位不屬于正常的頁面流（page flow），是獨立定位的。所以，只含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當(dāng)它們不存在一樣。這就造成了顯示出來，父容器好像空容器一樣。
對浮動元素影響: 其中一個浮動的外邊緣靠到包含框或另一個浮動框的邊框,向左或向右緊挨.
對普通元素影響: 普通元素會當(dāng)浮動元素不存在,不影響普通元素原來的位置.
對文本影響: 文字會感知浮動元素的存在,當(dāng)有文字的普通文檔流元素與浮動元素重疊時,其文字會圍繞在浮動元素旁,原因在上面.

--->參考地址

2 清除浮動指什么? 如何清除浮動? 兩種以上方法

clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。
比如clear :left 屬性定義了元素的左邊上不允許出現(xiàn)浮動元素。在 CSS1 和 CSS2 中，本質(zhì)上清楚浮動這是通過自動為清除元素（即設(shè)置了 clear 屬性的元素）增加上外邊距實現(xiàn)的 。在CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。

清除浮動元素方法?
首先我們?yōu)槭裁匆宄釉?
浮動可能造成: 布局時出現(xiàn)重疊;被浮動元素遮擋內(nèi)容;有時父容器高度會塌陷;父容器沒有包裹到浮動的子元素;有時文字會圍繞浮動元素;被浮動影響而被隔開.
怎么清除浮動元素的影響?
方法1:在html里增加空div,并設(shè)置css樣式為clear:both;

Paste_Image.png

為什么會生效?
原理是父容器現(xiàn)在必須考慮非浮動子元素的位置，而后者肯定出現(xiàn)在浮動元素下方，所以顯示出來，父容器就把所有子元素都包括進去了。
這種方法比較簡單，
缺點:要在頁面中增加冗余標(biāo)簽，違背了語義網(wǎng)的原則
方法2:使父容器浮動
另一種思路是，索性將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動了。

    float為 left|right
    overflow為 hidden|auto|scroll
    display為 table-cell|table-caption|inline-block
    position為 absolute|fixed

代碼這樣寫：

<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>

這種方法不用修改HTML代碼，但是缺點在于父容器變成浮動以后，會影響到后面元素的定位，而且有時候，父容器是定位死的，無法變成浮動。
方法三：浮動元素的自動clearing
它的思路是讓父容器變得可以自動"清理"（clearing）子元素的浮動，從而能夠識別出浮動子元素的位置，不會出現(xiàn)顯示上的差錯。
要做到這點，只要為父容器加上一條"overflow: hidden"的CSS語句就行了。代碼這樣寫：

<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>

這種方法的缺點主要有二個，一個是IE 6不支持，另一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。
方法4:在父容器的尾部自動創(chuàng)建一個空的子元素
代碼

.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: left;
}

這樣也是可以的:
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

其中的"clearfix"是父容器的class名稱，"content:"";"是在父容器的結(jié)尾處放一個空白字符，"display: block; clear: both;"是確保這個空字符是非浮動的獨立區(qū)塊。
為什么加: *zoom: 1;
after選擇符IE 6不支持，也就是說上面的這段代碼在IE 6中無效，
我們添加一條IE 6的獨有命令"zoom:1;"就行了，這條命令的作用是激活父元素的"hasLayout"屬性，讓父元素?fù)碛凶约旱牟季帧?/li>

--->參考地址

3 有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？

position 屬性規(guī)定元素的定位類型。
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。
參考點和使用場景在下圖的描述當(dāng)中

Paste_Image.png

----->參考地址

4 z-index 有什么作用? 如何使用?

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
元素可擁有負(fù)的 z-index 屬性值。
Z-index 僅能在定位元素上奏效（例如 position:absolute;）
該屬性設(shè)置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。

實例:

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>

<body>
<h1>這是一個標(biāo)題</h1>
![](/i/eg_mouse.jpg) 
<p>默認(rèn)的 z-index 是 0。Z-index 1 擁有更高的優(yōu)先級。</p>
</body>

</html>

5 position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

position:relative
位置發(fā)生偏移.是相對于自己之前正常的位置計算的,何為正常位置:沒有定位position:static.不影響普通文檔流中其他的元素的位置,但還占據(jù)原來的位置
margin 設(shè)為負(fù)值
位置發(fā)生偏移,影響普通文檔流中其他的元素的位置.原來的位置會發(fā)生改變