css学习第六天-CSDN博客

目录

清除浮动的方法

额外标签法

父级添加overflow属性

父级添加after伪元素

父级添加双伪元素

为什么要清除浮动

ps切图

图层切图

切片切图

cutterman插件

清除浮动的方法

额外标签法

在浮动元素末尾添加空标签如<div style="clear:both"></div>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            float: left;
            height: 100px;
            background-color: beige;

        }

        .foooter {
            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>
    </div>
    <div class="footer"></div>
</body>

</html>

父级添加overflow属性

将overflow属性设置为hidden、auto或scroll
优点：代码简洁
缺点：无法显示溢出部分

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .foooter {
            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>

父级添加after伪元素

代码
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
zoom: 1;
}
再在父盒子里面添加clearfix属性
额外标签法的升级版
优点：没有增加标签，结构更加简单
缺点：照顾低版本浏览器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .foooter {
            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>

父级添加双伪元素

代码
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6、7专有 */
zoom: 1;
}
优点：代码更加简洁
缺点：照顾低版本浏览器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE6、7专有 */
            zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .foooter {
            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>

为什么要清除浮动
- 父级没有高度
- 子盒子浮动了
- 影响下面布局的时候

ps切图
- 图层切图
  - 方法：右击图层--快速导出为PNG
  - 合并为一个图层：shift连选多图--ctrl+e合并--右键快速到处PNG
- 切片切图
  - 左边栏找到切片工具--框选所需区域--文件菜单导出，存储为web所用格式--保存为jpg格式--选择品质--存储--切片：选中的切片
- cutterman插件
  - cutterman是photoshop的插件，能够自动将需要的图层输出。（完整版的才能使用）（羽兔网下载Photoshop）
  - 使用技巧：窗口--扩展功能--选择web--选择图片格--输出
https://www.bilibili.com/video/BV14J4114768?p=269&spm_id_from=333.880.my_history.page.click