盒子模型基本介紹及知識點

2021-10-09 10:36:23 字數 1183 閱讀 9885

盒子模型: 就是把html頁面中的布局元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。

盒子模型有元素的內容、邊框(border)、內邊距(padding)、和外邊距( margin)組 成。

盒子裡面的文字和等元素是 內容區域

盒子的厚度 我們成為 盒子的邊框

盒子內容與邊框的距離是內邊距;盒子與盒子之間的距離是外邊距

2.盒子邊框

語法:border : border-width || border-style || border-color

border: 1px solid red;

**的細線邊框 :table

3.內邊距

padding屬性用於設定內邊距。 是指 邊框與內容之間的距離。

4個值 padding: 上內邊距 右內邊距 下內邊距 左內邊距

實際高度: height = content height + padding + border

實際寬度:width = content width + padding + border

通過給設定了寬高的盒子,減去相應的內邊距的值,維持盒子原有的大小

4.布局穩定性

按照 優先使用 寬度 (width) 其次 使用內邊距(padding) 再次 外邊距(margin)

原因:(1) margin 會有外邊距合併 還有 ie6下面margin 加倍的bug## 標題所以最後使用。

(2)padding 會影響盒子大小, 需要進行加減計算 其次使用。

(3)width 沒有問題我們經常使用寬度剩餘法 高度剩餘法來做

5.外邊距

margin屬性用於設定外邊距。 margin就是控制盒子和盒子之間的距離

外邊距合併

相鄰塊元素垂直外邊距的合併 :取兩個值中的較大者

巢狀塊元素垂直外邊距的合併(塌陷)

(1)可以為父元素定義上邊框。 (2) 可以為父元素定義上內邊距 (3)可以為父元素新增overflow:hidden。

塊級盒子水平居中; margin:0 auto;

文字水平居中是 text-align: center

插入 移動位置只能靠盒模型 padding margin

背景我們一般用於小圖示背景 或者 超大背景 背景 只能通過 background-position

清除元素的缺省內外邊距:padding:0;margin:0;

盒子模型相關知識點

垂直盒子css樣式 div one two 垂直盒子html 水平盒子 css div one 1 two 1 水平盒子 html one 1 box1 div two 1 box2 div 重疊盒子 1 margin不同於border和padding只能取正數,margin的值可以取負數。marg...

盒子模型的知識點彙總

一 盒子模型 1.什麼是css盒子模型?css盒子模型僅僅是乙個形象的比喻,html中所有的標籤都是盒子 結論1.在html中所有的標籤都可以設定 寬度 高度 指定可以存放內容的區域 內邊距 填充物 邊框 手機盒子自己 外邊距 盒子和盒子之間的間隙 我是span 我是超連結我是加粗我是強調 二 盒子...

盒子模型相關知識

盒子模型 box model 組成 邊框 border 外邊距 margin 內邊距 padding 和實際內容 content border可以設定元素的邊框,邊框有三部分組成邊框寬度 粗細 邊框樣式 邊框顏色。語法 border border width border style border ...