【CSS学习第五篇】

希冀123

已于 2024-08-09 22:18:35 修改

阅读量775

点赞数 21

分类专栏：前端文章标签： css 学习前端

于 2024-08-08 15:35:27 首次发布

本文链接：https://blog.csdn.net/2301_77399671/article/details/140740901

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS学习第五篇

1. 浮动
2. 常见网页布局
- 2.1 常见网页布局
- 2.2 浮动布局注意点
3. 清除浮动
4. CSS属性书写顺序（重点）
5. 页面布局整体思路

1. 浮动

在介绍浮动前，我们先来了解传统网页布局的三种方式：

1.1 传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置

CSS提供了三种传统布局方式：标准流、浮动、定位
（简言之，即盒子如何进行排列排序）

这三种布局方式都是摆放盒子的，盒子摆放到合适位置，布局自然就完成了
注意：在实际开发中，一个页面基本都包含了这三种布局方式（后面移动端将学习新的布局方式）

先来介绍标准流：

1.2 标准流（普通流/文档流）

所谓的标准流，就是标签按照规定好的默认方式排列。
例如：

（1）块级元素会独占一行，从上向下按顺序排列
（2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

1.3 为什么需要浮动？

在这里插入图片描述

总结：有很多的布局效果标准流无法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

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

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

1.4 什么是浮动（float）？

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

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

<!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>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* .right {
            float: right;
        } */
    </style>
</head>
<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</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>Document</title>
    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .right {
            float: right;
        } 
    </style>
</head>
<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>
</html>

在这里插入图片描述
上两图为左浮动/右浮动的例子

1.5 浮动特性（重难点）

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

（1）浮动的元素会脱离标准流（脱标）
（2）浮动的元素会在一行内显示并且元素顶部对齐
（3）浮动的元素会具有行内块元素的特性

（1）浮动的元素会脱离标准流（脱标）

设置了浮动的元素最重要的特性是：
（1）脱离标准普通流的控制（浮）移动到指定位置（动）
（2）浮动的盒子不再保留原先的位置

在这里插入图片描述

<!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>
        /* 1.脱离标准普通流的控制（浮）移动到指定位置（动） */
        /* 2.浮动的盒子不再保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>
<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>
</html>

盒子1未加浮动：
在这里插入图片描述
盒子1加了浮动：

（2）浮动的元素会在一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

<!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>
        div {
            /* float: left; */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .two {
            background-color: purple;
            /* height: 250px; */
        }
        .four {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</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>Document</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .two {
            background-color: purple;
            height: 250px;
        }
        .four {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>
</html>

在这里插入图片描述

注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

（3）浮动的元素会具有行内块元素的特性

未加浮动前：

        span {
            /* float: left; */
            width: 200px;
            height: 100px;
            background-color: pink;
        }

在这里插入图片描述

加了浮动后

        span {
            float: left; 
            width: 200px;
            height: 100px;
            background-color: pink;
        }

在这里插入图片描述

        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

在这里插入图片描述

（1）如果块级元素没有设置宽度，默认是和父级一样宽，但添加浮动后，它的大小根据内容来决定
（2）行内元素同理

p未加浮动：

<!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>
        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        /* 如果行内元素有了浮动，则不需要转换块级  行内块元素就可以直接给高度和宽度 */
        p {
            /* float: right; */
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>
    <div>div</div>
    <!-- <p>p</p> -->
    <p>ppppp</p>
</body>
</html>

在这里插入图片描述
p加了浮动：

        p {
            float: right;
            height: 200px;
            background-color: purple;
        }

在这里插入图片描述

1.6 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，
之后内部子元素采取浮动排列左右位置，
符合网页布局第一准则。

2. 常见网页布局

2.1 常见网页布局

在这里插入图片描述

<!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;
        }
        li {
            list-style: none;
        }
        .top {
            height: 50px;
            background-color: gray;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }
        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }
        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }
        .box .last {
            margin-right: 0;
        }
        /* 只要是通栏的盒子（和浏览器一样宽） 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
    </div>
    <div class="footer"></div>
</body>
</html>

在这里插入图片描述

2.2 浮动布局注意点

（1）浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

（2）一个元素浮动了，理论上其余的兄弟元素也要浮动

并且，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

<!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 {
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            border: 1px solid blue;
        }
        .damao {
            width: 200px;
            height: 100px;
            background-color: purple;
        }
        .ermao {
            width: 200px;
            height: 150px;
            background-color: red;
        }
        .sanmao {
            width: 300px;
            height: 250px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="sanmao">三毛</div>
    </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>Document</title>
    <style>
        /* 如果一个子元素浮动了，尽量其他盒子也浮动，这样保证这些子元素一行显示 */
        .box {
            width: 800px;
            /* width: 900px; */
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            border: 1px solid blue;
        }
        .damao {
            float: left;
            width: 200px;
            height: 100px;
            background-color: purple;
        }
        .ermao {
            width: 200px;
            height: 150px;
            background-color: red;
        }
        .sanmao {
            float: left;
            width: 300px;
            height: 250px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="sanmao">三毛</div>
    </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>Document</title>
    <style>
        /* 如果一个子元素浮动了，尽量其他盒子也浮动，这样保证这些子元素一行显示 */
        .box {
            width: 800px;
            /* width: 900px; */
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            border: 1px solid blue;
        }
        .damao {
            width: 200px;
            height: 100px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 150px;
            background-color: red;
        }

        .sanmao {
            width: 300px;
            height: 250px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="sanmao">三毛</div>
    </div>
</body>
</html>

在这里插入图片描述

3. 清除浮动

3.1 为什么需要清除浮动

我们前面浮动元素有一个标准流的父元素，
他们有一个共同的特点——都是有高度的，
但是，所有的父盒子都必须有高度吗？

情况1： 滚动鼠标，发现孩子太多无法给父元素高度：
在这里插入图片描述
情况2： 由于文本内容多少未知，无法给父元素高度

由于父级盒子很多情况下，不方便给高度。
（如：产品可能很多很多、左侧的新闻不知道有多少文字）

理想中的状态是：让子盒子撑开父亲，有多少盒子，父盒子就有多高

<!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 {
            margin: 0 auto;
            width: 800px;
            border: 1px solid blue;
        }
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </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>Document</title>
    <style>
        .box {
            margin: 0 auto;
            width: 800px;
            border: 1px solid blue;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
</body>
</html>

在这里插入图片描述

但是子盒子浮动又不占有位置，
最后父级盒子高度为0时，
就会影响下面的的标准流盒子

<!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 {
            margin: 0 auto;
            width: 800px;
            border: 1px solid blue;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>

在这里插入图片描述

3.2 清除浮动本质（clear）

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

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

在实际开发中，几乎只用clear:both;

清除浮动的策略是：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

3.3 清除浮动方法

（1）额外标签法（也称为隔墙法，是W3C推荐的做法）

额外标签法指的是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式

但这个标签必须是块级元素标签

<!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 {
            margin: 0 auto;
            width: 800px;
            border: 1px solid blue;
        }
        .damao {     
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {            
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>   
        <div class="clear"></div>
        /*这个新增的盒子要求必须是块级元素  不能是行内元素*/
        /*<span class="clear"></span> */
    </div>
    <div class="footer"></div>
</body>
</html>

在这里插入图片描述
但这会添加许多无意义的标签，结构化差

（2）父级添加overflow元素

可以给父级添加overflow属性，将其属性值设置为hidden、auto、scroll

<!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 {
            /* 清除浮动 */
            overflow: hidden;
            margin: 0 auto;
            width: 800px;
            border: 1px solid blue;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>

但这无法显示溢出的部分
（3）父级添加after伪元素

<!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>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6、7专有 */
            zoom: 1;
        }
        .box {
            margin: 0 auto;
            width: 800px;
            border: 1px solid blue;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>

但这只是照顾低版本浏览器

（4）父级添加双伪元素

<!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>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            /* IE6、7专有 */
            zoom: 1;
        }
        .box {
            margin: 0 auto;
            width: 800px;
            border: 1px solid blue;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>

缺点同上，但此法代表网站有：小米、腾讯

4. CSS属性书写顺序（重点）

建议遵循以下顺序：

（1）布局定位属性：display / position / float / clear / visibility / overflow（建议display第一个写，毕竟关系到模式）
（2）自身属性：width / height / margin / padding / border / background
（3）文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
（4）其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

在这里插入图片描述

5. 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

（1）必须确定页面的核心（可视区），我们测量可得知
（2）分析页面中的行模块，以及每个行模块中的列模块。（其实是页面布局第一准则）
（3）一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。（页面布局第二准则）
（4）制作HTML结构，我们还是遵循：先有结构，后有样式的原则。（结构永远最重要）
（5）所以，先理清布局结构，再写代码尤为重要