CSS 盒子模型詳解

子模型:

由content(內容)、border(邊框)、padding(間隙)、margin(邊框)

一個盒子的實際寬度(或高度)是由content+padding+border+margin組成的;

在CSS中可以通過設定width和height的值來控制content的大小, 并且對于任何一個盒子, 都可以分別設定4條邊各自的border、padding和margin。

所有的元素都是一個盒子

如: a標記也可以設置padding margin;

在瀏覽器中, width和height的值兼容性很差, 具體指代跟HTML第一行的聲明有關, 如果不聲明則

IE7 width=content的寬度 + padding + border + margin

height=content的高度 + padding + border + margin

W3C標準: width=content的寬度

padding 會影響盒子的問題

盒子真正的大小 width 總的寬度：盒子的寬度 + 左右padding + 左右border 值 + 左右margin

如果做一下DTD聲明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

則只代的都是content的寬和高。通常情況下盡量使用上述聲明，這樣瀏覽器之間的兼容性會大大提高。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.father{
width:300px;
height:150px;
background-color:pink;
padding:100px; /* 盒子實際寬度變成500px, 實際高度變成:350px */
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
</html>

簡單計算題

問：一個盒子的寬度為 200像素, 這個盒子, 有一個左邊為 15 像素的內邊距, 還有 3 像素的邊框? 問, 這個盒子的實體寬度是?

答：實際寬度=width+ padding-left + border

=200 + 15 + 3*2

=221

中等數學題

問：一個盒子的寬度為 200 像素, 這個盒子, 有一個左邊為 15 像素的內邊距, 還有 3 像素的邊框? 但是, 我們盒子的大小是不能變的。問怎么辦?

盒子大小不能變, 盒子的最終大小不能變。

答：實際寬度=width+ padding-left + border

200=x + 15 + 6

x=200 - 15 -6

x=179

這個盒子的width變成 179 就可以了。

復雜數學題

要求小盒子在大盒子里面水平居中, 垂直居中?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.father{
/*width:300px;
height:150px;
background-color:pink;
padding:75px 100px;*/
width:400px;
height:225px;
background-color:pink;
padding:75px 0 0 100px;
}
.son{
width:300px;
height:150px;
background-color:deeppink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

padding不會影響盒子的情況：

繼承的盒子默認和父親一樣寬, 如果繼承的盒子沒有寬度, 則padding值不會撐開盒子的寬度, 不用再去減了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.father{
width:300px;
height:200px;
background-color:pink;
}
.son{
height:50px;
background-color:deeppink;
padding-left:50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

盒子透明

1 background：rgba(),這是一個CSS3屬性,IE6 7 8 不支持

可以再小括號內里面設置第四個參數opacity:0-1

background:rgba(0,0,0,0.4);

2 CSS濾鏡：首先給IE高版本和其他高版本瀏覽器(chome、Firefox)設置屬性opacity:0-1

如果讓低版本IE瀏覽器也支持半透明我們可以利用filter:appha(opacity=40); 此時的0-100表示全透明到不透明

opacity:0.4;
filter:alpha(opacity=40);

盒子居中

盒子水平居中的方法：

div{
width:500px
margin:14px auto;
}

盒子水平和垂直居中：

如何讓一個盒子在屏幕水平和垂直居中顯示？

以400*300的盒子為例：

首先給這個盒子設置一個絕對定位，position：absolute.然后將他的left top都設置為50%,此時這個盒子的左邊界和尚邊界都在中間的位置,

最后我們只需要再給這個盒子margin-left:-200px;margin-top:-140px,讓這個盒子在往左、上走自身的一半;

div{
position:absolute;
left:50%; top:50%;
margin-left:-200px;
margin-top:-150px;
}

注意:讓盒子居中必須寫<!DOCTYPE>

margin的塌陷現象

標準文檔流中, 豎直方向的margin不疊加, 以較大的為準。

*{
margin: 0;
padding: 0;
}
.p1{
width: 300px;
height: 200px;
background-color: orange;
margin-bottom: 30px;
}
.p2{
width: 300px;
height: 200px;
background-color: orange;
margin-top: 50px;
}
<p class="p1"></p>
<p class="p2"></p>

如果不在標準流, 比如盒子都浮動了, 那么兩個盒子之間是沒有塌陷現象的：

*{
margin: 0;
padding: 0;
}
div{
width: 200px;
border: 10px solid red;
overflow: hidden;
}
.p1{
width: 200px;
height: 100px;
background-color: orange;
margin-bottom: 40px;
float: left;
}
.p2{
width: 200px;
height: 100px;
background-color: orange;
margin-top: 30px;
float: left;
}
<div>
<p class="p1"></p>
<p class="p2"></p>
</div>

善于使用父親的padding，, 而不是兒子的margin

如果父親沒有border, 那么兒子的margin實際上踹的是"流", 踹的是這"行"。所以, 父親整體也掉下來了

這個p有一個margin-top踹父親, 試圖將自己下移

*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
background-color: orange;
}
p{
width: 100px;
height: 100px;
margin-top: 60px;
background-color: green;
}
<div>
<p></p>
</div>

兒子用margin-top踹父親, 父親沒有border, 結果父親也下來了

第一種解決方法：

*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
padding-top: 50px;
background-color: orange;
}
p{
width: 100px;
height: 100px;
background-color: green;
}
<div>
<p></p>
</div>

使用在父親使用padding-top, 代替兒子使用margin-top

第二種解決方法：

*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
background-color: orange;
border: 1px solid red;
}
p{
width: 100px;
height: 100px;
margin-top: 60px;
background-color: green;
}
<div>
<p></p>
</div>

兒子用margin-top踹父親，但是父親有border。達到了我們的目的。

margin這個屬性, 本質上描述的是兄弟和兄弟之間的距離；最好不要用這個marign表達父子之間的距離。

所以, 我們一定要善于使用父親的padding, 而不是兒子的margin。

凡是盒子模型(width/height+padding+border+marign)的東西都不能繼承

CSS可以繼承的屬性:

font-系列

text-系列

color

line-height

握CSS盒子模型：一站式指南-CSDN博客

盒子模型

01-選擇器

結構偽類選擇器

基本使用

作用：根據元素的結構關系查找元素。

選擇器	說明
E:first-child	匹配父元素的第一個子元素E
E:last-child	匹配父元素的最后一個子元素E
E:nth-child(n)	匹配父元素的第n個子元素E
E:nth-last-child(n)	匹配父元素的倒數第n個子元素E
E:first-of-type	匹配父元素下同類型元素中的第一個E
E:last-of-type	匹配父元素下同類型元素中的最后一個E
E:nth-of-type(n)	匹配父元素下同類型元素中的第n個E
E:nth-last-of-type(n)	匹配父元素下同類型元素中的倒數第n個E

:nth-child(公式)

以下是針對:nth-child()偽類中公式的說明表格：

功能	公式
匹配第n個子元素	:nth-child(n)
匹配偶數位置的子元素	:nth-child(2n)
匹配奇數位置的子元素	:nth-child(2n+1)
匹配前n個子元素	:nth-child(-n+3)
匹配后n個子元素	:nth-last-child(n)
匹配倒數第n個子元素	:nth-last-child(-n)
匹配從第n個開始的子元素	:nth-child(n+x)
匹配從第n個結束的子元素	:nth-last-child(n+x)

這些公式可以用于選擇符合特定條件的子元素，并為它們應用樣式。

偽元素選擇器

作用：創建虛擬元素（偽元素），用來擺放裝飾性的內容。

div::before {
  content: "before 偽元素";
}
div::after {
  content: "after 偽元素";
}

注意點：

必須設置 content: ””屬性，用來設置偽元素的內容，如果沒有內容，則引號留空即可
偽元素默認是行內顯示模式
權重和標簽選擇器相同

擴展：PxCook（像素大廚）是一款切圖設計工具軟件。

02-盒子模型

作用：布局網頁，擺放盒子和內容。

盒子模型-組成

內容區域 – width & height
內邊距 – padding（出現在內容與盒子邊緣之間）
邊框線 – border
外邊距 – margin（出現在盒子外面）

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

邊框線

四個方向

屬性名：border（bd）

屬性值：邊框線粗細線條樣式顏色（不區分順序）

以下是關于表框線屬性的表格：

屬性值	線條樣式
none	無
hidden	隱藏
dotted	點線
dashed	虛線
solid	實線
double	雙實線
groove	凹槽效果
ridge	凸起效果
inset	內陰影效果
outset	外陰影效果

這些屬性值可用于控制表框線的樣式，從而實現不同的外觀效果。

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

嘗試一下>>>菜鳥教程在線編輯器

單方向邊框線

屬性名：border-方位名詞（bd+方位名詞首字母，例如，bdl）

屬性值：邊框線粗細線條樣式顏色（不區分順序）

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

內邊距

作用：設置內容與盒子邊緣之間的距離。

屬性名：padding / padding-方位名詞

div {
  /* 四個方向 內邊距相同 */
  padding: 30px;
  /* 單獨設置一個方向內邊距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

提示：添加 padding 會撐大盒子。

padding 多值寫法

取值個數	示例	含義
1	padding: 10px;	設置四個方向的內邊距為10像素
2	padding: 10px 20px;	設置上下內邊距為10像素，左右內邊距為20像素
3	padding: 10px 20px 15px;	設置上內邊距為10像素，左右內邊距為20像素，下內邊距為15像素
4	padding: 10px 20px 15px 25px;	分別設置上、右、下、左內邊距為10、20、15、25像素

這些多值寫法可以用于同時設置不同方向的內邊距。

技巧：從上開始順時針賦值，當前方向沒有數值則與對面取值相同。

尺寸計算

默認情況：盒子尺寸=內容尺寸 + border 尺寸 + 內邊距尺寸

結論：給盒子加 border / padding 會撐大盒子

解決：

手動做減法，減掉 border / padding 的尺寸
內減模式：box-sizing: border-box

外邊距

作用：拉開兩個盒子之間的距離

屬性名：margin

提示：與 padding 屬性值寫法、含義相同

版心居中

左右 margin 值為 auto（盒子要有寬度）

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

清除默認樣式

清除標簽默認的樣式，比如：默認的內外邊距。

/* 清除默認內外邊距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表項目符號 */
li {
  list-style: none;
}

元素溢出

作用：控制溢出元素的內容的顯示方式。

屬性名：overflow

屬性值	效果
visible	默認值，溢出內容可見，不會出現滾動條。
hidden	溢出內容被隱藏，不可見。
scroll	溢出內容被隱藏，但會顯示滾動條。
auto	當內容溢出時顯示滾動條，沒有溢出時不顯示滾動條。

這些屬性值用于控制元素在內容溢出時的行為，如是否顯示滾動條以及如何處理溢出內容。

外邊距問題

合并現象

場景：垂直排列的兄弟元素，上下 margin 會合并

現象：取兩個 margin 中的較大值生效

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

外邊距塌陷

場景：父子級的標簽，子級的添加 上外邊距 會產生塌陷問題

現象：導致父級一起向下移動

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

解決方法：

取消子級margin，父級設置padding
父級設置 overflow: hidden
父級設置 border-top

提示：設置子集 display: inline-block; 也能解決此問題；注意多個子集控件的情況。

嘗試一下>>>菜鳥教程在線編輯器

行內元素-內外邊距問題

場景：行內元素添加 margin 和 padding，無法改變元素垂直位置

解決方法：給行內元素添加 line-height 可以改變垂直位置

span {
  /* margin 和 padding 屬性，無法改變垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改變垂直位置 */
  line-height: 100px;
}

圓角

作用：設置元素的外邊框為圓角。

屬性名：border-radius

屬性值：數字+px / 百分比

提示：屬性值是圓角半徑盒子陰影(拓展)

多值寫法

取值個數	示例	含義
1	border-radius: 10px;	設置四個角的圓角半徑都為10像素
2	border-radius: 10px 20px;	設置水平方向上的圓角半徑為10像素，垂直方向上的圓角半徑為20像素
3	border-radius: 10px 20px 15px;	設置左上角和右下角的圓角半徑為10像素，右上角和左下角的圓角半徑為20像素和15像素
4	border-radius: 10px 20px 15px 25px;	分別設置左上、右上、右下、左下的圓角半徑為10、20、15、25像素

技巧：從左上角開始順時針賦值，當前角沒有數值則與對角取值相同。

正圓形狀：給正方形盒子設置圓角屬性值為 寬高的一半 / 50%

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;
  border-radius: 50%;
}

膠囊形狀：給長方形盒子設置圓角屬性值為盒子高度的一半

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

盒子陰影

作用：給元素設置陰影效果

屬性名：box-shadow

屬性值：X 軸偏移量 Y 軸偏移量模糊半徑擴散半徑顏色內外陰影

注意：

X 軸偏移量和 Y 軸偏移量必須書寫
默認是外陰影，內陰影需要添加 inset

關注，不迷路，每天分享大量前端知識

css中的盒子模型 css處理網頁時，他認為每個元素都包含在一個不可見的矩形盒子盒子是由內容區，內邊距(padding)，邊框，外邊距(margin)組成

在瀏覽器中，其默認樣式中存在一些body等元素存在的默認樣式，比如一些外邊距，內邊距等,它的這些默認樣式

所以在編寫樣式之前我們需要將默認樣式取消掉，在書寫代碼時在style中引入下面的reset.css文件即可，下面的效果不好的話，可以百度reset.css粘貼進去。

內聯元素的盒模型，設置width和height無效，水平方向的內邊距可以用，內聯元素可以設置垂直方向的外邊距，不會影響頁面的布局，即不影響其他元素的位置，僅僅是其顯示效果發生變化可以使用邊框，外邊距，兩個內聯元素的相鄰外邊距會相加，垂直外邊距不支持！

css中的display，通過display可修改元素類型，比如塊元素轉化為內聯元素，內聯元素轉化為塊元素，還可以設置為內聯塊元素，擁有他們的共性，可以設置寬高，但又

不獨占一行，比如img標簽。display：none 元素不顯示，也不在頁面占有位置。

visiblity visiblity：none 元素不顯示，但在頁面占有位置。

css盒子模型中的overflow 如果子元素大小超過父元素的大小，超出父元素的內容

會在超過父元素的區域顯示，父元素默認是將溢出的內容，在父元素外邊顯示，通過overflow可以處理溢出的內容。比如overflow：scroll/auto，添加滾動條，來查看所有內容。

文檔流文檔指的是HTML的頁面，每個頁面都是一個文檔，文檔流就是處在網頁中的底層表示一個頁面的位置，我們創建的元素默認處在文檔流中

元素在文檔流中的特點。

1.塊元素在文檔流中會默認獨占一行，默認自上往下排列，默認寬度是父元素的100%

塊元素的高度默認被內容撐開。

2.內聯元素在文檔流中只占自身的大小，默認從左向右排列，如果一行內容納不了所有元素則會另起一行，接著自左向右。

在內聯元素，寬度和高度默認被內容撐開。

浮動（float）

塊元素在文檔流中默認垂直排列，如果希望塊元素水平排列，可以使其脫離文檔流。

百度reset.css即可搜到去除瀏覽器默認樣式的css文件

在線咨詢

上一篇：亞馬遜賣家如何有效的進行站外推廣？
下一篇：APP開發編程與ipa簽名小白怎么入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商