欧美午夜诱惑在线_一区二区三级片_国产成人综合v在线_国产91精品无码免费_高清综合亚洲三级_黄色软件下载观看_上萬網友分享国产精品高潮呻吟久久av心得_美女扒开尿眼无遮挡免费视频_好紧好湿好黄的视频免费_亚洲日韩欧美中字五月天

盒子模型

網(wǎng)頁布局的本質(zhì)在于通過css布局將盒子模型擺放至合適的位置，再放入所需元素

1. 盒子模型（Box Model）

盒子模型有元素內(nèi)容，內(nèi)邊距，外邊距，邊框組成

標(biāo)準(zhǔn)盒子模型

2. 盒子邊框（border）

border : border-width || border-style || border-color

邊框樣式

• none：無邊框
• solid：實(shí)線邊框
• dashed：虛線邊框
• dotted：點(diǎn)線邊框

單獨(dú)設(shè)置一邊邊框的樣式

 border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色;

bottom,left,right以此類推

表格邊框

通過cellspacing=0單元格距離為0，但是兩個(gè)單元格之間的邊框重疊會(huì)是邊框變粗，通過css屬性

table{border-collapse:collapse}

使得邊框合并，不變粗

圓角邊框

border-radius:length;/*length 可以數(shù)字也可以百分比*/

正方形盒子變?yōu)閳A形，矩形多用高度一半

3. 內(nèi)邊距（padding）

邊框與內(nèi)容之間的間距

也可以簡寫

內(nèi)盒尺寸計(jì)算

• 寬度

  Element Height = content height + padding + border （Height為內(nèi)容高度）

• 高度

  Element Width = content width + padding + border （Width為內(nèi)容寬度）

• 盒子的實(shí)際的大小 = 內(nèi)容的寬度和高度 + 內(nèi)邊距 + 邊框

當(dāng)未直接給出width時(shí)，padding不會(huì)撐開盒子，否則會(huì)

4. 外邊距（margin）

外邊距是控制盒子與盒子之間的距離

• 同樣類似于padding有類似的寫法

塊級盒子水平居中

盒子必須指定寬度，然后左右外邊距設(shè)置為auto

.nav{width:960px;margin:0 auto;}

常見的寫法，以下下三種都可以。

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

文字居中與盒子居中的區(qū)別

• 盒子內(nèi)的文字水平居中是 text-align: center, 而且還可以讓 行內(nèi)元素和行內(nèi)塊居中對齊

• 塊級盒子水平居中 左右margin 改為 auto

插入圖片與背景圖片區(qū)別

• 插入圖片移動(dòng)位置只能靠 padding與margin

• 背景圖則使用background-position

清楚元素內(nèi)外邊距

* {
	padding:0;
	margin:0;
}

外邊距合并

• 當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom

• 下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和

• 取兩個(gè)值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
  

解決方案：盡量給只給一個(gè)盒子添加margin值。

嵌套塊元素垂直外邊距的合并

對于父子塊元素，父元素會(huì)與子元素合并，父元素沒有上padding和邊框，合并時(shí)外邊距取較大值

解決方案：

• 可以為父元素定義上邊框。

• 可以為父元素定義上內(nèi)邊距

• 可以為父元素添加overflow:hidden。

區(qū)分出父子元素

盒子布局穩(wěn)定性

width>padding>margin

穩(wěn)定性依次減小，padding會(huì)撐開盒子，margin在合并時(shí)也會(huì)有問題

5.盒子陰影

box-shadow:水平陰影 垂直陰影 模糊距離（虛實(shí)）  陰影尺寸（影子大?。? 陰影顏色  內(nèi)/外陰影；/*單位px*/

注意

水平垂直陰影必須，其余可以省略，外陰影（outset）默認(rèn)不寫

p {
	box-shadow:0 15px 20px rgba(0,0,0,.5)
}

浮動(dòng)

1. 浮動(dòng)是什么

css布局的三種機(jī)制

1. 普通

• 塊級元素獨(dú)占一行，由上到下排列
• 行內(nèi)元素從左到右依次排列，父元素?fù)Q行

2. 浮動(dòng)

使得盒子浮動(dòng)起來。讓多個(gè)塊級盒子一行展示

3. 定位

將盒子定位于瀏覽器中的某一位置

2. 浮動(dòng)使用

通過浮動(dòng)可以使得多個(gè)p水平排列一行，且之間沒有空白縫隙，實(shí)現(xiàn)左右對齊，最早使用于圖片，實(shí)現(xiàn)文字環(huán)繞效果

選擇器 {float: 值;}

注意

浮動(dòng)托標(biāo)使用浮動(dòng)后，元素會(huì)脫離標(biāo)準(zhǔn)流，后續(xù)的標(biāo)準(zhǔn)流會(huì)移動(dòng)至浮動(dòng)盒子底下，浮動(dòng)元素會(huì)“漂浮”

浮動(dòng)會(huì)改變 元素display屬性，任何元素都可以浮動(dòng)，浮動(dòng)元素相互緊靠，父級寬度裝不下時(shí)，多出盒子調(diào)至下一行

浮動(dòng)與標(biāo)準(zhǔn)流搭配

給浮動(dòng)元素添加一個(gè)標(biāo)準(zhǔn)流父親，在子元素使用浮動(dòng)，從而較少對其他標(biāo)準(zhǔn)流的影響

3. 浮動(dòng)與其他盒子關(guān)系

• 浮動(dòng)元素與父盒子關(guān)系

子盒子會(huì)與父盒子對齊，但不會(huì)與邊框重疊，也不會(huì)超過父盒子的內(nèi)邊距

• 浮動(dòng)元素與兄弟盒子關(guān)系

浮動(dòng)元素只會(huì)影響當(dāng)前以及后面的標(biāo)準(zhǔn)流盒子

如果一個(gè)盒子里面有多個(gè)子盒子，如果其中一個(gè)盒子浮動(dòng)了，其他兄弟也應(yīng)該浮動(dòng)。防止引起問題

4.清除浮動(dòng)

很多子元素浮動(dòng)后，父元素很難直接給出高度，最后父級盒子高度為0，對于以后的標(biāo)準(zhǔn)流盒子會(huì)有影響，對于標(biāo)準(zhǔn)流，子盒子會(huì)撐開盒子，而浮動(dòng)不會(huì)。

清除就是為了消除浮動(dòng)布局對于后續(xù)排版影響，主要是解決父元素高度為0的問題

選擇器 {clear: 屬性值;}

額外標(biāo)簽法

是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <p style=”clear:both”></p>，或則其他標(biāo)簽br等亦可。

• 優(yōu)點(diǎn)： 通俗易懂，書寫方便

• 缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。

父級添加overflow屬性

overflow : hidden|auto|scroll

缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。

使用after為元素清除浮動(dòng)

:after方式是額外標(biāo)簽升級方式

.clearfix:after{ 
	content:""; display:block;height: 0;clear:both; visibility: hidden;
}

.clearfix {*zoom: 1;}

• 優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語義化正確
• 缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

雙偽元素

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}