CSS基础

文章目录

1.浮动
- 1.1盒子浮动后的特点
- 1.2清楚浮动元素的影响
- 1.3清除浮动影响的方法
2.浮动的应用举例
- 2.1 图文混排及首字下沉效果
- 2.2水平导航条
- 2.3新闻栏目框

网页是一种在浏览器上展示的平面设计作品 , 网页布局就是将网页元素合理排列在网页版面上 ,达到美观大方、井然有序的效果。使用 CSS进行网页布局 ,本质是利用标准流、浮动或定位属性的性质对网页布局元素进行合理排列。

1.浮动

在标准流中 ,块级元素的盒子都是上下排列 ,行内元素的盒子都是左右排列 ,如果仅按照标准流的方式进行排列 , 就只有这几种可能性 , 限制太大。CSS的制定者也想到了这样排列限制的问题 , 因此又给出了浮动和定位方式 ,从而使排版的灵活性大大提高。
如果希望相邻的块级元素盒子左右排列(所有盒子浮动)或者希望一个盒子被另一个盒子中的内容所环绕(一个盒子浮动)作出图文混排的效果 ,最简单的实现办法就是运用浮动 (float)属性使盒子在浮动方式下定位。

1.1盒子浮动后的特点

在标准流中 ,一个块级元素在水平方向会自动伸展 ,在它的父元素中占满整个一行 ; 而
在竖直方向和其他元素依次排列 , 不能并排。使用 “浮动 ”方式后 ,这种排列方式就会发生改变。
CSS中有一个 float属性 , 默认值为 none,也就是标准流通常的情况 , 如果将 float 属性的值设为 left或 right,元素就会向其父元素的左侧或右侧靠紧 , 同时盒子的宽度不再伸展 , 而是收缩 , 在没设置宽度时 , 会根据盒子里面的内容来确定宽度。
下面通过一个例子来演示浮动的作用 , 基础代码如下 ,这个代码中没有使用浮动。

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>

一个盒子浮动

.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盒子的存在。

多个盒子浮动

.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代码。

.son1{  float:right; }
.son2{  float:left;  }
.son3{  clear:both;  }

可以看到 ,对 Box-3清除浮动(clear:both;) ,表示 Box-3的左右两边都不允许有浮动的元素 , 因此 Box-3移动到了下一行显示。
实际上 ,clear属性既可以用在未浮动的元素上 ,也可以用在浮动的元素上。

对 Box-3同时设置清除浮动和浮动。

.son3{clear:both; float:left;}

可看到 Box-3的左右仍然没有浮动的元素。
由此可见 ,清除浮动是清除其他盒子浮动对该元素的影响 ,而设置浮动是让元素自身浮动 ,两者并不矛盾 , 因此可同时设置元素清除浮动和浮动。
由于上下 margin叠加现象只会发生在标准流的情况下 , 而浮动方式下盒子的任何 margin都不会叠加 ,所以设置盒子浮动并清除浮动后 ,上下两个盒子的 margin不叠加。Box-3到 Box-1之间的垂直距离是 20px,即它们的 margin之和。

1.3清除浮动影响的方法

在网页布局中 ,浮动元素会影响其他元素的正常排列 ,导致网页元素不能按我们的意愿显示。因此设置元素浮动后应尽量清除该元素浮动对其他元素的影响。对于下列两种情形应采用不同的方法清除浮动。

来自子元素的浮动
如果一个父元素内所有的子元素都浮动 ,一定要记得对这个父元素做清除浮动处理 ,否则该父元素下面的元素会顶到浮动元素的位置上去。

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)专门用来清除浮动 ,如果不愿添加新元素 , 可使用伪元素的方法来设置清除浮动。下面的代码在父元素内部的末尾添加一个伪元素。

.father:after { content: ''; display: table; clear: both; }
.father { * zoom: 1; }         / * 兼容 IE 6、IE 7,如不需要可去掉 * /

注意 : 对于一个父元素内的所有子元素都浮动 , 一种常见错误的做法是设置父元素的高度来掩饰浮动对它的影响 , 如 . father{height:50px;} , 这样做只是掩饰了浮动 , 并没有清除浮动的影响 , 虽然使父元素看起来正常了 ,但父元素下面的元素仍然会顶到上面去。
因此 ,在 CSS布局时 ,如果发现一个元素移动到它原来位置的左上方或右上方 ,并且和其他元素发生了重叠 ,则很可能是受到了其他盒子浮动的影响。

来自兄弟元素的浮动
如果一个元素前面的兄弟元素浮动,则可以对紧邻该浮动元素的后一个元素做清除浮动处理。例如 ,不希望 Box-3受前面兄弟元素浮动的影响 ,则可对 Box-3清除浮动。

对 Box-3清除浮动

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>

除了直接对后面的元素清除浮动外 ,还可以增加一个元素专用于清除浮动。

<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 图文混排及首字下沉效果

果将一个盒子浮动 ,另一个盒子不浮动 ,那么浮动的盒子将被未浮动盒子的内容所环绕。如果这个浮动的盒子是图像元素 ,而未浮动的盒子是一段文本 ,那么就实现了图文混排效果。

<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>

在图文混排的基础上让第一个汉字也浮动 , 同时变大 ,则出现了首字下沉的效果。

如果将第一个段落浮动 ,再给段落添加边框 ,则出现了文章导读框效果。

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属性去掉。

<div id= "nav">
<a href= "# ">首 页</a><a href= "# ">中心简介</a>
… <a href= "# ">技术支持和服务</a>
</div>

#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新闻栏目框

在网站的首页中 ,文字内容一般被组织成栏目框的形式。网站是按栏目组织内容的 , 因此栏目框是最常见的网页界面元素 ,掌握栏目框的制作是网页制作中一项重要的基本功。

栏目框可分为栏目标题栏和内容列表区。对于栏目标题栏 ,常见的结构代码如下

<div class= "title"><h2>基层动态</h2><span class= "more"><a href= "more .htm">更多 &gt;&gt;</a></span> 
</div>

可见 ,栏目标题栏由两部分组成 , 即左边的栏目标题和右边的 “更多 ”链接 , 因此需要两个 HTML元素来存放。为了将栏目标题栏组合成一个整体 ,使用了一个 div元素将这两个元素包裹起来。
对于 “更多 ”链接 ,之所以将其放入一个 span元素中 ,是为了将 CSS布局样式和 CSS文本样式分离。即对 span元素设置布局样式 ,而对 a元素设置文本样式。span元素在这里起到了布局元素的作用。

对于内容列表区域 ,从语义上看 ,它是一个典型的无序列表 , 因此使用 ul元素来描述列表区域 ,其结构代码如下。

<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元素包含起来 , 即得到栏目框的完整结构代码如下。

<div class= "news">  <div class= "title">  <h2>基层动态</h2>  <span class= "more"><a href= "more .htm">更多 &gt;&gt;</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属性 ,从而使栏目框的样式代码可以被很多个风格相似的栏目框共用。

完