H5前端开发学习笔记——0x14浮动
2018-07-09 本文已影响0人
夜莺之刃
浮动
- 课时121 网页布局方式(掌握)
- 课时122 浮动流基本概念(掌握)
- 课时123 浮动元素脱标(理解)
- 课时124 浮动元素排序规则(理解)
- 课时125 浮动元素贴靠现象(掌握)
- 课时126 浮动元素字围现象(理解)
- 课时127 浮动练习上(理解)
- 课时128 浮动练习中(理解)
- 课时129 浮动练习下(理解)
网页布局方式
网页的分布方式其实就是指浏览器是如何对网页中的元素进行排版的；
基本上分为以下几种：
1.标准流(文档流/普通流)排版方式
其实浏览器默认的排版方式就是标准流
- 在css中讲元素分为三类，为块级元素、行内元素、行内块级元素；
- 它有两种排版方式，为垂直排版和水平排版
- 垂直排版：块级元素
- 水平排版：行内元素和行内块级元素
2.浮动流排版方式
- 它是一种半脱离标准流的一种排版方式
- 他很自由一种排版方式——水平排版
- 他只能做到左对齐和右对齐
注意点
- 他无法做到居中对齐，也就是没有center这个取值
- 在浮动流中，是不可以使用margin：0 auto这个属性，是无效的
特点
- 在浮动流中是不区分块级元素、行内元素和行内块级元素，都是可以水平排版的
- 在浮动流中，分块级元素、行内元素和行内块级元素都可以设置宽高
- 综上所述，浮动流中的元素和标准流中的行内块级元素是很像的
3.定位流排版方式
浮动元素脱标
1.什么是浮动元素的脱标？
脱标：脱离标准流
当我们的某个元素浮动后，这个元素看上就就像是被标准流删除一样
2.浮动元素脱标之后有啥影响
若前一个元素浮动了，而后一个没浮动，前一个元素就会改制后面的一个元素
浮动元素排序规则
1.相同方向上
先浮动元素会显示在前面
2.不同方向上的浮动
各自方向的浮动会找他们各自的浮动
3.浮动元素浮动之后的位置
由浮动元素在浮动之前的标准楼中的位置来确定
浮动元素贴靠现象
当父元素足够大的话，子元素都是可以按照设置放开，当父元素不足以让最后一个元素存在的时候，最后一个元素会向他之前的元素的前一个元素身上贴靠，当所有子元素都贴靠一遍还是不够显示的话，就贴在父元素身上
浮动元素字围现象
看我的html案例，这个效果可以做成图文混搭的效果
这里我贴一下我自己的一个浮动练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>浮动练习上</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css"/>
<script src="main.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.header{
height: 100px;
width: 980px;
margin: 0 auto;
}
.header .header1{
width: 250px;
height: 100px;
background-color: pink;
float: left;
}
.header .header2{
width: 150px;
height: 50px;
background-color: skyblue;
float: right;
}
.header .header3{
width: 650px;
height: 50px;
background-color: purple;
float: right;
}
.content{
height: 400px;
width: 980px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
}
.content .con1{
width: 320px;
height: 400px;
background-color: yellow;
float: left;
}
.content .con2{
width: 650px;
height: 400px;
float: right;
}
.content .con2 .top{
width: 650px;
height: 350px;
}
.content .con2 .top .left{
width: 400px;
height: 350px;
float: left;
}
.content .con2 .top .left .top1{
width: 400px;
height: 200px;
background-color: rgb(255, 8, 144);
}
.content .con2 .top .left .bottom2{
width: 400px;
height: 140px;
background-color: rgb(0, 174, 255);
margin-top: 10px;
}
.content .con2 .top .right{
width: 240px;
height: 350px;
background-color: rgb(7, 221, 61);
float: right;
}
.content .con2 .bottom{
width: 650px;
height: 40px;
background-color: rgb(102, 60, 13);
margin-top: 10px;
}
.footer{
height: 40px;
width: 980px;
background-color: rgb(255, 145, 0);
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="header1">250*100</div>
<div class="header2">150*50</div>
<div class="header3">650*50</div>
</div>
<div class="content">
<div class="con1">320*400</div>
<div class="con2">
<div class="top">
<div class="left">
<div class="top1">400*200</div>
<div class="bottom2">400*140</div>
</div>
<div class="right">240*350</div>
</div>
<div class="bottom">650*40</div>
</div>
</div>
<div class="footer">980*40</div>
</body>
</html>
