首頁 > 文章 > web前端 > HTML與CSS的盒子模型

HTML與CSS的盒子模型

php中世界最好的语言原創: 2018-03-13 10:44:162572瀏覽

這次帶給大家HTML與CSS的盒子模型，使用HTML與CSS的盒子模型的注意事項有哪些，下面就是實戰案例，一起來看一下。

一.邊框(上)

1.什麼邊框?

邊框就是環繞在標籤寬度和高度周圍的線條

2.邊框屬性的格式

2.1連寫(同時設定四條邊的邊框)
border: 邊框的寬度邊框的樣式邊框的顏色;

快捷鍵:

bd+ border: 1px solid #000;

注意點:

1.連寫格式中顏色屬性可以省略, 省略之後預設就是黑色
2.連寫格式中樣式不能省略, 省略之後就看不到邊框了
3.連寫格式中寬度可以省略, 省略之後還是可以看到邊框

#2.2連寫(分別設定四條邊的邊框)

border-top: 邊框的寬度邊框的樣式邊框的顏色;
border-right: 邊框的寬度邊框的樣式邊框的顏色;
border-bottom: 邊框的寬度邊框的樣式邊框的顏色;
border-left: 邊框的寬度邊框的樣式邊框的顏色;

快捷鍵:

bt+ border-top: 1px solid #000;
br+
bb+
bl+

二.邊框(下)

2.3連寫(分別設定四條邊的邊框) 依照三要素設定邊框

# border-width: 上右下左;
border-style: 上右下左;
border-color: 上右下左;

注意點:

#1.這三個屬性的取值是按照順時針來賦值, 也就是按照上右下左來賦值, 而不是按照日常生活中的上下左右

2.這三個屬性的取值省略時的規律

2.1上右下左> 上右下> 左邊的取值和右邊的一樣

2.2上右下左> 上右> 左邊的取值和右邊的一樣下邊的取值和上邊一樣

2.3上右下左> 上> 右下左邊取值和上邊一樣

3.非連寫(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;

##三. 內邊距

#1.什麼是內邊距?

邊框與內容之間的距離就是內邊距

2.格式

2.1非連寫

padding-top: ;

padding-right: ;
padding-bottom: ;padding-left: ;

2.2連寫

padding: 上右下左;

3.屬性的取值省略時的規律

3.1上右下左> 上右下> 左邊的取值和右邊的一樣

3.2上右下左> 上右> 左邊的取值和右邊的一樣下邊的取值和上邊一樣
3.3上右下左> 上> 右下左邊取值和上邊一樣

注意點:

1.給標籤設定內邊距之後, 標籤佔有的寬度和高度會改變

2.給標籤設定內邊距之後, 內邊距也會有背景顏色

四. 外邊距

1.什麼是外邊距?

標籤和標籤之間的距離就是外邊距

2.格式

2.1非連寫

margin-top: ;
margin-right: ;

margin-bottom: ;margin-left: ;

2.2連寫

margin: 上右下左;

3.這三個屬性的取值省略時的規律

3.1上右下左> 上右下> 左邊的取值和右邊的一樣

3.2上右下左> 上右> 左邊的取值和右邊的一樣下邊的取值和上邊一樣
3.3上右下左> 上> 右下左邊取值和上邊一樣

注意點:

外邊距的那一部分是沒有背景顏色的

五.外邊距合併現象

1.在預設佈局的垂直方向上, 預設情況下外邊距是不會疊加的, 會出現合併現象, 誰的外邊距比較大就聽誰的;

2.在水平方向上不會發生合併現象;

HTML與CSS的盒子模型

外邊距合併現象(塌陷)

六. CSS盒子模型

1.什麼是CSS盒子模型?

CSS盒子模型只是一個形象的比喻, HTML中所有的標籤都是盒子

結論

1.在HTML中所有的標籤都可以設定

寬度/高度 == 指定可以存放內容的區域
內邊距 = = 填充物
邊框 == 手機盒子自己
外邊距 == 盒子與盒子之間的間隙

七.盒子模型的寬度與高度

#1.內容的寬度和高度

就是透過width/height屬性設定的寬度和高度

2.元素的寬度和高度

#寬度= 左邊框+左內邊距+ width + 右內邊距+ 右邊框

高度同理可證

#3.元素空間的寬度與高度

寬度= 左外邊距+ 左邊框+ 左內邊距+ width + 右內邊距+ 右邊框+ 右外邊距
高度同理可證

## 八.盒子box-sizing屬性

1.CSS3中新增了一個box-sizing屬性, 這個屬性可以保證我們為盒子新增padding和border之後, 盒子元素的寬度和高度不變

2.box-sizing屬性是如何保證增加padding和border之後, 盒子元素的寬度和高度不變和我們前面學習的原理一樣, 增加padding和border之後要想保證盒子元素的寬高不變, 那麼就必須減去一部分內容的寬度與高度

3.box-sizing取值

3.1content-box (預設值)

元素的寬高= 邊框+內邊距+ 內容寬高

3.2border-box (元素的寬高不會改變)

元素的寬高= width/height的寬高

##九. 盒子居中

注意點(1)

1.如果兩個盒子是嵌套關係, 那麼設定了裡面一個盒子頂部的外邊距, 外面一個盒子也會被頂下來

2.如果外面的盒子不想被一起定下來,那麼可以給外面的盒子添加一個邊框屬性或設定overflow: hidden;屬性

3.在企業開發中, 一般情況下如果需要控制嵌套關係盒子之間的距離, 應該首先考慮padding, 其次再考慮margin
margin本質上是用於控制兄弟關係之間的間隙的

注意點(2)

1.在嵌套關係的盒子中, 我們可以利用margin: 0 auto;的方式來讓裡面的盒子在外面的盒子中水平居中

2.margin: 0 auto; 只對水平方向有效, 對垂直方向無效;垂直方向上只能透過像素計算居中;

C. text-align: center;和margin:0 auto;區別

text-align: center;作用

設定盒子中儲存的文字/圖片水平居中

margin:0 auto;作用

讓盒子本身水平居中

十一. 清空預設邊距

1.為什麼要清空預設邊距(外邊距和內邊距)

在企業開發中為了更好的控制盒子的位置和計算盒子的寬高等等, 所以在企業開發中, 編寫代碼之前第一件事情就是清空默認的邊距

2.如何清空預設的邊距

格式

*{margin: 0;padding: 0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{            margin:0;padding:0}

3.注意點

通配符選擇器

會找導(遍歷)當前介面中所有的標籤, 所以效能不好相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！