行内元素对于Margin无响应:
行内元素不响应垂直方向的Margin属性,水平方向响应(这个或许就是行内的定义)。
建议:避免对行内元素使用Margin的所有属性,因为严格地来说是Margin是盒子模型的对外属性,是一个布局属性。如果一定需要实现左右缩进效果可以使用padding、文本缩进以及其他效果实现;
行内元素对于垂直方向Padding、Border拥有相应,但是响应不统一:
在IE9和火狐中,就有着截然不同的响应方式,更别说是IE的低端版本,因此绝对不使用行内元素垂直方向的Padding属性。Border也需要谨慎使用,绝大多数情况同样不推荐使用,宁愿不要边框效果,通过text-decoration属性去渲染这样就不会出现问题。
下面说下IE9和FF下对于上面的两个属性不同的响应方式。
在IE9下,这里吐槽下IE系列没有一个浏览器可以算的上好的浏览器,至少从5.5以后都是垃圾作品。
在IE9下,我仅仅针对只有一行的情况下进行讨论。假设是
的标签,此时a元素垂直方向的Padding和Border属性会对a元素在行高属性处理上产生影响。具体情况是这样的:55555555.......研究数据丢失呀。回忆了一下,当时得出的结论是行内元素关于垂直方向的问题请使用line-height属性在处理,使用line-height属性时也请尽量确保该数值相较与font-size足够大(1.2倍应该足够)。另外,关于垂直方向的对齐可以通过base-line属性进行简单处理。
小结论:inline不响应垂直margin,padding(有但请避免), width, height, max/min width/height 等属性声明。
正文:
block元素的特点:
* 总是另起一行开始;
* 高度,行高以及顶、底边距都可控制;
* 宽度缺省是它所在容器的100%,除非设定一个宽度。(100%是指撑满容器,因为考虑margin、padding元素宽度可能不到100%)
inline元素的特点:
* 和其它元素都在一行上;
* 高度(行高有影响,但是不影响盒子模型的content)以及顶、底边距不可改变;
* 宽度就是它所容纳的文字或图片的宽度,不可改变(自适应宽度,不可设定)。
块级元素的分类
块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。
一.结构化块状元素
这类元素用于构造文档的结构,一个好的文档结构对于搜索引擎和应用其他技术都是十分有利的。它们没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。
主要的结构化块状元素
- 、
- 、
支持结构化的元素
、、、、、、、、二.终端块状元素 这类元素用于从结构转向内容,它们拥有语义上的含义,能够表明内容的性质。终端块状元素属于结构的终点,它们不能再包含其他块级元素,只能包含文本或行级元素。
终端块状元素
...
、
、
、、 、三.多目标块状元素
所谓多目标指的是可自由的扩展或嵌套文档的结构,也可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵,以终端的形式使用就含有语义的内涵。
多目标块状元素既可以包含块状元素,也可以包含内容(文本与行级元素的组合为内容),但不能同时包含两者(实现上其实是可以的,但是为了文档结构清晰,请确保两者没有同时包含,这个是推荐方式)。
多目标块状元素
、、、 、XHTML块级元素有哪些呢?(常见的)
◎ address – 地址
◎ blockquote – 块引用
◎ dir – 目录列表
◎ div – 常用块级
◎ dl、ul、ol – 定义列表、非排序列表、排序表单
◎ fieldset – form控制组
◎ h1-6 – 大标题、副标题、 3-6级标题
◎ hr – 水平分隔线
◎ p – 段落
◎ pre – 格式化文本
◎ table – 表格
XHTML行内元素有哪些呢? (常见的)
◎ a – 锚点
◎ abbr – 缩写
◎ b、i、u、em – 粗体、斜体、下划线、强调
◎ br – 换行
◎ cite – 引用
◎ img – 图片
◎ input – 输入框
◎ label – 表格标签
◎ select – 项目选择
◎ span – 常用内联容器,定义文本内区块
◎ textarea – 多行文本输入框
分享到:更多