@author：runsen
css知識總結（上）
繼續上篇文章，總結css
今天一篇全講重要的盒子模型
內邊距外邊距
css盒子模型
盒子模型寬度和高度
重點常見面試題
區別邊框就是環繞在標籤寬度和高度周圍的線條
border: 邊框的寬度 邊框的樣式 邊框的顏色;
快捷鍵:
border-width: 5px 10px 15px 20px;
border-color: blue green purple pink;
連寫
給標籤設定內邊距之後, 標籤占有的寬度和高度會發生變化
給標籤設定內邊距之後, 內邊距也會有背景顏色
padding:20px 40px 80px 160px外邊距的那一部分是沒有背景顏色的
margin:20px 40px 80px 160px;css盒子模型僅僅是乙個形象的比喻, html中所有的標籤都是盒子
內容的寬度和高度
就是通過width/height屬性設定的寬度和高度
寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框
高度 同理可證
寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
高度 同理可證
如果padding 和 margin 寬度和高度都增加，盒子的元素寬度高度也會增加。
因為預設為box-sizing：content-box
保持盒子元素的寬度和高度不變
新增box-sizing: border-box
如果padding 和 margin 寬度和高度都增加，但是內容寬度和高度會減少，盒子的元素寬度高度是不會發生改變。
有乙個大盒子, 元素的寬高是500
有乙個小盒子, 元素的寬高是200
要求將小盒子放到大盒子中, 並且讓小盒子在大盒子中水平垂直居中
布局很簡單
思路：固定大盒子，給大盒子新增padding屬性，把小盒子擠到中間
.big
.small
給小盒子margin-top屬性時，大盒子會跟著小盒子一起滾下來，如何解決，就要給大盒子新增邊框屬性
但是這改了題目的意思，margin:150px auto 就是給小盒子150px margin屬性
注意點:
如果兩個盒子是巢狀關係, 那麼設定了裡面乙個盒子頂部的外邊距, 外面乙個盒子也會被頂下來
如果外面的盒子不想被一起定下來,那麼可以給外面的盒子新增乙個邊框屬性
在巢狀關係的盒子中, 我們可以利用margin: 0 auto;的方式來讓裡面的盒子在外面的盒子中水平居中
margin: 0 auto; 只對水平方向有效, 對垂直方向無效
在企業開發中, 一般情況下如果需要控制巢狀關係盒子之間的距離, 應該首先考慮padding, 其次再考慮margin
margin本質上是用於控制兄弟關係之間的間隙的
text-align:center和margin:0 auto;區別
text-align: center;
作用設定盒子中儲存的文字/水平居中
margin:0 auto;
作用讓盒子自己水平居中
清空缺省的邊距
*css知識總結 盒子模型
當對乙個文件進行布局的時候，瀏覽器的渲染引擎會將所有的元素表示成乙個個的矩形盒子。css盒模型本質上就是乙個盒子，封裝周圍的html元素。它包括四個部分 邊距 margin 邊框 border 填充 padding 內容 content 下面的說明了盒子模型 於網路，侵刪 由於歷史原因，css的盒模...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS總結三之盒子模型
html頁面中的布局元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。屬性作用 border width 定義邊框粗細，單位是px border style 邊框的樣式 border color 邊框顏色 邊框的樣式 border 1px solid red 沒有順序很多情況下，我們不需要指定4個...