行内元素4个重要特性详解.ppt

行内元素4个重要特性详解 1 1行内元素和width1 2行内元素和height1 3行内元素和padding1 4行内元素和marging 行内元素和widthW3CCSS2标准规定行内元素不会应用width属性 以下例子中 对行内元素应用了width 200px 你可以看到 根本就没有什么效果 行内元素和heightW3CCSS2标准规定行内元素不会应用height属性 但是盒子高度可以通过line height来指定 以下例子 对行内元素应用了height 50px 你可以看到什么效果都没 行内元素和padding你可以给行内元素设置padding 但只有padding left和padding right生效 以下例子 行内元素应用了padding 50px 你可以看到对左右的内容有影响 但是对上下没影响 行内元素和margingmargin属性也是和padding属性一样 对行内元素左右有效 上下无效 下面的例子 对应用了margin 50px 你可以看到左右边缘是生效了但是内容上下却没有 记住对行内元素 设置宽度width无效 设置高度height无效 可以通过line height来设置 设置margin只有左右margin有效 上下无效 设置padding只有左右padding有效 上下则无效 注意元素范围是增大了 但是对元素周围的内容是没影响的 看图上效果就知道了 2 text align属性是两者表现的又以不同之处在W3CCSS2 1对text align有详细地描述 值 left right center justify inherit初始值 匿名值 由 direction 的值而定 如果 direction 为 ltr 则为 left 如果 direction 为 rtl 则为 right 应用于 块级元素 表格单元格 行内块元素继承性 是计算后的值 初始值或指定值 这个特性描述了如何使一个块元素的行内内容对齐 注意一点 标准里说这个属性是用来对齐行内内容的 所以 不应该对块级内容起作用 解释一下 行内内容是说由行内元素组成的内容 行内元素大家都知道吧 比如SPAN元素 IFRAME元素和元素样式的 display inline 的都是行内元素 块级内容跟则是由块级元素构成 DIV是最常用的块级元素 块级元素和行内元素的区别是 块级元素会占一行显示 而行内元素可以在一行并排显示 这样 我们对这个特性的认识应该就清楚了 但是 问题来了 虽然标准里这么规定 那么是不是所有浏览器都遵守呢 答案是否定的 猜猜是哪个浏览器这么特立独行啊 IE IE6 7及IE8混杂模式中 text align center可以使块级元素也居中对齐 其他浏览器中 text align center仅作用于行内内容上 解决这个问题比较好的方式 就是为所有需要相对父容器居中对齐的块级元素设置 margin left auto margin right auto 但这个方式IE6 IE7 IE8的混杂模式中不支持 所以还要设置父容器