@Author：Runsen

CSS知識總結（上）
繼續上篇文章，總結css
今天一篇全講重要的盒子模型

文章目錄

• 邊框屬性
• • 什么邊框?
  • 邊框屬性的格式
  • 連寫(分別設置四條邊的邊框)
• 內邊距
• • 什么是內邊距?
  • 格式
  • 注意點:
• 外邊距
• • 什么是外邊距?
  • 格式
  • 注意點:
• CSS盒子模型
• • 什么是CSS盒子模型?
• 盒子模型寬度和高度
• • 注意點
• 重點常見面試題
• 區別

邊框屬性

什么邊框?

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

邊框屬性的格式

border: 邊框的寬度 邊框的樣式 邊框的顏色;

快捷鍵:

• bd+ border: 1px solid #000;
• bt+ border-top: 邊框的寬度 邊框的樣式 邊框的顏色;
• br+ border-right: 邊框的寬度 邊框的樣式 邊框的顏色;
• bb+ border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;
• bl+ border-left: 邊框的寬度 邊框的樣式 邊框的顏色;

連寫(分別設置四條邊的邊框)

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

border-width: 5px 10px 15px 20px; border-color: blue green purple pink;

內邊距

什么是內邊距?

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

格式

• 非連寫
  • 快捷鍵
  • pt padding-top:;
  • pr padding-right: ;
  • pb padding-bottom: ;
  • pl padding-left: ;
• 連寫
  • padding: 上 右 下 左;

注意點:

給標簽設置內邊距之后, 標簽占有的寬度和高度會發生變化

給標簽設置內邊距之后, 內邊距也會有背景顏色

padding:20px 40px 80px 160px

外邊距

什么是外邊距?

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

格式

• 非連寫

  • 快捷鍵
  • mt margin-top: ;
  • mr margin-right: ;
  • mb margin-bottom: ;
  • ml margin-left: ;

• 連寫

  • margin: 上 右 下 左;

注意點:

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

margin:20px 40px 80px 160px;

在默認布局的垂直方向上, 默認情況下外邊距是不會疊加的, 會出現合并現象, 誰的外邊距比較大就聽誰的，但是在水平方向上是會疊加的

CSS盒子模型

什么是CSS盒子模型?

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

盒子模型寬度和高度

內容的寬度和高度

就是通過width/height屬性設置的寬度和高度

• 元素的寬度和高度

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

• 元素空間的寬度和高度

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

注意點

如果padding 和 margin 寬度和高度都增加，盒子的元素寬度高度也會增加。

因為默認為box-sizing：content-box

保持盒子元素的寬度和高度不變

添加box-sizing: border-box

如果padding 和 margin 寬度和高度都增加，但是內容寬度和高度會減少，盒子的元素寬度高度是不會發生改變。

重點常見面試題

有一個大盒子, 元素的寬高是500

有一個小盒子, 元素的寬高是200

要求將小盒子放到大盒子中, 并且讓小盒子在大盒子中水平垂直居中
布局很簡單

<div class="big"><div class="small"></div> </div>

關鍵如何寫下css
思路：固定大盒子，給大盒子添加padding屬性，把小盒子擠到中間

.big{width: 500px;height: 500px;background-color: red;box-sizing: border-box;padding-top:150px;padding-left:150px;} .small{width: 200px;height: 200px;background-color: blue;}

給小盒子margin屬性，這里有注意點

給小盒子margin-top屬性時，大盒子會跟著小盒子一起滾下來，如何解決，就要給大盒子添加邊框屬性

但是這改了題目的意思，margin:150px auto 就是給小盒子150px margin屬性

.big{width: 500px;height: 500px;background-color: red;# border: 5px solid #000;} .small{width: 200px;height: 200px;background-color: blue;margin:150px auto; }

注意點:

如果兩個盒子是嵌套關系, 那么設置了里面一個盒子頂部的外邊距, 外面一個盒子也會被頂下來

如果外面的盒子不想被一起定下來,那么可以給外面的盒子添加一個邊框屬性

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

margin: 0 auto; 只對水平方向有效, 對垂直方向無效

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

區別

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

text-align: center;
作用設置盒子中存儲的文字/圖片水平居中

margin:0 auto;
作用讓盒子自己水平居中

清空默認的邊距

*{margin: 0;padding: 0; }

總結

以上是生活随笔為你收集整理的三、CSS重要的盒子模型知识总结（中篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。