浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 特征：
- 浮動元素會脫離正常的文檔流，元素將不在頁面占用空間，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示；
- 浮動元素后面的塊級元素的內容會向此浮動元素的外邊距靠齊，但文檔普通流中的塊框感知不到浮動框的存在；
- 浮動元素后面的內聯元素會向此浮動元素的外邊距靠齊。
- 影響：
- 對于父容器：元素浮動之后，它脫離當前正常的文檔流，因而無法撐開其父元素，造成父元素的塌陷。
- 對于其它浮動元素：
同一個方向的浮動元素，像行內元素的樣式一樣水平排列，空間不夠時會自動轉到下一行，但如果高度設置存在問題，那么多個浮動元素水平排列會存在“卡住”的情況；
反方向的浮動元素，互不影響，位于同一條水平線上，當空間不夠時會被擠下。 - 對于普通元素：若為塊級元素，該元素會忽視浮動元素的而占據它的位置，且元素會處在浮動元素的下層（無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
- 對于文字：環繞浮動元素排列。
清除浮動指什么? 如何清除浮動? 兩種以上方法
- What
解決父容器高度塌陷問題（CSS背景不能顯示、邊框不能隨內容而被撐開）；解決margin padding設置值不能正確顯示問題（特別是margin-top、margin-bottom、padding-top、padding-bottom） - How
-
clear
在浮動元素末尾加新的空標簽，給其設置屬性clear：both
html:
<div class="ct">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="empty"></div>
</div>
css:
.ct {
border: 3px solid #000;
width: 300px;
}
.box {
width: 100px;
height: 100px;
float: left;
}
#box1 {
background: red;
}
#box2 {
background: green;
}
#box3 {
background: blue;
}
.empty {
clear: both;
}
clear示例
-
BFC(塊級格式化上下文)
后面詳細說~ -
：after
作用于浮動元素的父容器，加class="clearfix"，目前通用的清理浮動的方法
方法1：
.clearfix {
*zoom: 1;/*頁面縮放為1，可觸發IE6 7 的layout特性，實現類似BFC的作用*/
}
.clearfix:after {
content: " ";
display: block;
clear: left;
}
方法2：
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: " ";
display: table;
clear: both;
}
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
| 屬性值 | 描述 |
|---|---|
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| relative | 生成相對定位的元素，相對于其正常位置進行定位。 |
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
- static：文檔默認的定位方式，即在文檔的普通流中。
html:
<div class="ct">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="empty"></div>
</div>
css:
.ct {
border: 3px solid #000;
width: 200px;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background: red;
}
#box2 {
background: green;
}
#box3 {
background: blue;
}
.empty {
clear: both;
}
普通流
- relative：相對定位，以其自身作為定位的基準，做一定量的偏移，但是會保留偏移前所占用的文檔流。參考點：元素本身
css:
.ct {
border: 3px solid #000;
width: 200px;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background: red;
}
#box2 {
background: green;
position: relative;
top: 20px;
left: 20px;
}
#box3 {
background: blue;
}
.empty {
clear: both;
}
相對定位
- absolute：絕對定位，這種定位方式會使被定位的元素脫離文檔流。參考點：相對于距離最近的非static祖先元素位置決定，若沒有則相對于包含塊html來定位。
css:
.ct {
border: 3px solid #000;
width: 200px;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background: red;
}
#box2 {
background: green;
position: absolute;
top: 20px;
left: 20px;
}
#box3 {
background: blue;
}
.empty {
clear: both;
}
絕對定位
- fixed：固定定位，這種定位方式也讓元素脫離文檔流。參考點：瀏覽器窗口
css:
.ct {
border: 3px solid #000;
width: 200px;
margin: 100px;/*區別position：absolute*/
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background: red;
}
#box2 {
background: green;
position: fixed;/*位置不隨滾動條的改變而變*/
top: 20px;
left: 20px;
}
#box3 {
background: blue;
}
.empty {
clear: both;
}
固定定位
z-index 有什么作用? 如何使用?
- 作用
z-index屬性的作用是設置元素的堆疊順序。它決定了一個HTML元素的層疊級別。z-index值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下。 - 使用
z-index僅在設置了position非static屬性的元素生效，且z-index的值只能在兄弟元素之間比較。z-index默認值為auto,則不建立層疊上下文。設置為0則會建立層疊上下文。
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
- position:relative：可以使元素位置發生偏移，在文檔流中仍然占據著原來的位置，所以其他元素的位置不會發生變化
- margin：可以使元素位置發生偏移，放棄偏移前占據的空間，連同后面的元素一起偏移，所以其他元素的位置發生了變化
<div class="ct ct1">
<div class="box" id="box1">position:relative</div>
<div class="box" id="box2">position:relative</div>
<div class="box" id="box3">position:relative</div>
<div class="empty"></div>
</div>
<div class="ct ct2">
<div class="box" id="box4">margin</div>
<div class="box" id="box5">margin</div>
<div class="box" id="box6">margin</div>
<div class="empty"></div>
</div>
.ct {
border: 3px solid #000;
width: 200px;
float: left;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background: red;
}
#box2 {
background: green;
position: relative;
top: 20px;
left: 20px;
}
#box3 {
background: blue;
}
#box4 {
background: red;
}
#box5 {
background: green;
margin-top: 20px;
}
#box6 {
background: blue;
}
relative和margin對比
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
- What
Block formatting context，塊級格式化上下文。是一種布局方式，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。 - How
- 設置
position: absolute或fixed(局限性：會改變元素的定位方式) - 設置
float: left或right(局限性：雖然解決了父容器塌陷問題，但爺爺容器就該塌了=.=) - 設置
display: inline-block或table-cell或table-caption(局限性：瀏覽器兼容問題，低版本IE不支持inline-block) - 設置
overflow: auto或hidden或scroll(局限性：影響絕對定位的元素和滾動條)
- Why
- 阻止外邊距折疊 （下一個問題詳細說）
- 不會被浮動元素重疊：div浮動兄弟遮蓋問題：由于左側塊級元素發生了浮動，所以和右側未發生浮動的塊級元素不在同一層內，所以會發生div遮擋問題。（2欄布局）
HTML
<body>
<div class="ct">
<div class="aside">
<h4>舉例：浮動元素覆蓋</h4>
<p>我是左邊欄的內容</p>
</div>
<div class="content">
<h4>舉例：浮動元素覆蓋</h4>
<p>我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容我是右邊欄的內容</p>
</div>
</div>
</body>
CSS
.ct {
border: 1px solid;
}
.aside {
width: 160px;
height: 100px;
border: 1px solid;
background: red;
float:left;
}
.content {
margin-left: 180px;//文字不會圍繞浮動元素
}
未加BFC.png
加BFC
- 包含浮動元素：解決高度塌陷問題
HTML
<body>
<div class="ct">
<div class="box1">
舉例：包含浮動元素
</div>
<div class="box2">
舉例：包含浮動元素
</div>
</div>
</body>
CSS
.ct {
background: red;
float: left; //包含浮動元素
}
.box1,.box2 {
width: 150px;
height: 150px;
border: 1px solid;
float: left;
}
未給父元素加BFC.png
給父元素加BFC.png
在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- What
同屬一個BFC中的元素（包括相鄰元素和嵌套元素），若它們之間沒有阻擋（例如邊框、非空內容、padding等）會發生垂直margin重疊（文檔流中塊級標簽之間豎直方向的margin會以大的為準）。 - How
讓發生margin重疊的元素不在同一個BFC內即可清除浮動，嵌套元素適用，將父元素設置為BFC，則子元素的margin不與父元素的重疊。
合并規則：
- 兩個margin都是正值的時候，取兩者的最大值；
- 當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
- 當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗鄰的margin要一起參與運算，不能分步進行。
- Example
HTML
<body>
<div class="box">
<div class="content">
舉例：垂直外邊距折疊
</div>
</div>
</body>
CSS
.box {
width: 150px;
height: 140px;
border: 1pxsolid;
background: red;
overflow: hidden;//清除浮動
}
.content {
background: yellow;
margin: 40px;
}```
[alert效果](http://js.jirengu.com/gejuvuduju/1/edit?html,css,output)
[表單效果](http://js.jirengu.com/daritenola/1/edit?html,css,output)
[模態框效果](http://js.jirengu.com/fonukevazu/1/edit?html,css,output)
[導航欄效果](http://js.jirengu.com/gidutopexe/1/edit?html,css,output)
- **收獲**：
1. 組合選擇器： .box input[type=text]
2. 刪除表單文本輸入框的邊框和輪廓
.box input[type=text],
.box textarea {
border: none;
display: block;
border-bottom: 1px solid #808080;
}
.box input[type=text]:focus,
.box textarea:focus {
outline: none;
}
######參考資料
[淺析BFC及其作用](http://blog.csdn.net/riddle1981/article/details/52126522)
[BFC神奇背后的原理](http://blog.sina.com.cn/s/blog_a034e55f0102ww4q.html)
[CSS中zoom:1的作用 ，小標簽大作用](http://blog.sina.com.cn/s/blog_a034e55f0102wvib.html)