這篇文章主要介紹“CSS標(biāo)準(zhǔn)盒模型與浮動(dòng)如何使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS標(biāo)準(zhǔn)盒模型與浮動(dòng)如何使用”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)主營隆安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),隆安h5成都微信小程序搭建,隆安網(wǎng)站營銷推廣歡迎隆安等地區(qū)企業(yè)咨詢

盒子模型

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

1. 盒子模型（Box Model）

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

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

2. 盒子邊框（border）

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

屬性	作用
border-width	定義邊框粗細(xì)，單位px
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)容之間的間距

屬性	作用
padding-left	左內(nèi)邊距
padding-right	右內(nèi)邊距
padding-top	上內(nèi)邊距
padding-bottom	下內(nèi)邊距

也可以簡(jiǎn)寫

值個(gè)數(shù)	含義
1	padding：上下左右內(nèi)邊距
2	padding：上下 左右
3	padding：上 左右 下
4	padding：上 右 下 左（順時(shí)針）

內(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）

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

屬性	作用
margin-left	左外邊距
margin-right	右外邊距
margin-top	上外邊距
margin-bottom	下外邊距

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

塊級(jí)盒子水平居中

盒子必須指定寬度，然后左右外邊距設(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)塊居中對(duì)齊

• 塊級(jí)盒子水平居中 左右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值。

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

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

解決方案：

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

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

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

區(qū)分出父子元素

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

width>padding>margin

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

5.盒子陰影

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

值	描述
h-shadow	必需，水平陰影，負(fù)值在左邊
v-shadow	必需，垂直陰影，負(fù)值在下
blur	可選，模糊距離
spread	可選，陰影尺寸
color	可選，陰影顏色
inset	可選，內(nèi)陰影

注意

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

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

浮動(dòng)

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

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

1. 普通

• 塊級(jí)元素獨(dú)占一行，由上到下排列

• 行內(nèi)元素從左到右依次排列，父元素?fù)Q行

2. 浮動(dòng)

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

3. 定位

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

2. 浮動(dòng)使用

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

選擇器 {float: 值;}

屬性值	描述
none	不浮動(dòng)（默認(rèn)）
left	元素向左浮動(dòng)
right	元素向右浮動(dòng)

注意

浮動(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)元素相互緊靠，父級(jí)寬度裝不下時(shí)，多出盒子調(diào)至下一行

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

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

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

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

子盒子會(huì)與父盒子對(duì)齊，但不會(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)后，父元素很難直接給出高度，最后父級(jí)盒子高度為0，對(duì)于以后的標(biāo)準(zhǔn)流盒子會(huì)有影響，對(duì)于標(biāo)準(zhǔn)流，子盒子會(huì)撐開盒子，而浮動(dòng)不會(huì)。

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

選擇器 {clear: 屬性值;}

屬性值	描述
left	不允許左側(cè)有浮動(dòng)元素（消除左側(cè)浮動(dòng)影響）
right	不允許右側(cè)有浮動(dòng)元素（消除右側(cè)浮動(dòng)影響）
both	同時(shí)清除左右浮動(dòng)元素

額外標(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)化較差。

父級(jí)添加overflow屬性

overflow : hidden|auto|scroll

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

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

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

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

關(guān)于“CSS標(biāo)準(zhǔn)盒模型與浮動(dòng)如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

網(wǎng)頁名稱：CSS標(biāo)準(zhǔn)盒模型與浮動(dòng)如何使用
本文網(wǎng)址：http://chinadenli.net/article48/gpdpep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、定制網(wǎng)站、云服務(wù)器、用戶體驗(yàn)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)