今天學(xué)習(xí)一下html中盒子模型的部分。

首先了解盒子模型之前，我們需要了解一下什么是 normal flow（文檔流）。

?網(wǎng)頁(yè)是一個(gè)多層的結(jié)構(gòu),設(shè)置樣式，也是一層一層的設(shè)置，最終我們看到的最上面的一層

?文檔流是網(wǎng)頁(yè)最底層。我們創(chuàng)建的元素默認(rèn)情況下，都在文檔流中。元素分為兩種狀態(tài)：在文檔流中，脫離文檔流。

元素在文檔流中的特點(diǎn)：

? ? ? ? 塊元素類

? ? ? ? ? ?1:會(huì)獨(dú)占一行

? ? ? ? ? ?2:塊元素的寬度默認(rèn)是父元素的100%

? ? ? ? ? ?3:塊元素的高度默認(rèn)是被內(nèi)容撐開的

? ? ? ? 內(nèi)聯(lián)元素（行內(nèi)元素）

? ? ? ? ? ?1:不會(huì)獨(dú)占一行

? ? ? ? ? ?2:寬度高度默認(rèn)都是被內(nèi)容撐開的，不能自己定義寬高

? ? ? ? 行內(nèi)塊元素

?元素脫離文檔流后的特點(diǎn)

? ? ? ? ?元素脫離文檔流之后，就不再區(qū)分塊元素，行內(nèi)元素，行內(nèi)塊元素，?也就是塊元素不會(huì)獨(dú)占一行，行內(nèi)也可以設(shè)置寬高，三像素問題也沒有。

? ? 脫離文檔流的途徑有：?浮動(dòng) ?絕對(duì)定位 ?flex 等。

? ? 把元素布局到頁(yè)面，就像買個(gè)家具，想要把它擺放到合適的位置，你需要了解它的大小和尺寸，以及如何組合它們，對(duì)此我們把這些元素都想想成盒子（一盒矩形）。

影響盒子大小的因素有：內(nèi)容區(qū)（盒子里的內(nèi)容），邊框（border），內(nèi)邊框（padding），外邊距（margin）則不影響盒子大小。

1.內(nèi)容區(qū)(content) ?元素中所有的子元素和文本內(nèi)容都在內(nèi)容區(qū)中排列。

? ? ? ? width ? 設(shè)置內(nèi)容區(qū)的寬度

? ? ? ? height ?設(shè)置內(nèi)容區(qū)的高度

?2.邊框（border）元素設(shè)置邊框

? ? ? 邊框?qū)儆诤凶舆吘?#xff0c;邊框里面屬于盒子內(nèi)部，出了邊框都是盒子的外部。

? ? ? 設(shè)置邊框必須指定三個(gè)樣式 分別是顏色，大小，樣式。

? ? ? ? ?border-color: ; ?設(shè)置邊框的顏色。

? ? ? ? ? ? （1）、有默認(rèn)值，默認(rèn)顏色是黑色。

? ? ? ? ? ? （2）、可以寫多個(gè)顏色 ?以空格隔開。

? ? ? ? ? ? ? ? ? ?4個(gè) ? 上 ?右 ?下 ? 左

? ? ? ? ? ? ? ? ? ?3個(gè) ? 上 ? 左右 ? 下

? ? ? ? ? ? ? ? ? ?2個(gè) ? 上下 ?左右

? ? ? ? ? ? ? ? ? ?1個(gè) ? 上下左右

? ? ? ? ? ? ?(3)、border-xxx-color ?特指top ?right ?bottom left某一邊顏色

? ? ? ? ?border-width: ; ?設(shè)置邊框的大小

? ? ? ? ? ? （1）、默認(rèn)值 ? 默認(rèn)值大概1-3px

? ? ? ? ? ? （2）、也可以跟多個(gè)值 ?以空格隔開

? ? ? ? ? ? ? ? ? 4個(gè) ? 上 ?右 ?下 ? 左

? ? ? ? ? ? ? ? ? 3個(gè) ? 上 ? 左右 ? 下

? ? ? ? ? ? ? ? ? 2個(gè) ? 上下 ?左右

? ? ? ? ? ? ? ? ? 1個(gè) ? 上下左右

? ? ? ? ? ? （3）、border-xxx-width 特指top ?right ?bottom left某一邊寬度

? ? ? ? ?border-style: ; ?設(shè)置邊框的樣式

? ? ? ? ? ? ? (1)、默認(rèn)值 ?none

? ? ? ? ? ? （2）、solid ?實(shí)線

? ? ? ? ? ? ? ? ? ? ? ? dashed ?虛線

? ? ? ? ? ? ? ? ? ? ? ? dotted ?點(diǎn)狀虛線

? ? ? ? ? ? ? ? ? ? ? ? double ?雙線

border簡(jiǎn)寫有以下幾種形式：

? ? ? ? ?border:顏色，大小，樣式;

? ? ? ? ?border-top:顏色，大小，樣式;

? ? ? ? ?border-right:顏色，大小，樣式;

? ? ? ? ?border-bottom:顏色，大小，樣式;

? ? ? ? ?border-left:顏色，大小，樣式;

3.內(nèi)邊距（padding）指的是內(nèi)容區(qū)和邊框之間的距離。

? ? ? ? padding-top ?上內(nèi)邊距；

? ? ? ? padding-right ?右內(nèi)邊距；

? ? ? ? padding-bottom 下內(nèi)邊距；

? ? ? ? padding-left ? 左內(nèi)邊距；

4.margin ?外邊距 ? 指的是當(dāng)前盒子和其他盒子之間的距離。

? ? ? ? ? margin-top ? ?上外邊距 ? ?盒子正值向下移動(dòng)，負(fù)值向上移動(dòng)；

? ? ? ? ? margin-right ?右外邊距 ? ?默認(rèn)情況，設(shè)置margin-right是沒有效果；

? ? ? ? ? margin-bottom ?下外邊距 ? 盒子自己不動(dòng)，擠下面的盒子移動(dòng)，正值向下，負(fù)值向上；

? ? ? ? ? margin-left ? ?左外邊距 ? 盒子正值向右移動(dòng)，負(fù)值向左移動(dòng)；

? ? ? ? 注：大小可正可負(fù)！

? ?margin:?后也可跟多個(gè)值，4個(gè)，3個(gè)，2個(gè)，1個(gè)皆可，規(guī)則跟padding一樣。

總結(jié)

以上是生活随笔為你收集整理的html-盒子模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。