## 一 、 屬性的繼承
### 1.可繼承的屬性:
>* visibility 和 cursor 可以被所有元素繼承
>* 以下只可被 內聯元素 繼承 : letter-spacing(偽類里的), word-spacing,white-space,line-height,color,[font家族]font,font-familly,font-weight,font-size,font-style,font-variant,font-decoration,text-transform,direction
>* 以下屬性會被 塊級元素 繼承: text-align 和 text-indent
>* 以下屬性會被 列表元素繼承: list-style,list-style-type,list-style-position,list-style-image
>* 以下屬性會被 表格元素繼承: border-collapse
### 2.不可繼承的屬性
* 以下屬性不可被繼承:
> display,margin,border padding,background,height min-height,max-height,width min-width,max-width,overflow position,left,right,top,bottom z-index,float,clear table-layout,vertical-align,page-break-after,pager-break-before 和unicode-bidi[這里有幾個沒見過]
##二 、 屬性的默認值
* 每個樣式都有自己的默認值,這里不多于贅述,只對寬高做特別說明,因為影響到了最關鍵的盒模型。
|可取值 | 描述 |
| ------------- | ------------- |
|auto|默認值。瀏覽器可計算出實際的寬度 |
|length|使用 px、cm 等單位定義寬度 |
|%|定義基于包含塊(父元素)寬度的百分比寬度 |
|inherit|規定應該從父元素繼承 width 屬性的值 |
* 具體說明如下,請務必清楚每個值的情況 以便你實現正確的盒模型,而且能簡化代碼。
1. div標簽的適用情況(普通文檔流):
父標簽div 子標簽div
下面分析 寬度:
width: 100%;父標簽 的100%;
width:inherit;父標簽 的100%;
width:initial;父標簽 的100%;默認值auto,不寫也是可以的;
下面分析高度:
height: 100%;父標簽 的100%;
height:inherit;父標簽 的100%;
height:initial;默認值,根據內容的高度auto;如果需要設置 那么height:100%;
2. 絕對定位 (脫離文檔流):
下面分析 寬度:
width: 100%;定位點標簽寬度 的100%;如果需要設置,那么把父標簽定義為定位點
width:inherit;父標簽 的100%;
width:initial;內容寬度;默認值auto,;如果需要設置 那么width:100%;
下面分析高度:
height: 100%;定位點標簽高度 的100%;如果需要設置,那么把父標簽定義為定位點
height:inherit;父標簽 的100%;
height:initial;默認值,根據內容的高度auto;如果需要設置 那么height:100%;
3. 備注 :
如果定位點錯誤的時候,height:100%所取的不是父標簽的高度而是定位點標簽的高度。
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi