一. 本节课学习目标。
- 掌握行属性标签以及块属性标签的特点。
- 掌握display属性的用法。
- 掌握浮动的作用以及用法。 ★重点
- 掌握清除浮动的方法。
- 能够通过html，css，盒模型，浮动进行复杂网页布局。
二. 行属性标签以及块属性标签特点。
根据标签特性进行分类：
- 行属性标签。 默认display：inline;
特点1：可以和其他行属性标签放置在同一行。 a, span, em, strong等。
特点2：行属性标签的区域大小只由内容来撑开，width和height属性是无效的。 - 块属性标签。 默认display: block;
特点1：独占一行。 Div,p,h1~h6,ol,ul,li等。
特点2：块属性标签宽度默认和父元素宽度保持一致，高度由内容撑开，但是可以通过width和height属性来更改宽高。 - 行内块属性标签。 默认 display:inline-block; 比如:img，input。
特点1：可以和其他行属性标签以及行内块属性标签放置在同一行。
特点2：可以通过css属性修改宽高，width和height两个属性是有效的。
解决的实质性问题：如果一个行属性标签（a，span）想要进行宽高的修改，就必须将display设置为inline-block。
三. Display属性的用法。
作用：用来更改元素的特性。 行属性标签更改为块属性标签，也可以反过来。
用法：直接给元素添加display属性即可， display: inline(行属性标签),block(块属性标签),inline-block(行内块属性标签), none(元素隐藏掉);
四. 浮动。
- 作用。
用来实现网页中水平布局的结构（让块元素可以放置在同一行）。 - 实现方式。
给想要放置在同一行的元素添加float属性即可。
注意：给元素添加上float属性之后，该元素会提升层级，脱离文档流。 会影响到之前在同一个层级上的元素，当前float的元素层级提升，之前的层级位置空出，后面的元素自动占据之前的位置，所以就看到覆盖的效果。 - 浮动原理。
a. 当给一个元素添加了float属性，该属性会给元素实现两个功能（1.可以提升层级 2.可以允许当前元素的这一行能够放置其他浮动元素了）。
b. Float的值left和right，决定的当前浮动元素放置在这一行时，放到什么位置，left最左边，right最右边。
c. 当一个元素浮动时，会先去查找前面有没有同级别的浮动元素，如果有，就往后放，如果放的时候，没有空间了，则被挤到下一行。当被挤到下一行时，当前元素的上边界会根据当前元素的浮动方向（left，right），保持和上一个浮动方向相同的元素的下边界重合。
当前元素是左浮动元素left，则会和上一个左浮动元素下边界重合。
当前元素是右浮动元素right，则会和上一个右浮动元素下边界重合。
注意：如果一个元素既可以使用左浮动，又可以使用右浮动时，一定要注意，使用哪个浮动方向不会影响自己，是影响的下一个浮动元素。
五. 浮动产生的问题以及解决办法。
- 影响兄弟元素布局。
- 父元素高度塌陷。
原因：当子元素添加float属性之后，元素浮动了，则会影响父元素动态识别子元素的高度，浮动元素的高度父元素无法识别。
解决方案1：给父元素指定一个高度即可。 但是这种方式不通用。
解决方案2：给父元素添加overflow:hidden;属性即可。
六. 浮动练习3-12宫格布局。
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12宫格 - 浮动</title>
<style type="text/css">
.wrap {
/* 水平居中 */
margin: 0 auto;
width: 500px;
/* border: 2px solid black; */
/* 处理因子元素浮动造成的父元素高度塌陷的问题 */
overflow: hidden;
}
.wrap>div {
font-size: 50px;
color: white;
text-align: center;
}
.green {
width: 100px;
height: 100px;
background-color: green;
/* 一行文字垂直居中 */
line-height: 100px;
/* 浮动 - 左 */
float: left;
}
.f6 {
width: 300px;
height: 100px;
background-color: yellow;
line-height: 100px;
/* 浮动 - 左 */
float: left;
}
.f7 {
width: 200px;
height: 200px;
background-color: lightblue;
line-height: 200px;
/* 浮动 - 右 */
float: right;
}
.f8 {
width: 150px;
height: 150px;
background-color: gray;
line-height: 150px;
/* 浮动 - 左 */
float: left;
}
.f9 {
width: 150px;
height: 150px;
background-color: black;
line-height: 150px;
/* 浮动 - 左 */
float: left;
}
.f10 {
width: 200px;
height: 150px;
background-color: cyan;
line-height: 150px;
/* 浮动 - 右 */
float: right;
}
.f11 {
width: 300px;
height: 100px;
background-color: red;
line-height: 100px;
/* 浮动 - 左 */
float: left;
}
.f12 {
width: 500px;
height: 100px;
background-color: blue;
line-height: 100px;
/* 浮动 - 左 */
float: left;
}
</style>
</head>
<body>
<!-- .f${$}*12 -->
<div class="wrap">
<div class="f1 green">1</div>
<div class="f2 green">2</div>
<div class="f3 green">3</div>
<div class="f4 green">4</div>
<div class="f5 green">5</div>
<div class="f6">6</div>
<div class="f7">7</div>
<div class="f8">8</div>
<div class="f9">9</div>
<div class="f10">10</div>
<div class="f11">11</div>
<div class="f12">12</div>
</div>
</body>
</html>
本节一些快捷方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
/* 属性的快速写法 */
/* 背景颜色 bc+tab*/
background-color: yellow;
/* 宽度 w值+tab */
width: 500px;
/* 高度 h值+tab */
height: 200px;
}
</style>
</head>
<body>
<!-- 1.生成一个div，div带一个class属性 .box+tab-->
<div class="box"></div>
<!-- 2.生成一个p，p带一个class属性 p.p1+tab-->
<p id="box">
</p>
</body>
</html>