一. 本节课学习目标。
- 掌握行属性标签以及块属性标签的特点。
- 掌握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>