Hello WEB ! CSS是装修吗？！（四）--字体和文本

最新推荐文章于 2024-07-24 11:39:30 发布

Padaz

最新推荐文章于 2024-07-24 11:39:30 发布

阅读量91

点赞数

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

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119355342

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

float 浮动：

左浮动：float: left
右浮动：float: right

ps.浮动会出高度坍塌的问题使得网页高度为0

解决高度坍塌问题：
1.加一个类属性 .high{overflow: hidden}【隐藏超出部分】
2.加一个空盒子（不常用）【用一个固定的盒子撑着】
3.伪类元素 .high:after{content: "";display: block;clear: both;}【显示块，清除所有浮动】

定位：
1./*fixed固定定位元素位于浏览器的固定位置（网页两旁的广告、导向栏）top/left/right 可以调整位置*/
2./*relative相对定位相对目标的位置 left与right top 和bottom 可以调整位置*/
3./*absolute定位绝对定位定位到任何位置可以覆盖其他标签内容*/
4./*sticky粘性定位网页上面的导向栏 excel的冻结列一样*/
5./*重叠样式需要Z-index属性*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动+定位</title>
    <!--浮动-->
    <style>
        .div1{width: 100px;height: 100px;background-color: deeppink;
                /*右浮动*/ /*float: right;*/
                /*左浮动 第一个盒子在上面覆盖了 后面上浮的盒子*/float: left;}
                                                                /*ABC左浮动 → 同一行*/
        .div2{width: 100px;height: 100px;background-color: rebeccapurple;float: left;}
        .div3{width: 100px;height: 100px;background-color: red;float: left;}
        /*浮动会出高度坍塌的问题 使得网页高度为0*/

        /*1.解决高度坍塌:加类*/
         /*.high{overflow: hidden}*/

        /*2.解决高度坍塌:加伪类元素*/
        .high:after{
            content: "";
            display: block;
            clear: both;
        }


    </style>

    <!--定位-->
    <style>
        /*fixed固定定位 元素位于浏览器的固定位置（网页两旁的广告、导向栏）top/left/right 可以调整位置*/
        .fix{position: fixed;width: 60px;height: 100px;border: 5px solid red;top: 500px;right: 0}

        /*relative相对定位 相对目标的位置 left与right top 和bottom 可以调整位置*/
        .rel{position: relative; left: -50px; bottom: 222px}

        /*absolute定位 绝对定位 定位到任何位置  可以覆盖其他标签内容*/
        .abs{position: absolute; left: 20px; top: 20px;width: 200px}

        /*sticky粘性定位 网页上面的导向栏 excel的冻结列一样*/
        .stick{position: -webkit-sticky;position: sticky; top: 0; border: 5px dotted pink; background-color: #dafffc}

        /*重叠样式 用absolute定位来展示 需要Z-index属性*/
        .z-ind{position: absolute; z-index: -1; top: 300px;}
        .z-ind1{position: fixed;z-index: -1;top: 300px}


    </style>
</head>
<body>


<!--浮动-->
<div class="high">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>

    <!--3.解决高度坍塌:加盒子 -->
    <!--<div style="width: 100px;height: 100px"></div>-->


</div>

<!--定位-->
<div class="stick"> 冻结导向栏 sticky粘性定位 </div>

<div class="fix">广告位置 fixed固定定位</div>

<div>
    <div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>
<div style="width: 50px;height: 50px;border: 1px solid green"></div>

</div>

<p class="rel"> 这是个段落标签 relative相对定位</p>

<img class="abs" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1538415511,2500160749&fm=26&gp=0.jpg" title="absolute结对定位" >

<img class="z-ind1"
     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599583778955&di=4c9b993cfd491c3fc4e8df8e66ade97e&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F01%2F20200501000542_avabk.thumb.400_0.gif"
     title="重叠样式 z-index" width="200px">

</body>
</html>

Padaz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Hello WEB ! CSS是装修吗？！（四）--字体和文本

float 浮动：左浮动：float: left右浮动：float: rightps.浮动会出高度坍塌的问题使得网页高度为0解决高度坍塌问题：1.加一个类属性 .high{overflow: hidden}【隐藏超出部分】2.加一个空盒子（不常用）【用一个固定的盒子撑着】3.伪类元素 .high:after{content: "";display: block;clear: both;}【显示块，清除所有浮动】定位：1./*fixed固定定位元素位于浏览器的固定位置（网页两
复制链接

扫一扫