CSS学习文档（4）：清除浮动、PS切图、定位、网页布局、显示与隐藏

码农_小文

于 2024-07-27 19:33:48 发布

阅读量776

点赞数 31

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_58433849/article/details/140726473

版权

一、清除浮动

1、为什么要清除浮动

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

（2）如下图所示：

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

2、清除浮动本质

清除浮动的本质是清除浮动元素脱离标准流造成的影响。

3、清除浮动策略

闭合浮动只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。

4、清除浮动的方法：

（1）父元素overflow

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

优点：代码简洁
缺点：无法显示溢出的部分

代码示例如下：

    <title>为什么需要浮动</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;
        }

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

（2）after之伪元素

:after方式是额外标签法的升级版。也是给父元素添加

代码样式如下所示：

    <style>
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;

        }

        .clearfix {
            zoom: 1;
        }
</style>

优点∶没有增加标签，结构更简单
缺点∶照顾低版本浏览器
代表网站：百度、淘宝网、网易等等

（3）双伪元素（类似：after方式）

代码样式如下所示：

   <style>
        .clearfix::after,
        .clearfix::before {
            content: " ";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }
   </style>

优点︰代码更简洁
缺点:照顾低版本浏览器
代表网站:小米、腾讯等等

5、清除浮动总结：

为什么要清除浮动：

（1）父级没高度。

（2）子盒子浮动了。

（3）影响下面布局了，我们就应该清除浮动了。

二、PS切图

1、PS有很多的切图方式:图层切图、切片切图、PS插件切图等。

2、简单的切图方式：

（1）右击图层→快速导出为PNG

（2）合并图层→快速导出为PNG

三、定位

1、定位组成

定位︰将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式＋边偏移。

定位模式：用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移属性如下图所示：

（1）相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

选择器 { position: relative; }

特点：

盒子移动时参照点是本身
不脱标，继续保留原来位置

代码示例如下所示：

    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 300px;
            background-color: pink;
        }

        .box2 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>

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

（2）绝对定位

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

选择器 { position: absolute; }

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置

代码示例如下所示：

    <title>绝对定位-特点示例</title>
    <style>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }

        .father {
            /* position: relative; */
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        .son {

            position: absolute;
            top: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

（3）固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景∶可以在浏览器页面滚动时元素的位置不会改变。

选择器{ position : fixed; }

特点：

以浏览器的可视窗口为参照点移动元素。
固定定位不在占有原先的位置。

代码示例如下所示：

    <title>固定定位小技巧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }

        .fixed {
            position: fixed;
            left: 50%;
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>

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

（4）定位总结：

（5）定位叠放次序：

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

选择器{ z-index: 1; }

注意：

数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

四、网页布局

（1）通过盒子模型，清楚知道大部分html标签是一个盒子。

（2）通过CSS浮动、定位可以让每个盒子排列成为网页。

（3）一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

垂直的块级盒子显示就用标准流布局。
多个块级盒子水平显示就用浮动布局。
如果元素自由在某个盒子内移动就定位来布局

五、显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

1、display 属性

（1）display属性用于设置一个元素应如何显示。

display: none ;隐藏对象
display : block ;除了转换为块级元素之外，同时还有显示元素的意思display隐藏元素后，不再占有原来的位置。

（2）display隐藏元素后，不再占有原来的位置。

2、visibility属性

（1）visibility属性用于指定一个元素应可见还是隐藏。

visibility : visible;元素可视
visibility : hidden;元素隐藏

（2）visibility隐藏元素后，继续占有原来的位置。

3、Overflow溢出

（1）overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

慎用：但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。

总结：

以上是我对于CSS清除浮动、PS切图、定位、网页布局以及元素显示与隐藏等相关知识的描述，最重要的是对于定位的描述，网页布局基本会涵盖标准流、浮动、定位让盒子等成排列成为网页，感谢大家的观看谢谢！

码农_小文

关注

31
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS学习文档（4）：清除浮动、PS切图、定位、网页布局、显示与隐藏

目录一、清除浮动二、PS切图三、定位四、网页布局五、显示与隐藏总结：1、为什么要清除浮动（1）由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。（2）如下图所示：2、清除浮动本质清除浮动的本质是清除浮动元素脱离标准流造成的影响。3、清除浮动策略闭合浮动只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。4、清除浮动的方法：（1）父元素overflow可以给父级添加overflow 属性，将其属性值设置为hidden、auto或scroll代
复制链接

扫一扫