关于CSS的内联和块元素

html-css010

关于CSS的内联和块元素,第1张

内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素。

如下面的代码把display:block属性值去掉的话,宽度和高度都不会起作用了。

<span style="width:100pxheight:100pxdisplay:blockbackground-color:blue"></span>

margin可以控制内联和块级元素的间距,而不光是内联元素。

主要注意他们之间的转换问题,如块级元素加float属性会变为内联元素。

不同DTD下,盒子模型不同。

还要清楚那些默认是块级,那些默认是内联。

块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素)

特点:

1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。

2.元素的高度、宽度、行高和顶底边距都是可以设置的。

3.元素的宽度如果不设置的话,默认为父元素的宽度。

4.块级元素对应属性display:block;

常见的块级元素:

(1)div:主要用来进行框架布局。

(2)h1~h6:用来设置不同级别的标题。

(3)p:创建段落,会自动在其前后创建一些空白。

(4)hr:用来创建分隔先。

(5)ol:创建有序列表。

(6)ul:创建无序列表。

行内元素(任何不是块级元素的可见元素都是行内元素。行内元素只能够容纳文本或者行内元素。)

特点:

1.可以和其他元素处于一行,不用必须另起一行。

2.元素的高度、宽度及顶部和底部边距不可设置。

3.元素的宽度就是它包含的文字、图片的宽度,不可改变。

4.行内元素对应属性display:inline;

常见的内联元素:

(1)strong:加粗强调。

(2)em:斜体强调。

(3)s:删除线。

(4)u:下划线。

(5)a:超链接。

(6)span:常用行级,可定义文档中的行内元素。

(7)img:图片。

(8)input:表单。

行级元素与块级元素的转换

如果想将块级元素与行级元素相互转换,该怎么办呢?

可以在css样式中用display:inline将块级元素设为行级元素

同样,也可以用display:block将行级元素设为块级元素

行级-块级元素

如果又想设置高度、宽度、行高以及顶和底边距,又想元素处于一行,该怎么办呢?

此时就可以用display:inline-block将元素设置为行级-块级元素。

块级元素和行内元素的分类

html中的块级元素:

html中的行内元素:

块级元素的分类块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。一.结构化块状元素这类元素用于构造文档的结构,一个好的文档结构对于搜索引擎和应用其他技术(如JavaScript)都是十分有利的。它们没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。主要的结构化块状元素 <ol><ul><dl><table>支持结构化的元素 <li><dt><dd><caption><thead><tbody><tfoot><colgroup><col>二.终端块状元素这类元素用于从结构转向内容,它们拥有语义上的含义,能够表明内容的性质。终端块状元素属于结构的终点,它们不能再包含其他块级元素,只能包含文本或行级元素。终端块状元素 <h1>...<h6><p><blockquote><dt><address><caption>三.多目标块状元素所谓多目标指的是可以自由的扩展或嵌套文档的结构,以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵,以终端的形式使用就含有语义的内涵。多目标块状元素既可以包含块状元素,也可以包含内容(文本与行级元素的组合为内容),但不能同时包含两者。应该把内容放在块状元素中。块状元素不应作为行级元素与文本的兄弟元素,受HTML校验器的限制,目前还没办法检验出此种情况,但是应该避免。多目标块状元素 <div><li><dd><td><form><noscript>在谈论CSS布局时,我们需要提前知道一些东西。对于html各种标签/元素,可以从块的层面做一个分类:要么是block(块元素),要么是inline(内联元素): block元素的特点: 总是另起一行开始;高度,行高以及顶、底边距都可控制;宽度缺省是它所在容器的100%,除非设定一个宽度。 inline元素的特点: 和其它元素都在一行上;高度,行高以及顶、底边距不可改变;宽度就是它所容纳的文字或图片的宽度,不可改变。 下面对它们的性质及应用做进一步说明:◎块元素(block element) 通常作为其它元素的容器,它可以容纳内联元素和其它块元素。我们知道默认情况下,块元素会顺序以每次另起一行的方式往下排,而通过CSS控制其样式,我们可以改变这种默认布局模式,把块元素摆放到你想要的位置上 去。需要指出的是,table标签也是块元素的一种,基于table表格和基于CSS+DIV的布局,在使用者看来除了页面载入速度的差别(table在 所有内容元素加载完成后才显示),没有其它的差别。但是从页面的源代码来看,这种差异就非常大了。基于良好结构理念设计的CSS布局源码,至少能让没有 web开发经验的用户很容易找到连续的页面内容。从这个角度来说,CSS layout code应该有更好的美学体验。我们可以把模块化的DIV想象成一个个box,然后把它们按自己的意愿排列组成完整的内容,网页布局设计就是遵循了同样的模式。 块元素(block element) HTML标签分类明细 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是css layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单 (只能用来容纳其它块元素)h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5