盒子模型: 就是把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 ...