## 一 、 属性的继承
### 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