文章目录
网页是一种在浏览器上展示的平面设计作品 , 网页布局就是将网页元素合理排列在网 页版面上 ,达到美观大方 、井然有序的效果 。使用 CSS进行网页布局 ,本质是利用标准流 、 浮动或定位属性的性质对网页布局元素进行合理排列 。
1.浮动
在标准流中 ,块级元素的盒子都是上下排列 ,行内元素的盒子都是左右排列 ,如果仅按 照标准流的方式进行排列 , 就只有这几种可能性 , 限制太大 。CSS的制定者也 想 到 了 这 样 排列限制的问题 , 因此又给出了浮动和定位方式 ,从而使排版的灵活性大大提高 。
如果希望相邻的块级元素盒子左右排列(所有盒子浮动)或者希望一个盒子被另一个盒 子中的内容所环绕(一个盒子浮动)作出图文混排的效果 ,最简单的实现办法就是运用浮动 (float)属性使盒子在浮动方式下定位 。
1.1盒子浮动后的特点
在标准流中 ,一个块级元素在水平方向会自动伸展 ,在它的父元素中占满整个 一 行 ; 而
在竖直方向和其他元素依次排列 , 不能并排 。使用 "浮动 "方式后 ,这种排列方式就会发生改变 。
CSS中有 一 个 float属性 , 默认值为 none,也 就 是 标 准流 通 常 的 情 况 , 如 果 将 float 属 性 的 值 设 为 left或 right,元素就会向其父元素的左侧或右侧靠紧 , 同时盒子 的宽度不再伸 展 , 而 是 收 缩 , 在 没 设 置 宽 度 时 , 会 根 据 盒 子里面的内容来确定宽度 。
下面通过一 个 例子来 演 示 浮 动 的 作 用 , 基 础 代 码 如 下 ,这个代码中没有使用浮动 。
html
div{
padding:10px;
margin:10px;
border:1px dashed #111;
background-color:#90baff;
}
.father{
background-color:#ff9;
border:1px solid #111;
}
<div class= "father">
<div class= "son1">Box- 1</div>
<div class= "son2">Box-2</div>
<div class= "son3">Box-3</div>
</div>- 一个盒子浮动
css
.son1{ float:left; }可发现给 Box-1添加浮动属性后 ,Box-1的宽度不再自动伸展 , 而且不再占据原来浏览 器分配给它的位置 。如果再在未浮动的盒子 Box-2中添 一 行文本 ,就会发现 Box-2中的内 容是环绕着浮动盒子的。
总结 : 设置元素浮动后 ,元素发生了如下一些改变 。
• 浮动后的盒子将以行内块(inline-block) 元素显示 , 即宽度会自动收缩 ,但保持块级 元素的其他性质
• 浮动的盒子将脱离标准流 , 即不再占据浏览器原来分配给它的位置 。
• 未浮动的盒子将占据浮 动 盒 子 的 位 置 , 同 时 未 浮 动 盒 子 内 的 内 容 会 环 绕 浮 动 后 的 盒子 。
"脱离标准流 "是指元素不再占据在标准流下浏览器分配给它的空间 ,其他元素就好像 这个元素不存在一样 。例如图 4-2中 , 当 Box-1浮动后 ,Box-2就顶到了 Box-1的位置 ,相当 于 Box-2视 Box-1不存在一样 。但是 ,浮动元素并没有完全脱离标准流 ,这表现在浮动盒子 会影响未浮动盒子中内容的排列 , 例如 ,Box-2中的内容会跟在 Box-1盒子之后进行排列 , 而不会忽略 Box-1盒子的存在。
- 多个盒子浮动
css
.son1, .son2{ float:left; }可发现 Box-2盒子浮动后 仍然遵循上面浮动的规律 , 即 Box-2的宽度也不再自动伸展 ,而且不再占据原来浏览器分配 给它的位置 。
如果将 Box-1的浮动方式改为右浮动 : . son1{float:right} ,可看到 Box-2移动到了 Box-1的前面 ,这说明元素浮动后其显示顺序和它们在代码中的位 置可能并不一致 。
对于多个盒子浮动 ,除了遵循单个盒子浮动的规律外 ,还有以下两条规律 。
• 多个浮动元素不会相互重叠 ,一个浮动元素的外边界(margin)碰到另 一个浮动元素 的外边界后便停止运动 。
。若包含的容器太窄 ,无法容纳水平排列的多个浮动元素 ,那么最后的浮动盒子会向 下移动。但如果浮动元素的高度不同 ,那当它们向下移动时可能会被卡 住。
1.2清楚浮动元素的影响
clear是清除浮动属性 ,它的取值有 left、right、both和 none(默认值) ,如果设置盒子的 clear属性值为 left或 right, 表示该盒子的左边或右边不·允许有浮动的元 素 。值设置为both则表示两边都不允许有浮动元素 , 因此该盒子将会在浏览器中另起一行显示 。
在1.1两个盒子浮动的基础上 ,设置 Box-3清除浮动 , 即1.1基础上 设置如下 CSS代码。
css
.son1{ float:right; }
.son2{ float:left; }
.son3{ clear:both; }可以看到 ,对 Box-3清除浮动(clear:both;) ,表示 Box-3的左右两边都不允许有浮动的 元素 , 因此 Box-3移动到了下一行显示 。
实际上 ,clear属性既可以用在未浮动的元素上 ,也可以用在浮动的元素上 。
对 Box-3同时设置清除浮动和浮动 。
css
.son3{clear:both; float:left;}可看到 Box-3的左右仍然没有浮动的元素。
由此可见 ,清除浮动是清除其他盒子浮动对该元素的影响 ,而设置浮动是让元素自身浮 动 ,两者并不矛盾 , 因此可同时设置元素清除浮动和浮动 。
由于上下 margin叠 加 现 象 只 会 发 生 在 标 准 流 的 情 况 下 , 而 浮 动 方 式 下 盒 子 的 任 何 margin都不会叠加 ,所以设置盒子浮动并清除浮动后 ,上下两个盒子的 margin不叠加 。Box-3到 Box-1之间的垂直距离是 20px,即它们的 margin之和 。
1.3清除浮动影响的方法
在网页布局中 ,浮动元素会影响其他元素的正常排列 ,导致网页元素不能按我们的意愿 显示 。 因此设置元素浮动后应尽量清除该元素浮动对其他元素的影响 。对于下列两种情形 应采用不同的方法清除浮动 。
- 来自子元素的浮动
如果一个父元素内所有的子元素都浮动 ,一定要记得对这个父元素做清除浮动处理 ,否 则该父元素下面的元素会顶到浮动元素的位置上去。
css
div{ padding:10px; margin:10px;
border:1px dashed #111; background-color:#9bf;}
.father{ background-color:#ff9; border:1px solid #111;}
.cls { clear: both; }
.box3{background:#ccf;}
<div class= "father">
<div class= "son1">Box- 1<br />Box- 1</div>
<div class= "son2">Box-2</div>
<br class= "cls"> <!--这是清除浮动的元素 -->
</div>
<div class= "box3">Box-3</div> <!--父元素下面的元素 --这种方法添加了一个元素(. cls)专门用来清除浮动 ,如果不愿添加新元素 , 可使用伪元 素的方法来设置清除浮动 。下面的代码在父元素内部的末尾添加一个伪元素。
css
.father:after { content: ''; display: table; clear: both; }
.father { * zoom: 1; } / * 兼容 IE 6、IE 7,如不需要可去掉 * /注意 : 对于 一 个父元素内的所有子元素都浮动 , 一 种常见错误的做法是设置父元素的 高度来掩饰浮动对它的影响 , 如 . father{height:50px;} , 这样做只是掩饰 了 浮 动 , 并 没 有 清 除浮动的影响 , 虽然使父元素看起来正 常了 ,但父元素下面的元素仍然会顶到上面去 。
因此 ,在 CSS布局时 ,如果发现一个元素移动到它原来位置的左上方或右上方 ,并且和 其他元素发生了重叠 ,则很可能是受到了其他盒子浮动的影响 。
- 来自兄弟元素的浮动
如果一个元素前面的兄弟元素浮动,则可以对紧邻该浮动元素的后一个元素 做清除浮动处理 。例如 ,不希望 Box-3受前面兄弟元素浮动的影响 ,则可对 Box-3清除浮动 。
对 Box-3清除浮动
css
div{
padding:10px 20px;
margin:7px; border:1px dashed #111;
background-color:#9bf;
float:left; } / * 所有 div 都浮动 * /
.box3{background:#ccF;
clear:both;}/ * 对 Box-3 清除浮动 * /
<div class= "son1">Box- 1<br />Box- 1</div>
<div class= "son2">Box-2</div>
<div class= "box3">Box-3</div><div class= "box4">Box- 4</div>除了直接对后面的元素清除浮动外 ,还可以增加一个元素专用于清除浮动 。
html
<div class= "son1">Box- 1<br />Box- 1</div><div class= "son2">Box-2</div>
<br class= "cls" style= "clear:both"> <!--增加 一个清除浮动的元素 -->
<div class= "box3">Box-3</div><div class= "box4">Box- 4</div>- 避免滥用浮动
元素浮动会对其他元素的布局产生影响 , 因此应避免滥用浮动 ,例如 :
• 为了使元素宽 度 收 缩 而 设 置 浮 动 , 由 于 浮 动 元 素 的 宽 度 会 自 动 收 缩(称 为 主 动 包 裹) ,于是就用浮动属性代替 width属性 。 实际上 , 如果只需要改变元素的宽度 ,应 设置 width属性 ,而不是 float。
• 为了清除浮动的影响而浮动 ,清除浮动正确的做法是使用 clear属性(例如图 4-9中 的 Box-3) ,但如果对 Box-3设置 float属性 ,再设置 width值 , 似乎也能达 到 图 4-9 中的效果 ,但实际上这 种 错 误 的 做 法 将 导 致 更 多 的 元 素 受 到 浮 动 的 影 响 而 布 局 混 乱 。 因此 ,如果要清除浮动应对相应的元素设置 clear属性 ,而不是 float。
2.浮动的应用举例
利用单个盒子浮动 ,可制作出图文混排及首字下沉等效果 。利用多个盒子浮动 ,则可制 作出水平导航条等效果 。
2.1 图文混排及首字下沉效果
果将一个盒子浮动 ,另一个盒子不浮动 ,那么浮动的盒子将被未浮动盒子的内容所环 绕 。如果这个浮动的盒子是图像元素 ,而未浮动的盒子是一段文本 ,那么就实现了图文混排 效果 。
html
<style>
img{
border:1px gray dashed; margin:10px 10px 10px 0;
padding:5px; float:left; / * 设置图像元素浮动 * /}
p{ margin:0;
font:14px/1.5 "宋体 "; text-indent: 2em; }
</style>
<img src= "images/sheshou .jpg" />
<p>在遥远古希腊的大草原中 , ... ... 这就是 "人马族 "。</p>
<p>人马族里唯独的 一个例外 --奇伦 ... ... </p>在图文混排的基础上让第一个汉字也浮动 , 同时变大 ,则出现了首字下沉的效果 。
如果将第一个段落浮动 ,再给段落添加边框 ,则出现了文章导读框效果 。
css
p{ margin:0; font-size:14px; line-height:1.5;
text-indent: 2em; }
p:first-child{ width:160px; float:left; / * 第 一个段落浮动 * /
margin:10px 10px 0 0;padding:10px;
border:3px gray double;background:#9BD;}
<p class= "p1">在遥远的古希腊大草原中 ... ... </p>
<p> "半人半兽 "代表着理性与非理性 ... ... </p>从以上 例子可以看出 , 网页中无论是图像还是文本 ,对于任何元素 ,在排版时都应 视为一个盒子 ,而不必在乎元素的内容是什么 。
2.2水平导航条
设置所有 a元素浮动 ,这是因为多个元素浮动 ,这些元素就会水平排列 。 当 然水平导航条一般不需设置宽度 , 可以把 width属性去掉。
html
<div id= "nav">
<a href= "# ">首 页</a><a href= "# ">中心简介</a>
... <a href= "# ">技术支持和服务</a>
</div>
css
#nav{ font-size: 14px;}
#nav a {
color: red; background-color: #9CF;
text-align: center; text-decoration: none;
padding:6px 10px 4px; border: 1px solid #39F;
float:left; / * 使 a 元素浮动 ,实现水平排列 * /}
#nav a+a{margin-left:5px;} / *设置第 2 到最后 一个 a 元素有 5px 的左间距 * /
#nav a:hover {color: white;background-color: #930;} / *设置前景色和背景色 * /• 本例使用了相邻选择器( #nava+a) 选中了除第 1个 a元素之外的其他 a元素 ,再 给它们设置左边距 ,这样就实现了第 一 个 a元素没有左边距 。
• 设置了浮动后元素将自动以块级元素显示 , 因此就不需要再对 # nava选择器添加 display:block属性了 , 因为这是多余的 。
2.3新闻栏目框
在网站的首页中 ,文字内容一般被组织成栏目框的形式 。 网站是按栏目组织内容的 , 因 此栏目框是最常见的网页界面元素 ,掌握栏目框的制作是网页制作中一项重要的基本功 。
栏目框可分为栏目标题栏和内容列表区 。对于栏目标题栏 ,常见的结构代码如下
html
<div class= "title">
<h2>基层动态</h2>
<span class= "more"><a href= "more .htm">更多 >></a></span>
</div>可见 ,栏目标题栏由两部分组成 , 即左边的栏目标题和右边的 "更多 "链接 , 因此需要两 个 HTML元素来存放 。为了将栏目标题栏组合成一个整体 ,使用了一个 div元素将这两个 元素包裹起来 。
对于 "更多 "链接 ,之所以将其放入一个 span元素中 ,是为了将 CSS布局样式和 CSS文 本样式分离 。 即对 span元素设置布局样式 ,而对 a元素设置文本样式 。span元素在这里起 到了布局元素的作用 。
对于内容列表区域 ,从语义上看 ,它是一个典型的无序列表 , 因此使用 ul元素来描述列 表区域 ,其结构代码如下 。
html
<ul class= "list_one">
<li><a href= "1.htm">计算机科学与技术系 ... ... </a><b>07-25</b></li>
...
<li><a href= "5.htm">会计系举办 2017 年 ... ... </a><b>07- 06</b></li> </ul>然后将标题栏代码和内容列表区域代码用 一 个 div元素包含起来 , 即得到栏目框的完 整结构代码如下 。
html
<div class= "news">
<div class= "title">
<h2>基层动态</h2>
<span class= "more"><a href= "more .htm">更多 >></a></span> </div>
<ul class= "list_one">
<li><a href= "1.htm">计算机科学与技术系举办毕业生</a><b>07-25</b></li>
...
<li><a href= "5.htm">会计系举办 2017 年专接本交流会</a><b>07- 06</b></li> </ul>
</div>提示 : 由于在网页中 一般有多个栏目框 , 因此对栏目框中的元素 一 般设置 class属性 , 而不设置id属性 ,从而使栏目框的样式代码可以被很多个风格相似的栏目框共用 。
完