我要精通前端-布局方式理解总结

一、浮动

1、传统网页布局的三种方式

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：
在这里插入图片描述

1.普通流（标准流）
2.浮动
3.定位

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式，合理的利用三种方式搭配然后组合页面进行页面的布局调整。

2、标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列，就是按照这个元素本身给一些样式，让他直接在原有的文档流中进行展示

昨天已经了解了这个块级元素和行内元素的区别了：

块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等（inline-block除外）

以上都是标准流布局，标准流是最基本的布局方式,就是说在文档中去操作布局方式，进行调整。

3、为什么需要浮动？

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式，可以想象成文档流是1楼，如果进行了浮动后，自动到2楼的位置，这个时候就已经脱离了1楼可以进行样式调整.

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

4、什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：
选择器 { float: 属性值; }

5、浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)，例如说，父级元素没有设置高，高度完全是由这个子元素的高度撑起来的，那么这个时候如果有子元素，浮动了，那么父元素的大小也会受到影响

2、浮动的元素会一行内显示并且元素顶部对齐。其实这么说也不准确，尤其是同级的上一个子元素如果不是浮动的，还在标准流中的时候，那么这个你设置的浮动对象可能就是在当前的位置浮动起来，并不会浮动到标准流的右侧。

注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3、浮动的元素会具有行内块元素的特性,但是是可以设置宽和高的
4、浮动元素的大小根据内容来决定
5、浮动的盒子·是没有缝隙的
6、浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置, 我们网页布局一般采取的策略是：先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置.

二、浮动布局注意点

1、浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2、一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

三、清除浮动

1、为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

2、清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
父级有了高度，就不会影响下面的标准流了

3、清除浮动样式

选择器{clear:属性值;}
我们实际工作中，几乎只用 clear: both;

其实仔细想一想，为什么要清除浮动其实就是想解决这个元素浮动起来后，父级就会受到影响，就是因为他的子元素都是脱离了他。

那清除浮动也就有很多的方式了
1.增加父元素的高度
你想解决子元素对父元素的影响问题，也可以直接给父元素设置一些样式内容

.outer{
			background: grey;
			width: 100%;
			height: 200px;
		}
		.text1{
			background: red;
			width: 30px;
			height: 30px;
			float: left;
		}
		.text2{
			background: yellow;
			width: 40px;
			height: 40px;
			float: left;
		}
		.text3{
			background: blue;
			width: 50px;
			height: 50px;
			float: left;
		}

<div class="outer">
	<div class="text1">111</div>
	<div class="text2">222</div>
	<div class="text3">333</div>
</div>

之前
在这里插入图片描述
增加宽度之后

2.使用clear
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上。

.outer{
			background: grey;
			width: 100%;
		}
		.text1{
			background: red;
			width: 30px;
			height: 30px;
			float: left;
		}
		.text2{
			background: yellow;
			width: 40px;
			height: 40px;
			float: left;
		}
		.text3{
			background: blue;
			width: 50px;
			height: 50px;
			float: left;
		}
		.clear{
			clear: both;
		}

<body>
<div class="outer">
		<div class="text1">111</div>
		<div class="text2">222</div>
		<div class="text3">333</div>
		<div class="clear"></div>
</div>
</body>

之前
在这里插入图片描述
清除浮动之后

2.使用伪元素进行clear

.outer:after{
	clear: both;
	display: block;
	content: " ";
}
.text1{
	background: red;
	width: 30px;
	height: 30px;
	float: left;
}
.text2{
	background: yellow;
	width: 40px;
	height: 40px;
	float: left;
}
.text3{
	background: blue;
	width: 50px;
	height: 50px;
	float: left;
}

<div class="outer">
	<div class="text1">111</div>
	<div class="text2">222</div>
	<div class="text3">333</div>
</div>

其实这个的原理就是说在outer的子内容中增加一个新伪的子节点，然后在content属性中放置一个空的内容，然后clear: both，相当于也是在子节点中进行了清除

4、总结

为什么需要清除浮动？
1.父级没高度。
2.子盒子浮动了。
3.影响下面布局了，我们就应该清除浮动了。

二、定位

1、定位的组成

所谓定位，简单的来说就是将盒子定在某一个位置。所以定位其实也是按照规则进行摆盒子，不要想的太复杂其规则为：
定位 = 定位模式 + 边偏移。

1.1、定位模式
定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为五个：

1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
2.fixed 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3.relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
3.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
4.sticky 粘性定位。根据用户的滚动位置进行定位。

1.2、偏移量
元素具备了定位属性之后，可以使用的顶部top，底部bottom，左侧left和右侧right属性定位(static除外)。他们也有不同的工作方式，这取决于定位方法。

属性说明
position 指定元素的定位类型。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。

2、静态定位 static(默认)

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

3、相对定位 relative(重点)
relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点，也是最让人迷糊的一个地方，现在让我们来做个测试，我想大家都会明白的：

1、初始未定位

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            #first {
                width: 200px;
                height: 100px;
                border: 1px solid red;
            }

            #second {
                width: 200px;
                height: 100px;
                border: 1px solid blue;
            }
        </style> 
    </head>
    <body> 
        <div id="first">first</div> 
        <div id="second">second</div> 
    </body>
</html>

在这里插入图片描述
2、我们修改first元素的position属性：

<style type="text/css">
    #first {
        width: 200px;
        height: 100px;
        border: 1px solid red;
        /*增加相对定位  position: relative*/
        position: relative;
        top: 20px;
        left: 20px;
    }

    #second {
        width: 200px;
        height: 100px;
        border: 1px solid blue;
    }
</style>

在这里插入图片描述

虚线是初始的位置空间，现在看明白了吧，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。

那好，我们知道了top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移，那么margin / padding会让该文档空间产生偏移吗？答案是肯定的，我们一起来做个试验吧：

3、添加margin属性：

<style type="text/css">
    #first {
        width: 200px;
        height: 100px;
        border: 1px solid red;
        position: relative;
        top: 20px;
        left: 20px;
        /* add margin*/
        margin: 20px;
    }

    #second {
        width: 200px;
        height: 100px;
        border: 1px solid blue;
    }
</style>

在这里插入图片描述

设置margin：20px后：

对比一下，是不是就很清晰了，我们先将first元素外边距设为20px，那么second元素就得向下偏移40px，所以margin是占据文档空间！

相对定位总结：
相对定位相对的是它原本在文档流中的位置而进行的偏移
元素不会脱离文档流，原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

4、绝对定位 absolute(重点)

所谓绝对定位是元素在移动位置时，是相对于它祖先元素来说的。

使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位。和元素相差8px左右。原因是body有一个浏览器提供的默认样式margin:8px;

我们来看下效果：

添加absoulte属性：

<html> 
    <style type="text/css">
        html {
            border: 1px dashed green;
        }

        body {
            border: 1px dashed purple;
        }

        #first {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            position: relative;
        }

        #second {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style> 

    <body> 
        <div id="first">relative</div> 
        <div id="second">absoult</div> 
    </body> 
</html>

在这里插入图片描述

绝对定位一般和相对定位一起使用(子绝父相)

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .nofather {
                /* 使用绝对定位 */
            position: absolute;
            top: 0;
            left: 100px;
        }

        .father {
            width: 200px;
            height: 200px;
            /* 父元素使用相对定位 */
            position: relative;
            left: 100px;
        }

        .son {
            /* 子元素使用绝对定位 */
            position: absolute;
            left: 50px;
            top: 30px;
        }
    </style>
</head>

<body>
    <div class="nofather">我没有父元素</div>

    <h1>内容</h1>
    <h1>内容</h1>
    <h1>内容</h1>
    <h1>内容</h1>
    <div class="father">
        <div class="son">我有父元素</div>
    </div>
    <h1>内容</h1>
    <h1>内容</h1>
    <h1>内容</h1>
    <h1>内容</h1>
    <h1>内容</h1>

</body>

</html>

在这里插入图片描述

从运行结果上可以看出，使用绝对定位，如果没有父元素则是相对于html进行定位，如果有父元素，父元素需要使用相对定位，子元素使用绝对定位，子元素则会相对于父元素进行定位。并且使用绝对定位，元素会脱离文档流，后面的元素会自动进行填补。

绝对定位总结：
绝对定位不会保留原来的位置（脱离文档流），那后面盒子就会往上占了它的位置；
如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位；
如果祖先元素有定位（可以是相对、绝对或者固定定位），则以最近的已经定位的祖先元素为基准移动位置。
子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。
5、固定定位 fixed(重点)
固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>

    <style>
        .fixed {
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 使用固定定位 */
            position: fixed;
            top: 50px;
            left: 300px;

        }
    </style>
</head>

<body>
    <div class="fixed">
    </div>

    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>

</body>

</html>

在这里插入图片描述

固定定位总结：
固定定位是参照浏览器窗口的左上角进行偏移。

使用固定定位之后，元素会脱离标准文档流。

使用固定定位之后，在滚动浏览器页面时，元素不会随着窗口的滚动而滚动。

6、粘性定位 sticky
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sticky 定位</title>
        <style>
            div.sticky {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
                padding: 5px;
                background-color: #cae8ca;
                border: 2px solid #4CAF50;
            }
        </style>
    </head>

    <body>
        <p>尝试滚动页面。</p>
        <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

        <div class="sticky">我是粘性定位!</div>

        <div style="padding-bottom:2000px">
            <p>滚动我</p>
            <p>来回滚动我</p>
            <p>滚动我</p>
            <p>来回滚动我</p>
            <p>滚动我</p>
            <p>来回滚动我</p>
        </div>
    </body>
</html>

在这里插入图片描述

粘性定位总结：
以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效
有时候设置会发现粘性定位不起作用，又找不到原因，可以看看有没有以下几点原因：

父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
7、重叠元素
在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重叠元素</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 0;
            /* 值越大，元素就会显示在其他元素上面 */
            z-index: 999;

        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            top: 150px;
            left: 150px;
        }
    </style>
</head>

<body>
    <div class="div1"></div>

    <div class="div2"></div>
</body>

</html>

在这里插入图片描述

注意：

z-index 仅能在定位元素上生效(重点)
如果两个元素为父子关系，则z-index也不生效
总结：
position 属性规定应用于元素的定位方法的类型。

定位模式是否脱离文档流移动位置是否常用
static 静态定位否不能使用边偏移很少
relative 相对定位否(占有原来位置) 相对于自身位置偏移常用
absolute 绝对定位是(不占有原来位置) 带有定位的父级常用
fixed 固定定位是(不占有原来位置) 浏览器可视区常用
sticky 粘性定位否(占有原来位置) 浏览器可视区偶尔用
我们学习定位时，一定要记住相对定位、固定定位、绝对定位两个大的特点：
是否占有位置（是否脱离文档流）
以谁为基准进行移动位置。
学习定位，重点要学会子绝父相，这是开发中最常用的。