一. 学习目标。
- 掌握浮动的作用以及用法。
- 了解浮动产生的问题。
- 掌握清除浮动的方法。
- 能够通过html，css，盒模型，浮动进行复杂网页布局。
- 掌握nth-child和nth-of-type选择器
二. 浮动。
-
作用。
解决块元素同行排列的问题。 （解决网页的布局中左右布局的问题）
Ps：因为块元素默认是独占一行的，无法在同一行显示。
-
实现方式。
给元素添加float属性即可， left和right两个值。
-
浮动原理。
3.1 元素浮动之后，该元素可以和其他浮动元素放置在同一行，并且会提升层级。
3.2 元素浮动之后，该元素的位置，要由上一个浮动元素的位置来决定，如果上面的浮动元素后有空间，则放置在同一行，如果没有多余空间，则被挤到下一行。
3.3 如果该元素之前没有浮动元素，则该元素会在自己这一行显示。
3.4 当元素被挤到下一行之后，该元素的位置会根据该元素浮动的方向和上一个相同浮动方向的元素的位置决定。
比如：该元素是左浮动，则该元素在下一行的位置由上一个左浮动元素决定，也就是该元素上边界挨着上一个左浮动元素的下边界。
该元素是右浮动，则该元素在下一行的位置由上一个右浮动元素决定，也就是该元素上边界挨着上一个右浮动元素的下边界。
三. 浮动产生的问题以及解决办法。
-
影响兄弟元素布局。
原因：元素浮动之后，会脱离文档流，提升层级。
解决方案: 给需要清除浮动影响的兄弟标签 设置 clear:both;
-
父元素高度塌陷。
原因：当一个元素中的子元素浮动之后，父元素就无法自动获取子元素内容高度，则父元素没有高度了。
解决方案：给父元素添加属性， overflow:hidden;
四. 浮动练习1-左右布局。
效果图：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
#one{
width: 200px;
height: 100px;
background-color: red;
float: left;
}
#two{
width: 400px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div id="one">one</div>
<div id="two">two</div>
</body>
</html>
五. 浮动练习2-左中右布局。
效果图：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
#one{
width: 200px;
height: 100px;
background-color: red;
float: left;
}
#two{
width: 400px;
height: 200px;
background-color: green;
float: left;
}
#three{
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</body>
</html>
六.nth-child和nth-of-type选择器
E:nth-child 查找E以及和E同级标签,不区别类型! E可以是id或者class或者标签名选择器
E:nth-of-type 查找E以及和E同级并且类型一致的标签. E可以是id或者class或者标签名选择器
/*------------ nth-child系列 -----------------*/
ul li:first-child{
background-color: red;
}
li:last-child{
background-color: orange;
}
/*指定标签 使用编号 从1开始
1.指定编号
2. 2n even 偶数
3. 2n+1或者2n-1 或者odd 奇数位置
4. 3n 4n ....
* */
li:nth-child(2n){
background-color: yellow !important;
}
/*------------ nth-of-type系列 -----------------*/
li:first-of-type{
}
li:last-of-type{
}
li:nth-of-type(2n){
}
/*nth-child和nth-of-type的最大区别就是:
nth-child不会进行标签分类,只是从第一个标签开始查找!
nth-of-type 会先根据标签进行分类,然后再将分类后的标签设置编号从1开始,进行查找!!!
其他情况用法类似!!!
*/
</style>
</head>
<body>
<ul>
<li>列表1</li>
<p>段落1</p>
<li>列表2</li>
<p>段落2</p>
<p>段落3</p>
<li>列表3</li>
<li>列表4</li>
<p>段落4</p>
<li>列表5</li>
<li>列表6</li>
<p>段落5</p>
<li>列表7</li>
<li>列表8</li>
</ul>
</body>
