通过实例学习CSS布局网页
我要评论11.1.2 XHTML中的块状元素和内联元素
上一节提到了XHTML的布局核心标签是div，并且div属于XHTML中的块级元素。XHTML的标签默认为2种元素。
（1）块状元素。该元素是矩形的，有自己的高度和宽度。默认情况下，在父容器中占据一行，同一行无法容纳其他元素及文本。其他的元素将显示在其下一行，可以看做被块级元素“挤”下去的。块状元素就是一个矩形容器，边缘非常硬，CSS设置了高度和宽度后，形状无法被改变。
（2）内联元素。和块级元素相反，内联元素没有固定形状，也无法设置宽度和高度。内联元素形状由其内含的内容决定，所以在宽度足够的情况下，一行能容纳多个内联元素。有人说相对于块状元素是一个硬盒子，内联元素就是一个软软的布袋子（形状由内容决定）。
块状元素适合于大块的区域排版，所以常用来布局页面。而内联元素适合于局部元素的样式设置，所以常用于局部的文字样式设置。
11.1.3 div元素的样式设置
读者要使用div元素进行网页布局，首先须学会使用CSS灵活地设置div元素的样式。本节就几个常用的示例学习div元素的多种样式设置，使读者快速理解div元素。作为单个div元素，width属性用于设置其宽度，height属性设置其高度。由于网页大多数用于计算机显示屏幕作媒介，所以常用像素作为固定尺寸的单位，即px。
— 注意：在HTML元素中设置样式不需要填写单位，默认为像素。
当单位为百分比时，div元素的宽度和高度为自适应状态，即宽度和高度适应浏览器窗口尺寸而变化。在D:\web\目录下创建网页文件（XHTML1.0），命名为div_2.htm，编写div_2.htm文件代码如代码11.3所示。
代码11.3 设置div样式：div_2.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置div样式</title>
<style type="text/css">
#fst {
background-color: #eee;
border:1px solid #000;
width:300px;
height:200px;
}
#sec {
background-color: #eee;
border:1px solid #000;
width:50%;
height:25%;
}
</style></head>
<body>
<div id="fst">这是固定尺寸的宽度和高度</div>
<hr />
<div id="sec">这是自适应尺寸的宽度和高度</div>
</body>
</html>
为了更方便看到div的表现，笔者给2个div都设置了浅灰色背景色和黑色边框，在浏览器地址栏输入http://localhost/div_2.htm，浏览效果如图11.3所示。
图11.3 设置div样式
很明显，第1个div宽度和高度固定，形成了一个“坚硬”的盒子。而第2个div由于设置其宽度为50%，其宽度随着浏览器的宽度变化而变化。但是问题出现了，第2个div的高度虽然设置为25%，按理说其高度应该随着浏览器的高度变化而变化。然而在示例中div高度仅和文本高度相当，好像高度设置没有起作用。
其实设置高度自适应有一个前提，div的高度自适应是相对于父容器的高度，本例中div父容器为body或者html（不同浏览器解析方式不同）。body或者html在本例中没有设置高度，div的高度自适应没有参照物，也就无法生效。
接下来在CSS中设置body和html的高度，就可解决div的高度自适应问题。body和html的高度直接设置为100%即可，不会对页面有任何影响。在div_2.htmd的CSS部分加入如代码11.4所示的代码。
代码11.4 设置div样式：div_2.htm
html,body{height:100%;}
为了考虑多种浏览器的兼容性，html和body同时设置100%宽度。在浏览器地址栏输入http://localhost/div_2.htm，浏览效果如图11.4所示。
调整浏览器高度后，第2个div的高度随之变化。各种浏览器对XHTML和CSS的解析方式有差异，在后面将详细讨论解决办法，以解决浏览器的兼容性问题。
图11.4 设置div标签高度自适应
相关文章
本文主要介绍了css九宫格布局的五种方法，内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现，感兴趣的可以了解下2023-09-18- 在Web开发中，经常会遇到需要将元素水平和垂直居中的情况,今天，将为大家分享几种CSS方法，让你的元素轻松居中，让页面更美观吸引人，感兴趣的小伙伴可以自己动手试一试2023-09-08
- 相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流2023-09-07
最近需要做个换行的布局，本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2022-06-16CSS布局之浮动(float)和定位(position)属性的区别
今天看到有朋友留言问浮动和定位有什么区别，如何使用？今天找了篇文章，讲的比较通俗易懂，供大家参考2021-09-23
这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了div水平布局两边对齐的三种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-21
这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-19
这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-11-27- 这篇文章主要介绍了css实现六种自适应两栏布局方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-10-28
最新评论