02-前端开发——CSS传统布局方式_传统样式布局-CSDN博客

本文链接：https://blog.csdn.net/abraham_ly/article/details/109558844

前端开发——CSS传统布局方式

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

所谓的标准流就是标签按照规定好的默认方式排列。块级元素独占一行，从上至下排列；行内元素按照顺序从左到右排列，碰到父元素便于则自动换行。

二、浮动（float）

1、什么是浮动？

CSS中的 Float（浮动），会使元素向左或向右移动，其周围的其他元素也会重新排列，Float（浮动）在盒子布局的时候会派上很大的用场。

2、为什么需要浮动？

在我们布局的时候，很多布局的效果，往往标准流在很多时候没有办法完成，比如盒子水平有规律的排列，或者其他方式排列，虽然行内块元素可以使块级元素有规律的排列，但是他们呢彼此的之间会有缝隙，那么这些缝隙会干扰我们正常的布局，虽然内外边距可以帮助我们弄好他们，但是很多时候都会存在外边距合并等诸多问题，所以为了解决以上两个问题，我们就需要使用Float（浮动）来完成布局。

3、书写格式

选择器 {
	float：属性值；
}
/*
属性值：
	1、left  左浮动
	2、right 右浮动
	3、none  不浮动（默认）
*/

4、浮动的特性

浮动后的元素脱离了标准流的控制，我们称这个现象为 “脱标”
浮动后的元素会一行显示，并且元素顶部对齐，当父元素宽度不够时，后另起一行
浮动后的元素具有行内块元素的特性
浮动后的元素不会保留再原有的位置，并且它将不占有地方，而是漂在盒子中，而其标准流元素则会顶上来

5、浮动布局注意点

在网页布局的时候，我们尽量让浮动子元素和标准流父元素搭配使用

说明：首先标准流父盒子排成上下位置，紧接着内部的子元素采用浮动的方式排列成左右位置
一个父元素里面有若干个子元素，其中一个子元素浮动了，理论上其他的兄弟元素也应进行浮动

6、清除浮动

1、为什么要清除浮动？

① 当父元素中的某些子元素参与了浮动，那么他们，将脱离标准流的控制，此时标准流的元素将占用他们原有的位置

② 一般我们在做网页布局的时候，父盒子往往不会给高度，那么当子元素参与浮动后，父盒子高度崩塌了，因为他们没有撑开父元素，并且还有影响浮动下边的标准流。

2、清除浮动的本质

① 消除元素浮动后对标准流元素造成的影响

② 如果父元素已经有了高度，那么此时就不需要清除浮动，否则将清除浮动，这样就可以将父盒子的高度撑开

③ 清除浮动之后，父元素就会根据浮动的子元素自动检测高度，那么父元素有了高度，那么就不会影响父元素下的标准流元素

3、清除浮动的语法格式

选择器 {
	clear:属性值；
}
/*
	属性值：
		1、left   清除左侧浮动的影响
		2、right  清除右侧浮动的影响
		3、both   同时清除左右两侧的浮动影响（开发常用）
*/

7、清除浮动的方法

额外标签法（隔墙法）——W3C推荐

**优点：**通俗易懂，容易掌握

**缺点：**添加了无意义的标签，有违结构与表现的分离，在后期维护中将是噩梦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动--额外标签法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*空标签的属性*/
        .box .clear {
            clear: both;
        }
        /* 父元素 */
        
        .box {
            width: 800px;
            margin: 0 auto;
            /* border: 1px solid blue; */
        }
        
        .box .left {
            float: left;
            width: 300px;
            height: 200px;
            background-color: red;
        }
        
        .box .center {
            float: left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        
        .foot {
            height: 100px;
            padding-left: 10px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="center"></div>
		/*在浮动元素的末尾添加一个空的标签*/
        <div class="clear"></div>
    </div>
    <div class="foot"></div>
</body>
</html>

父级添加 overflow 属性

优点：代码简洁，不存在结构和语义化问题

**缺点：**内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 父元素 */
        
        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
            /*清除子元素浮动*/
            overflow: hidden;
        }
        
        .box .left {
            float: left;
            width: 300px;
            height: 200px;
            background-color: red;
        }
        .box .center {
            float: left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        .foot {
            height: 100px;
            padding-left: 10px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="center"></div>
    </div>
    <div class="foot"></div>
</body>
</html>

父级添加：after 伪元素（额外标签法升级版）

**优点：**没有新增标签，结构简单

**缺点：**照顾低版本的浏览器

代表网站：淘宝、百度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*清除浮动*/
        .clearfix:after {
            content: "";
            /*使生成的元素以块级元素显示，占满剩余空间*/
            display: block;
            /*避免生成内容破环原有布局的高度*/
            height: 0;
            clear: both;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
        }
        
        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
            overflow: hidden;
        }
        
        .box .left {
            float: left;
            width: 300px;
            height: 200px;
            background-color: red;
        }
        
        .box .center {
            float: left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        
        .foot {
            height: 100px;
            padding-left: 10px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="left"></div>
        <div class="center"></div>
        <div class="center"></div>
    </div>
    <div class="foot"></div>
</body>
</html>

父级添加双伪元素

**优点：**代码更简洁

**缺点：**照顾低版本浏览器，比如：IE6~IE7

**代表网站：**腾讯、小米

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*清除浮动*/
        .clearfix:after,
        .clearfix::before {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
        
        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
            overflow: hidden;
        }
        
        .box .left {
            float: left;
            width: 300px;
            height: 200px;
            background-color: red;
        }
        
        .box .center {
            float: left;
            width: 300px;
            height: 200px;
            background-color: orange;
        }
        
        .foot {
            height: 100px;
            padding-left: 10px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="left"></div>
        <div class="center"></div>
        <div class="center"></div>
    </div>
    <div class="foot"></div>
</body>
</html>

三、定位（position）

1、什么是定位？

定位是让子元素自由的在某个父元素内占有一定的位置，或者固定在盒子的某个位置，并且压住其他的盒子，实现我们想要的效果或者说布局。

2、为什么需要定位？

1、在我们进行页面布局的时候，时常会遇到一些盒子位置错乱，未能达到我们期望的效果，因此需要通过css定位来解决这个问题。

2、当我们滚动浏览器窗口的时候，某个元素会固定在浏览器窗口的某个区域，而其他元素跟随滚动而下滑，所以为了实现这个效果，我们需要定位。

3、定位的组成

1、按照定位的方式去摆放或者移动盒子

2、定位 = 定位模式 + 边偏移

3、定位模式：即一个元素在文档中的定位方式（static、relative、absolute、fixed、sticky）

4、边偏移：决定元素的最终位置（top、bottom、left、right）

1、静态定位（static）

静态定位即元素默认的定位方式，也就是无定位，根据标准流的盒子布局，比如块元素一列显示，行元素和行内块元素一行显示。

书写格式：

选择器 {
    position：static；
}

2、相对定位（relative）

书写格式

选择器 {
    position：relative；
}

特点

1、相对与自己原来的位置进行移动

2、原来在标准流中的位置继续占有，那么也就是说后面的盒子以然以标准流的方式去对待它

3、相对定位的元素不脱标

<!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: 300px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
        }
        
        .box2 {
            background-color: gold;
        }
        
        .box1 {
            margin-top: 100px;
            /* 注意：
                被定义相对定位的元素，从自身位置出发进行偏移
                ，可以说元素浮起来了，但元素在标准流中的位置保留，
             */
            position: relative;
            top: 50px;
            left: 150px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

3、绝对定位（absolute）——自绝父相

书写格式

/*祖先元素相对定位*/
选择器 {
    position：relative；
}
/*子元素绝对定位*/
选择器 {
    position：absolute；
}

特点

1、绝对定位元素的位置是根据祖先元素来定的

2、如果没有祖先元素，或者祖先元素没有相对定位，则以浏览器的位置来进行定位

3、如果祖先元素有定位（相对、绝对、固定），则以最近一级的定位祖先元素为参考进行定位

4、绝对定位将不再占用原来的位置，也就是说明它脱离了标准流的控制（脱标）
子绝父相：子元素绝对定位，父元素相对定位

1、儿子绝对定位，脱标不会占用原来的位置

2、相对定位经常用于作为绝对定位的父级

3、子元素使用绝对定位时需要以祖先元素的位置为标准，所以祖先元素不能脱标，需要占用位置，那么祖先元素此时只能使用相对定位，因为相对定位不会脱标

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            margin: 200px auto;
            /* 给父元素添加定位，并以父元素为出发点开始偏移 */
            position: relative;
        }
        
        div {
            width: 300px;
            height: 100px;
        }
        
        .box2 {
            background-color: gold;
        }
        
        .box1 {
            background-color: green;
            /* 1、使用绝对定位，根据祖先元素的相对定位来进行定位，
                如果父元素没有定位，那么就查看其祖宗元素有没有定位，如果还没有找到，
                那么就根据浏览的位置来进行定位。
               2、使用绝对定位的元素将脱离标准流的控制，相当漂浮到标准流的上方，并影响标准流
             */
            position: absolute;
            top: 50px;
            left: 150px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

绝对定位盒子居中

加了绝对定位的盒子不能通过 margin：0 auto；的方式来进行水平居中，那么只能通过计算来水平居中

计算方式：

1、绝对定位的元素 left：50%；让盒子左侧移动到父级元素的水平中心位置

2、据对定位的元素 margin-left：- 盒子宽度的一半

4、固定定位（fixed）——特殊的绝对定位

书写格式
```
选择器 {
    position：fixed；
}
```
应用场景

1、固定导航栏

2、固定侧边栏

3、广告

特点

1、固定定位是元素固定在浏览器的某个可视区域，经常用于浏览器页面滚动的时候元素位置不会改变

2、固定定位以浏览器的可视窗口为参考进行边偏移定位，所以跟祖先元素没有任何瓜葛

3、固定定位不会随滚顶条的滚动而滚动

4、固定定位不会占用又来的位置，所以会脱标，那么在这里我们就可以将固定定位看作是特殊的绝对定位

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
</head>
<style>
    .box {
        width: 300px;
        height: 200px;
        margin: 200px auto;
    }
    
    div {
        width: 300px;
        height: 100px;
    }
    
    .box2 {
        background-color: gold;
    }
    
    .box1 {
        background-color: green;
        /* 
            使用固定定位的元素，以浏览器窗口作为出发点开始定位，
            脱离了标准流的控制，不占据位置，相当于漂浮在标准流的上方
         */
        position: fixed;
        top: 250px;
        left: 500px;
    }
</style>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

</body>

</html>

固定定位的小算法：固定在版心的右侧区域

步骤1：让固定定位的元素 left：50%；走到浏览器可视区域的一半

步骤2：让固定定位的盒子 margin-left：版心宽度的一半，此时就在版心的右侧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位算法-固定在版心的右侧</title>
    <style>
        .center {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        
        .fixed {
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 利用margion走到版心的右侧   */
            margin-left: 400px;
            width: 50px;
            height: 150px;
            background-color: #666666;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="center">版心盒子800像素</div>
</body>

</html>

5、粘性定位（sticky）——相对定位和固定定位的混合

书写格式
```
选择器 {
    position：sticky；
}
```
特点

1、以浏览器可视窗口作为参照来进行边偏移移动位置 —— 固定定位的特点

2、占用运来的位置，不脱表 —— 相对定位的特点

3、不会跟随滚顶条的滚动而滚动 —— 固定定位的特点

4、必须添加边偏移中任意一个值才有用

5、兼容性较差，尤其IE

6、继承定位（inherit）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承定位</title>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: skyblue;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
            top: 100px;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            margin-top: 50px;
            /* 继承父元素的定位属性，假如父元素没有定位，则默认继承static静态定位 */
            position: inherit;
            left: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

4、绝对/固定定位拓展总结

1、特殊性：绝对/固定定位与浮动类似

行内元素添加绝对/固定定位，可以直接设置宽度和高度
块元素添加绝对/固定定位，如果不给宽度和高度，默认大小是内容的大小
脱标（脱离标准流控制）的盒子不会出现外边距塌陷

2、绝对定位 / 固定定位会完全压住盒子

浮动元素不同，只会压住下面标准流的盒子，但是不会压住标准流盒子内的内容
绝对定位或固定定位会压住标准流所以的内容
浮动之所以不会压住文字，因为浮动出现的目的就是为了做文字环绕

5、定位叠放次序

为什么需要叠放次序？

在使用定位布局的时候，可能会出现盒子重叠的情况，那么z轴就可以使用z-index来控制盒子的前后次序
书写格式
```
选择器 {
	z-index：数值；
}
```
特点

1、数值可以是正整数、负整数，或者0，默认auto

2、值越大，盒子越上

3、数值后没有单位

4、只要定位的元素才能使用 z-index 这个属性

<!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>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        
        .peiqi {
            background-color: red;
            z-index: 1;
        }
        
        .qiaozhi {
            background-color: yellow;
            left: 50px;
            top: 50px;
            z-index: 2;
        }
        
        .zhubaba {
            background-color: pink;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="box peiqi">佩奇</div>
    <div class="box qiaozhi">乔治</div>
    <div class="box zhubaba">猪爸爸</div>
</body>

</html>