web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）

最新推荐文章于 2022-11-21 23:03:04 发布

zhaihaohao1

最新推荐文章于 2022-11-21 23:03:04 发布

阅读量678

点赞数

分类专栏： web前端2018

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/103441942

版权

本文详细介绍了CSS布局的相关概念，包括文档流、浮动、清除浮动、浮动高度塌陷及其解决方案。讲解了浮动元素的特点，如何通过float、clear属性控制布局，并讨论了BFC（块格式化上下文）在解决高度塌陷问题中的应用。同时，文章还涵盖了垂直外边距重叠的问题及其解决方法，并探讨了定位（relative、absolute、fixed）的原理与用法。最后，总结了元素居中技巧和Flex布局的基本概念与属性，提供了多个布局实例。

摘要由CSDN通过智能技术生成

一、文档流：
文档流处在网页的最底层，它表示的是一个页面的位置
我们所创建的元素默认都处在文档流中

元素在文档流中的特点：
块元素：
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>

三、浮动

3.1浮动的使用：

使用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>

3.2、清除浮动元素对当前元素的影响

由于元素浮动的影响，后面的兄弟元素（当前元素），会整体向上移动，会移动到浮动元素的下面。
       我们有时希望清除掉其他浮动元素对当前元素的影响，这时可以使用clear来完成

      clear:清除浮动元素对当前元素的影响
      可选值：
      none 默认值，不清楚浮动
      left 清除左侧浮动元素对当前元素的影响
      right 清除右侧浮动元素对当前元素的影响
      both 清除两侧浮动元素对当前元素的影响（清除对本元素影响最大的元素影响）

      清除浮动以后，元素不会移动到浮动元素的下面，跟在浮动元素的后面

代码示例：

<!DOCTYPE html>
<html>
	<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></title>
		<style type="