web前端练习30----Css，布局（文档流，浮动）
一、文档流：
文档流处在网页的最底层， 它表示的是一个页面的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点：
块元素：
1. 块元素在文档流中会独占一行， 块元素会自上向下排列。
2. 块元素在文档流中默认宽度是父元素的100 % （铺满父元素）。
3. 块元素在文档流中默认高度被内容(或者子元素) 撑开（ 包裹内容）
内联元素：
1. 内联元素在文档流中只占自身大小， 会默认从左向右排列，如果一行中不足以容纳所有的内联元素， 则换到下一行，
继续自左向右。
2. 在文档流中，内联元素的默认宽度和高度被内容撑开（ 包裹内容）。
3. 在文档流中，内联元素设置宽高无效。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
.box2 {
background-color: yellow;
}
span {
width: 100px;
height: 100px;
background-color: turquoise;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"><span>人的生命是有限的</span></div>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
</body>
</html>二、元素脱离文档流后的特点：
块级元素脱离文档流以后：
1. 不会独占一行
2. 宽度高度都被内容(或者子元素)撑开
3. 可以设置宽高
内联元素脱离文档流以后：
1.会变成块级元素（1. 不会独占一行2. 宽度高度都被内容撑开3. 可以设置宽高）
开启 浮动，绝对定位，固定定位 都会使元素脱离文档流。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box1 {
height: 100px;
background-color: yellow;
float: left;
}
.box2 {
background-color: turquoise;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: violet;
float: left;
}
</style>
</head>
<body>
<div class="box1">zhh1</div>
<!-- 块级元素，宽高被子元素撑开 -->
<div class="box2">
<div style="width: 100px;height: 100px; background-color: blueviolet;">box4</div>
</div>
<!-- 内联元素 -->
<span class="box3">zhh3</span>
</body>
</html>三、浮动
使用float来使元素浮动， 从而脱离文档流
可选值：
none， 默认值，不浮动，元素默认在文档流中排列
left， 元素会立刻脱离文档流， 向父元素左上侧浮动
right， 元素会立即脱离文档流， 向父元素右上侧浮动
当为一个元素设置浮动（ float属性是一个非none的值） 的特点
1. 元素会脱离文档流， 元素脱离文档流以后， 他下边的元素会立即向上移动
2. 元素浮动以后， 会尽量向父元素的左上角， 或者右上角移动，
直到遇到父元素的边框或者其他浮动元素,会停止移动
3. 如果浮动元素上边是一个没有浮动的块元素， 则浮动元素不会高过块元素
4. 浮动元素不会高过他上边开启浮动的兄弟元素， 最多一样高
5. 浮动元素不会盖住文字， 文字会自动环绕在浮动元素的周围,
所以我们可以通过浮动来设置文字环绕图片的效果
代码示例1：浮动特点1-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box1 {
width: 600px;
height: 100px;
background-color: brown;
float: left;
}
.box2 {
width: 600px;
height: 100px;
background-color: aqua;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
float: right;
;
}
</style>
</head>
<body>
<!-- <div style="margin-top: 100px; height: 500px; background: yellowgreen;">-->
<div class="box1">zhh1</div>
<div class="box2">zhh2</div>
<!-- box3不会高于box2 -->
<div class="box3">zhh3</div>
<!-- </div>-->
</body>
</html>代码示例2：浮动特点5，文字环绕图片的效果
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.touxiang {
width: 145px;
height: 145px;
padding-right: 10px;
padding-bottom: 2px;
float: left;
}
</style>
</head>
<body>
<img class="touxiang" src="http://img0.imgtn.bdimg.com/it/u=1426019990,2186068774&fm=26&gp=0.jpg">
<div>
如果你是一滴水，你是否滋润了一寸土地？如果你是一线阳光，你是否照亮了一分黑暗？
如果你是一颗粮食，你是否哺育了有用的生命？ 如果你是一颗最小的螺丝钉，
你是否永远守在你生活的岗位上？ 如果你要告诉我们什么思想，你是否在日夜宣扬那最美丽的理想？
你既然活着，你又是否为了未来的人类生活付出你的劳动，使世界一天天变得更美丽？
我想问你，为未来带来了什么？在生活的仓库里，我们不应该只是个无穷尽的支付者。
</div>
</body>
</html>
上一篇： 架构师的六大设计原则