海洋环境问题

标签定义。其中，CSS样式和盒子部分的定义如下。 #block1 {/*名为block1的块元素的样式定义*/ background-color: #CCC; height: 100px; width: 200px; } #block2 { 　　/*名为block2的块元素的样式定义*/ height: 50px; width: 120px; background-color: #666; color: #FFF;

block1

block2

图329块元素的默认排列上述代码的显示效果如图329所示。可见block1和block2这两个均为块元素的盒子在默认情况下是换行排列的。对于块元素的特征，可以归纳如下： (1) 块元素默认总是在新行左侧开始，即块元素换行排列并左对齐。 (2) 支持宽、高属性的设置分为以下几种情况。  没有设置宽、高，又没有内容，此时宽度继承浏览器的宽度，高度为0；  有内容的时候，内容可以撑开高度，但是不能影响宽度；  有固定高度的时候，内容无法撑开高度。 (3) 支持margin和padding属性的设置。常见的块元素很多，例如div、form、table、p、ul、ol、li、dl、dd、hr、h1~h6等元素。 3.4.2行内元素行内元素(inline)也叫行级元素，它只占据自身内容所占的位置，其他的内容在它后面显示，但是行内元素里面不能放块级元素。设置display:inline就是将元素显示为行内元素。与块元素不同，行内元素默认的排列方式是同行排列，在宽度超出包含它的容器时自动换行。例如span元素就是典型的行内元素。【例324】使用标签定义两段文本，其中前一段应用inline1类，后一段应用inline2类。CSS样式和body部分的定义如下，其中加粗部分是与行内元素有关的样式和代码。 body{ margin:0; padding:0; } #wrapper{ margin:0; padding:50px; width:800px; height:300px; border:1px solid red; } .inline1,.inline2{ /*定义了类inline1和inline2的样式*/ width: 100px; /*不支持宽度属性的设置*/ height: 100px; /*不支持高度属性的设置*/ margin:10px; /*只有左右方向有效果，上下方向没有效果*/ padding:10px; /*支持padding属性*/ background-color: #CCC; } #subdiv{ width:600px; height:200px; margin:50px; border:1px solid green; } p{ margin:0px; } .inline3 { 　　/*定义了类inline3的样式*/ margin:auto; /*不支持auto值*/ /*支持padding属性，但其上下方向的值对其他元素（如本例中的p元素）没有影响*/ padding:20px; border:1px solid black; }

第一个行内元素第二个行内元素

段落

第三个行内元素第四个行内元素第五个行内元素

上述代码的显示效果如图330所示。用户必须要注意的是，在类inline1和类inline2中均设置了宽度和高度属性值，但在图330中并没有得到反映。即对于行内元素而言，其内容区域的宽和高不可设定。图330行内元素的默认排列对于行内元素的特征，可以归纳如下： (1) 行内元素可与其他元素在同一行上。 (2) 行内元素不支持宽、高属性的设置，实际宽度和高度即为内容(文字、图片等)的宽度和高度。 (3) 行内元素的margin属性只有左右方向有效果，上下方向没有效果，且不支持auto值。 (4) 行内元素支持padding属性，但其上下方向的值对其他元素没有影响。 (5) 两个行内元素的代码间如果有空格(包括换行)，则在浏览器中两者之间有空隙，否则没有空隙。常见的行内元素也有很多，例如span、label、a、img、input、em、strong等。 3.4.3行内块元素行内块元素(inlineblock)就是同时具备行内元素和块元素特点的元素，代码display:inlineblock就是将元素设置为行内块元素。对于行内块元素的特征，可以归纳如下： (1) 行内块元素可与其他元素在同一行上。 (2) 行内块元素支持宽、高属性的设置。 (3) 行内块元素支持4个方向的margin属性，但不支持auto值。 (4) 行内块元素支持4个方向的padding属性。 (5) 两个行内块元素的代码间如果有空格(包括换行)，则在浏览器中两者之间有空隙，否则没有空隙。 (6) 可能出现文字对齐的问题，即有文字的行内块元素与没有文字的行内块元素上下不对齐。行内块元素主要有两种，即表示图片的img和表示表单控件的input。【例325】行内块元素示例。以下代码将p元素改为行内块元素，通过适当的布局体现行内块元素的相关特点，其中加粗的部分为与行内块元素相关的样式、代码和注释。其效果如图331所示。 div{ width:600px; margin:10px auto; border:1px solid red; } p{ display:inline-block;/*行内块元素可与其他元素在同一行上*/ width:150px; /*支持宽、高属性的设置*/ height:30px; border:2px solid purple; } .p4{ margin:20px; /*支持4个方向的margin属性*/ } .p5{ margin:auto; /*不支持margin属性的auto值*/ padding:20px; /*支持4个方向的padding属性*/ }

第一个行内块元素

第二个行内块元素

第三个行内块元素

第四个行内块元素

第五个行内块元素

第六个行内块元素

第八个行内块元素

图331行内块元素的应用效果注意：如果有多个内容结构相同的布局块，建议使用列表结构进行布局，这样可以更好地从语义上表现同质结构的特点。此时作为布局的li大多不需要显示默认的列表符号，因此可以在样式初始化时就设置其样式符号为无。 3.4.4元素类型的转换在通过CSS进行布局时，由于布局需要往往要改变某些元素默认的块元素、行内元素，或者行内块元素的属性，或者取消某些元素原来占用的布局位置(同时该元素不会显示)，则可以使用CSS中的display属性来改变页面元素的显示特性。其具体语法如下： display： block | inline | inline-block | none; 在上述语法中，display属性值为“block”时表示设置为块元素；为“inline”时表示设置为行内元素；为“inlineblock”时表示设置为行内块元素；为“none”时则表示不显示。由于不同的元素具有不同的特性，因此这种转换往往在需要使用对方的某一特性时发生，例如： (1) 希望控制行内元素的宽度和高度，此时需将行内元素转换为块元素。这在制作导航栏、页面菜单时比较常见。 (2) 希望行内元素从新行上开始，此时也需要将行内元素转换为块元素。 (3) 希望元素的宽度和高度由其内容决定或者希望同行显示，此时需要将块元素转换为行内元素。 (4) 希望控制元素的宽度和高度，并且能同行显示，此时需要将块元素或行内元素转换为行内块元素。 (5) 希望取消当前元素占用的位置，同时不显示该元素，则可以设置display属性为none。用户在实际应用中还需要注意以下几点元素嵌套规则： (1) 块级元素可以套任意内容，但

标签里面不能套包括其自身在内的任何块级元素；标签和

动画便利店X果壳网《西门子洗碗机》 by

动画便利店X视知《到底工资怎么发》 by

This is very very important.

This is really very important.

可以应用［lang|=en］样式：

无法应用［lang|=en］样式：

可以应用［title^=hello］样式：

<h4 title="hello world">Hello world</h4>

无法应用［title^=hello］样式：

美图赏析

div中的标题3元素

同时应用3种选择器所定义样式的h3标题文字

这是一个可见标题

这是一个隐藏标题

标签引用：
应用了id选择器设置红色的段落

有序列表

定义列表

一对多的定义列表

标签引用： 应用了id选择器设置红色的段落