位置: 编程技术 - 正文

CSS的inherit与auto使用分析(css中的auto)

编辑:rootadmin
通常是一个很小的数值,经过层层放大歪曲后,整个布局就走形了。CSS是一门很简单的语言,易学易用,但也最容易出垃圾代码。这是没有深入研究这门语言所致。本人认为,CSS是由以下三大块构成的:默认值,继承系统与加权系统。默认值,也就是浏览器在用户没有设置属性的情况下,默认指定的属性。CSS框架基本都有一个叫reset.css 的文件,就是对其进行重设,消除各浏览器的差异的。继承系统就是下面要重点讨论的东西。加权系统,也就是优先级的问题,不在本文的讨论范畴,不说了。另,这三个东西都面临着IE Bug的侵袭,危害甚大,自己另行了断吧(笑)。 在CSS中,许多属性都是可以继承的,如某个段落的字体设置为白色,其元素的字体不用设置或设置为inhert,它就是白色。这些属性被称之为inherited property,它会从父元素获取对应属性的经过计算与转换的值(computed value),如果父元素和它的情形一样,它就继续往上找,最后没有就使用浏览器的默认值。 下面是 inherited properties的一览表: CSS 父元素 子元素 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]我们给父元素设置了字体的样式,没有设置子元素的,当取出子元素的时,发现其值转换为rgb格式(当然IE除外啦!) 不过,在IE7及其之前的版本,是不支持用inhert来设置direction与visibility以外的样式属性。具体可参见这里与这里 在IE8中,原本是inherited property的text-align在th中失效。 <table> <tr> <th>Ruby</th> <th>Rouvre</th> </tr> <tr> <td>By</td> <td>司徒正美</td> </tr> </table> table, tr, td, th { border-collapse: collapse; border: 1px solid #; } table { text-align: right; } td, th { width: px; } 本来th应该会从table中继承文本向右对齐的设置,但失效了…… CSS Ruby Rouvre By 司徒正美 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 解决IE8这个弱智Bug也很容易,就是显式地设置inhert。 table, tr, td, th { border-collapse: collapse; border: 1px solid #; } table { text-align: right; } td, th { width: px; } th { text-align: inherit; } CSS Ruby Rouvre By 司徒正美 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 此外还有一些CSS属性是不能继承的,最经典如border系列。它被称之为non-inherited property,如果我们不为它设置,我们只能取得浏览器的默认值,默认值在火狐中被称之为 initial value 。一个相关的好消息是,默认值在火狐也可以指定了,这样我们就不用reset样式了! 下面是non-inherited property的一览表: background border bottom clear display float height left margin outline overflow padding position right top visibility width z-index CSS 父元素 子元素 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 我们给父元素设置了背景颜色,没有设置子元素的,这时会取得浏览器的默认值transparent(W3C那一方好像只要是颜色都会转换为rgb格式,多出的a为Alpha) 接着我们来看auto,这是一个含糊不清但是有长度概念的值。应用于以下属性: overflow cursor height width marker-offset margin margin-* (left|bottom|top|right|start|end) top bottom left right table-layout z-index -moz-column-width languages 在块级元素的可度量的属性中(如width,height),如果不设置值,其默认值是auto,但它很容易会被父级元素的值覆盖,也就是隐式地成为了inhert了。在内联元素中,由于不具备盒子模型,如果不设置,就算是火狐也原本奉还它,这对于精确计算元素的宽度与高度是非常不利的。auto还有对称性,这个在居中布局我们常常运用到它。在非度量的属性中,如overflow,就要具体情况具体分析了。 PS:此文为

推荐整理分享CSS的inherit与auto使用分析(css中的auto),希望有所帮助,仅作参考,欢迎阅读内容。

CSS的inherit与auto使用分析(css中的auto)

文章相关热门搜索词:css initialization,css auto用法,css auto用法,css inner,css inner,css in,css中inherit,css inset和outset怎么用,内容如对您有帮助,希望把文章链接给更多的朋友!

firefox下rowspan+border+border-collapse的bug 后查具体情况概述为:firefox+tablerowspan+border+border-collapse:collapse;表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。先看示

了解CSS的查找匹配原理,让CSS更简洁、高效 看1个简单的CSS:DIV#divBoxpspan.red{color:red;},按习惯我们对这个CSS的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再

Zen Coding 快速编写HTML/CSS代码的实现 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由SergeyChikuyonok开发。你在写HTML代码(包括所有标签、属性、引用、大

标签: css中的auto

本文链接地址:https://www.jiuchutong.com/biancheng/372074.html 转载请保留说明!

上一篇:div+CSS 兼容小摘(css vh兼容性)

下一篇:firefox下rowspan+border+border-collapse的bug

  • 印花税入什么科目核算成本
  • 如何理解中医的补
  • 新成立的销售公司有哪些
  • 淘宝网店女装
  • 房屋出租收入会计分录
  • 长期待摊费用摊销计入什么会计科目
  • 私人口腔诊所会感染艾滋病吗
  • 长期挂账的应付账款如何写申请报告
  • 职工集资建房款属公款吗
  • 房屋租赁需要交税吗?
  • 收到前欠销货款290000元,存入银行的会计分录怎么写
  • 工资薪金所得扣税
  • 如何解决私账流水过大的问题?
  • 耕地占用税为什么属于房地产开发成本
  • 失控发票如何认定
  • 所得税费用什么时候结转到本年利润
  • 空调折旧年限的最新规定2018
  • 节能控制模块
  • 单位汽车按揭贷款怎么贷
  • 外籍人员探亲签证
  • 非居民企业可以享受小微企业所得税优惠政策吗
  • 支付设备定金会退回吗
  • 公司购买五金用交税吗
  • 超市开具预付卡发票不征税发票上税吗
  • 飞鱼星路由器信号有点差怎么办
  • PHP:xml_parse_into_struct()的用法_XML解析器函数
  • 广告费与业务宣传费范围
  • win10显示我的电脑
  • linux zmodem
  • checkingmedia什么意思戴尔笔记本
  • 政府机关出租房屋要交税吗
  • chormedriver安装
  • 4月满月是几号
  • php如何调用类
  • joomla安装教程
  • 超参数设置
  • 万字长文护国安是谁写的
  • python颜色代码有哪些
  • 因税收取得的票据是什么
  • 电子发票报税怎么操作
  • 个人注册投资有限公司
  • php网站首页的源码在哪里
  • 投稿网址打不开
  • 固定资产的主要风险和关键控制点有哪些?
  • 发票作废是什么样的
  • 主管盾和制单盾是是转账使用的U盾吗?
  • 资产负债表跟利润表勾稽关系公式
  • 小型生产加工企业税率
  • sql中循环语句怎么写
  • 现金流量表算财务报表吗
  • 无法收回的应收账款怎么做分录
  • 结转费用后利润怎么算
  • 应收账款应付账款借贷方都表示什么
  • 购买生产原料的支出
  • 退回现金会计分录
  • 简易征收计算企业所得税怎么算
  • 现金日记账月末怎么结账图片
  • 吸收的三种方式
  • 微软软件安装
  • 亲测可用抖音低价单赚派费项目
  • linux 用处
  • win7显示网上邻居图标
  • 部分用户开启隐私,暂时无法查看怎么办
  • explorer.exe进程出错
  • Centos 6.4 64位版命令行下设置无线网卡教程
  • win8网络连接受限怎么处理
  • win7安装显卡驱动显示未知错误
  • win8.1怎么用
  • 32位系统的电脑可以连接打印机吗
  • win10系统中打开任务管理器的快捷键
  • win8声音小怎么解决
  • js页面点击怎么随机生成图片
  • forfiles命令详解
  • 苏州大学附属第一医院占地面积
  • jquery.css
  • android FileNotFoundException(Is a Directory)解决办法
  • 一个治疗Unity的Prefab强迫症患者的小招(Prefab变成红色的问题)
  • 怎么关闭android
  • 山东省关于退林还耕的规定
  • 基本账号信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设