使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%,實際工作中最常用的是像素值。
大多數瀏覽器,如Firefox、IE6及以上版本都采用了W3C規范,符合CSS規范的盒子模型的總寬度和總高度的計算原則是:
```css
/*外盒尺寸計算(元素空間尺寸)*/
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
/*內盒尺寸計算(元素實際大小)*/
Element Height = content height + padding + border (height為內容高度)
Element Width = content width + padding + border (Width為內容寬度)
```
注意:
1、寬度屬性width和高度屬性height僅適用于塊級元素,或行內塊元素,對行內元素無效( img 標簽和 input除外)。
2、計算盒子模型的總高度時,還應考慮上下兩個盒子垂直外邊距合并的情況。
3、如果只有一個子盒子則會和父親一樣寬,占滿父親的寬度。
4、如果一個子盒子在父盒子里面,而且這個子盒子沒有指定width,增加子盒子的padding并與子盒子的width相加沒有超過父盒子的width時,padding不影響子盒子的總寬度。(總高度會受到影響的)
- 0 學前必讀
- CSS是什么?
- 如何引用CSS
- 內聯樣式表
- 行內式
- 外部樣式表
- 三種引用方式的比較
- CSS語法規范
- 選擇器
- 基礎選擇器
- 復合選擇器
- CSS注釋
- 字體樣式font屬性
- 標簽顯示模式display屬性
- 塊級元素
- 行內元素
- 行內塊元素
- 三種顯示模式的轉換
- 行高line-height屬性
- CSS三大特性
- 背景background屬性
- 盒子模型
- 邊框border
- 內邊距padding
- 外邊距margin
- 外邊距的合并
- content的高度和寬度
- 盒子模型布局的穩定性
- 圓角邊框border-radius
- 盒子陰影box-shadow
- 浮動float
- 普通流
- 浮動float
- 版心和布局
- 布局流程
- 常見布局方式
- 清除浮動
- 定位postion
- 定位屬性
- 疊放次序z-index
- 元素的顯示與隱藏
- 用戶界面樣式
- 溢出的文字隱藏
- CSS精靈技術
- 什么是精靈技術?
- 精靈技術的使用
- 滑動門
- web字體
- 字體圖標
- icon圖標
- BFC
- 優雅降級和漸進增強
- HTML5新增的元素和特性
- CSS3盒模型
- 過渡、變形、動畫
- 彈性布局
- 對齊
- 網站優化三大標簽