少妇高潮呻吟A片免费看软件,西西人体做爰免费视无码,亚洲国产欧美在线观看

浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

特征：

浮動(dòng)元素會(huì)脫離正常的文檔流，元素將不在頁(yè)面占用空間，按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素（或父元素）顯示；
浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊，但文檔普通流中的塊框感知不到浮動(dòng)框的存在；
浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊。

影響：

對(duì)于父容器：元素浮動(dòng)之后，它脫離當(dāng)前正常的文檔流，因而無法撐開其父元素，造成父元素的塌陷。
對(duì)于其它浮動(dòng)元素：
同一個(gè)方向的浮動(dòng)元素，像行內(nèi)元素的樣式一樣水平排列，空間不夠時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，但如果高度設(shè)置存在問題，那么多個(gè)浮動(dòng)元素水平排列會(huì)存在“卡住”的情況；
反方向的浮動(dòng)元素，互不影響，位于同一條水平線上，當(dāng)空間不夠時(shí)會(huì)被擠下。
對(duì)于普通元素：若為塊級(jí)元素，該元素會(huì)忽視浮動(dòng)元素的而占據(jù)它的位置，且元素會(huì)處在浮動(dòng)元素的下層（無法通過z-index屬性改變他們的層疊位置），但它的內(nèi)部文字和其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素。
對(duì)于文字：環(huán)繞浮動(dòng)元素排列。

清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

What
解決父容器高度塌陷問題（CSS背景不能顯示、邊框不能隨內(nèi)容而被撐開）；解決margin padding設(shè)置值不能正確顯示問題（特別是margin-top、margin-bottom、padding-top、padding-bottom）
How

clear
在浮動(dòng)元素末尾加新的空標(biāo)簽，給其設(shè)置屬性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(塊級(jí)格式化上下文)
后面詳細(xì)說~
：after
作用于浮動(dòng)元素的父容器，加class="clearfix"，目前通用的清理浮動(dòng)的方法

方法1：
.clearfix {
        *zoom: 1;/*頁(yè)面縮放為1，可觸發(fā)IE6 7 的layout特性，實(shí)現(xiàn)類似BFC的作用*/
}
.clearfix:after {
        content: " ";
        display: block;
        clear: left;
}

方法2：
.clearfix {
       *zoom: 1;
}
.clearfix:after {
       content: " ";
       display: table;
       clear: both;
}

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

屬性值	描述
static	默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative	生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
absolute	生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
fixed	生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

static：文檔默認(rèn)的定位方式，即在文檔的普通流中。

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：相對(duì)定位，以其自身作為定位的基準(zhǔn)，做一定量的偏移，但是會(huì)保留偏移前所占用的文檔流。參考點(diǎn)：元素本身

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;
}

相對(duì)定位

absolute：絕對(duì)定位，這種定位方式會(huì)使被定位的元素脫離文檔流。參考點(diǎn)：相對(duì)于距離最近的非static祖先元素位置決定，若沒有則相對(duì)于包含塊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;
}

絕對(duì)定位

fixed：固定定位，這種定位方式也讓元素脫離文檔流。參考點(diǎn)：瀏覽器窗口

css:
.ct {
    border: 3px solid #000;
    width: 200px;
   margin: 100px;/*區(qū)別position：absolute*/
}
.box {
  width: 100px;
  height: 100px;
}
#box1 {
  background: red;
}
#box2 {
  background: green;
  position: fixed;/*位置不隨滾動(dòng)條的改變而變*/
  top: 20px; 
  left: 20px;
}
#box3 {
  background: blue;
}
.empty {
  clear: both;
}

固定定位

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

作用
z-index屬性的作用是設(shè)置元素的堆疊順序。它決定了一個(gè)HTML元素的層疊級(jí)別。z-index值較大的元素將疊加在z-index值較小的元素之上。對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上，而 z-index 值為負(fù)數(shù)的對(duì)象在其之下。
使用
z-index僅在設(shè)置了position非static屬性的元素生效，且z-index的值只能在兄弟元素之間比較。z-index默認(rèn)值為auto,則不建立層疊上下文。設(shè)置為0則會(huì)建立層疊上下文。

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

position:relative：可以使元素位置發(fā)生偏移，在文檔流中仍然占據(jù)著原來的位置，所以其他元素的位置不會(huì)發(fā)生變化
margin：可以使元素位置發(fā)生偏移，放棄偏移前占據(jù)的空間，連同后面的元素一起偏移，所以其他元素的位置發(fā)生了變化

<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對(duì)比

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

What
Block formatting context，塊級(jí)格式化上下文。是一種布局方式，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。
How

設(shè)置position: absolute或fixed(局限性：會(huì)改變?cè)氐亩ㄎ环绞?
設(shè)置float: left或right (局限性：雖然解決了父容器塌陷問題，但爺爺容器就該塌了=.=)
設(shè)置display: inline-block或table-cell或table-caption(局限性：瀏覽器兼容問題，低版本IE不支持inline-block)
設(shè)置 overflow: auto或hidden或scroll(局限性：影響絕對(duì)定位的元素和滾動(dòng)條)

阻止外邊距折疊（下一個(gè)問題詳細(xì)說）
不會(huì)被浮動(dòng)元素重疊：div浮動(dòng)兄弟遮蓋問題：由于左側(cè)塊級(jí)元素發(fā)生了浮動(dòng)，所以和右側(cè)未發(fā)生浮動(dòng)的塊級(jí)元素不在同一層內(nèi)，所以會(huì)發(fā)生div遮擋問題。（2欄布局）

HTML
<body>
 <div class="ct">
  <div class="aside">
     <h4>舉例：浮動(dòng)元素覆蓋</h4>
     <p>我是左邊欄的內(nèi)容</p>
  </div>
  <div class="content">
    <h4>舉例：浮動(dòng)元素覆蓋</h4>
    <p>我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容我是右邊欄的內(nèi)容</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;//文字不會(huì)圍繞浮動(dòng)元素
}

未加BFC.png

加BFC

包含浮動(dòng)元素：解決高度塌陷問題

HTML
<body>
 <div class="ct">
   <div class="box1">
     舉例：包含浮動(dòng)元素
   </div>
   <div class="box2">
     舉例：包含浮動(dòng)元素
   </div>
 </div>
</body>

CSS
.ct {
  background: red;
  float: left; //包含浮動(dòng)元素
}
.box1,.box2 {
  width: 150px;
  height: 150px;
  border: 1px solid;
  float: left;
}

未給父元素加BFC.png

給父元素加BFC.png

在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

What
同屬一個(gè)BFC中的元素（包括相鄰元素和嵌套元素），若它們之間沒有阻擋（例如邊框、非空內(nèi)容、padding等）會(huì)發(fā)生垂直margin重疊（文檔流中塊級(jí)標(biāo)簽之間豎直方向的margin會(huì)以大的為準(zhǔn)）。
How
讓發(fā)生margin重疊的元素不在同一個(gè)BFC內(nèi)即可清除浮動(dòng)，嵌套元素適用，將父元素設(shè)置為BFC，則子元素的margin不與父元素的重疊。
合并規(guī)則：

兩個(gè)margin都是正值的時(shí)候，取兩者的最大值；
當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從0位置，負(fù)向位移；
當(dāng)有正有負(fù)的時(shí)候，先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正 margin 值中最大的 margin 相加。
所有毗鄰的margin要一起參與運(yùn)算，不能分步進(jìn)行。

Example

HTML
<body>
 <div class="box">
   <div class="content">
     舉例：垂直外邊距折疊
   </div>
 </div>
</body>

CSS
.box {
  width: 150px;
  height: 140px;
  border: 1pxsolid;
  background: red;
  overflow: hidden;//清除浮動(dòng)
}
.content {
  background: yellow;
  margin: 40px;
}```
![未加overflow，margin無效](http://upload-images.jianshu.io/upload_images/6426975-19e9cbbc2a82b22a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![加overflow.png](http://upload-images.jianshu.io/upload_images/6426975-a3da06c606e29328.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


[alert效果](http://js.jirengu.com/gejuvuduju/1/edit?html,css,output)
[表單效果](http://js.jirengu.com/daritenola/1/edit?html,css,output)
[模態(tài)框效果](http://js.jirengu.com/fonukevazu/1/edit?html,css,output)
[導(dǎo)航欄效果](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的作用 ，小標(biāo)簽大作用](http://blog.sina.com.cn/s/blog_a034e55f0102wvib.html)

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

任務(wù)10 CSS浮動(dòng)定位

任務(wù)10 CSS浮動(dòng)定位

浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

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

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

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

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

任務(wù)10 CSS浮動(dòng)定位

浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？

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

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

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

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

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例