[转]CSS中继承性属性和非继承性的属性
2013-05-30 21:38
155 查看
不可继承的: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、 page-bread-before和unicode-bidi。
不可继承:也就是指子节点不能继承父节点的属性,
~~~ 不可继承属性:盒子模型相关的(margin border padding height width min-height max-height min-width max-width) 显示相关属性 (display,overflow) 定位属性(position left top right bottom z-index float clear vertical-align table-layout)
譬如:
html
<divstyle="border:1px solid #ff0000;">
这是父节点
<p>
这是子节点
</p>
</div>
效果如下:
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcQAAABdCAIAAAC0I4F3AAAFkklEQVR4nO3dvZXiMBRAYXXhMhyoiKlCiXqYIpyoFhJVMC2QuAN3oQ00NrIt/zA8FgnudxzsLgx4k3ueZMOoAAB4mHr1CQDAOyCmACCAmAKAAGIKAAKIKQAIIKYAIICYAoAA6ZgqxcHBwVHTIRU/qRcaX49RF0A9iCkACCCmACCg8Jg68+Wvw+KR/uKU0r3w+wHAAwqPqe+sNm712GDbxl1emdP+4prWJpnvtVJnTskZbTv/xDMD8BKFxzSEXqsmO5zmIvv7kNq1lbz0NXdef3rCn2OaPSsKC9St+JgG39mmtT+nE7m7CbA50g5X3yj13fnYx8vFaaXmuRxs2+yfw5k4MpkC76n8mIbQ63t2SP8wmcaSrhoX65l/a5b5AGZqiOkeZ/RiPX7vZLpR0tvz1cY+w8mYbq3rE5nXB1CZkmM6ZShGKlfJTMLumkzjk7+MaTJFG2zb2M47ox/p3dEomt8UBlCZkmMaQljMkr6zaQ2d0fPxMIT7JtPfXIZc8oarnwo7PtofDplqudNKTIHPUFdMwzhL2s73Fye4QB6uvl1FcPeCfv5a1mr5T0yBz1BdTMO4y6lWG51xbj1pHbi0eulYuuGOmB7OssQUqF6NMU12RfPL+fRW/3Xdtk1D4mDbZv8+062Yrj9lwGQKfITqYhoHPdv57Uvts6tS2etRW3Ubrr5R2hh94uOqZ2MK4CNUFNNxFZ/W8/dG+vWm6p8m0+xbbMnG9HZFazqdcfC8JT7dQ4j55nsGgOoVHtM4h2rjYiK3buRMhsHYrJ9paD0Z03EfNnZtsG1z9FO3mKa7ooufih/fGpZ/njWX2/iBd1ByTMcbPK8n0hb1OlnC799wmo6u8V82LnNtTanHX7ayuIqV/jWN7ImLXQCKV3JMffc9Jebwmrg27t4RLy7qz0yguW3W45iuzuc2kC5uhnVGv/ZLsAA8quSYCr8gADwPMQUAAcQUAAQQUwAQQEwBQAAxBQABxBQABBBTABBATAFAADEFAAHEFAAEEFMAEEBMAUAAMQUAAcQUAAQQUwAQQEwBQAAxBQABxBQABBBTABBATAFAADEFAAGFx9SZr/UvlF/8nmQAeL3CY+o7q41bPXb8O+ufrb+4prVJ5nut1JlTckbbzj/xzAC8ROExDaHXqskOp7nI/j6kds2T1+v9ZyulNk7gzzHNvgeFBepWfEyD72zT2p/TidzdBLhvpI3hGzM32LY5Du9RHJlMgfdUfkxD6PU9O6R3TqZ5w9U3Ss1nz+W7sMwHcFNDTPc4oxfr/ccn0ziQ7j/tfEy31vWJzDYCgMqUHNMpQzFSuUpmEvbgZBp3FQTbdjSK5jeFAVSm5JiGEBazpO9sWkNn9Dp8D06muzE9c7VquTlATIGPUFdMwzh42s73F/fgAvnEAnwzkVtdXi3/iSnwGaqLaRivDqnVFfM4t560FbjTy/w7YnoYamIKVK/GmCa7ovnlfHqr/7pu+x6M6fpTBkymwEeoLqbJvZ/xxs91iWZXpbLXo3bqJh5TAB+hopiOq/i0nr830q83VV80mQ62bealngbPW+KHq2/G/8Vw9Q3fMwC8gcJjGudQbVxM5NaNnMkwGJv1Mw2t/yGm6a7o4mfTV0v+PGsut/ED76DkmDqjlWr89Wrb5lzgep0s4fdvOJ0vxmcfFT33edPju6zSCXTx1zSyi6cBqFLJMfXd95SYw2vi2rj/O+Idx3R1PreBdHEzrDP6tV+CBeBRJcdU+AUB4HmIKQAIIKYAIICYAoAAYgoAAogpAAggpgAggJgCgABiCgACiCkACCCmACCAmAKAAGIKAAKIKQAIIKYAIICYAoAAYgoAAogpAAggpgAgoOiYcnBwcFR0SMVP6oUA4JMRUwAQQEwBQAAxBQABxBQABBBTABBATAFAwD/kb8A8BrFaygAAAABJRU5ErkJggg==)
如果子节点能继承父节点的border属性,那么也会有一个红色边框。
所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、
font-family、font-size、font-style、font-variant、font-weight、text-
decoration、text-transform、direction。~~~内联元素可继承字体排版相关属性
块状元素可继承:text-indent和text-align。
列表元素可继承(~~列表相关属性):list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。
不可继承:也就是指子节点不能继承父节点的属性,
~~~ 不可继承属性:盒子模型相关的(margin border padding height width min-height max-height min-width max-width) 显示相关属性 (display,overflow) 定位属性(position left top right bottom z-index float clear vertical-align table-layout)
譬如:
html
<divstyle="border:1px solid #ff0000;">
这是父节点
<p>
这是子节点
</p>
</div>
效果如下:
如果子节点能继承父节点的border属性,那么也会有一个红色边框。
所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、
font-family、font-size、font-style、font-variant、font-weight、text-
decoration、text-transform、direction。~~~内联元素可继承字体排版相关属性
块状元素可继承:text-indent和text-align。
列表元素可继承(~~列表相关属性):list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。
相关文章推荐
- [转]CSS中继承性属性和非继承性的属性
- [Web前端技术教学]CSS中可继承的属性以及无继承性的属性
- css继承性和不继承的属性。
- css中具有继承性的属性
- CSS中具有继承性的属性:
- css的继承性--有哪些属性继承
- IE7浏览器下CSS属性选择器二三事
- CSS font-variant 属性
- CSS属性
- css的边框属性
- 利用CSS的Clip属性来创造多彩文字
- 使用jquery获取css的top和left属性
- CSS属性分类
- CSS基础学习七:属性选择器
- CSS属性取值
- CSS中position属性( absolute | relative | static | fixed )详解
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
- CSS透明属性详解
- JavaScript获取元素CSS属性
- html 内联 块级元素,浏览器内核,css继承性