当前位置 博文首页 > 文章内容
最大化 缩小

    css：布局技巧（margin负值、鼠标经过显示边框、文字围绕图片显示、三角形使用技巧、css初始化）

    作者： 栏目：未分类 时间：2020-07-07 16:07:22

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客，有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
    博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！

    另祝：版权碰瓷诈骗团伙，早日弃暗投明。

    相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹！百花齐放的时代,渐行渐远!


    1、margin负值

    （1）在使用表格实现盒子的时候会出现相邻的盒子边框重叠的现象：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        ul li{
            width: 100px;
            height: 30px;
            border: 1px solid red;
            float: left;
            list-style: none;//去除点
        }
    </style>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
</html>

    效果：

     

     相邻的盒子的边框为2px

      ul li{
            width: 100px;
            height: 30px;
            border: 1px solid red;
            float: left;
            list-style: none;//去除点
            margin-left: -1px;
        }

    添加margin-left属性后相当于将左边界左移，就不会出现边框重叠的现象了

     

    2、鼠标经过显示边框

        <style>
        ul li{
            width: 100px;
            height: 30px;
            border: 1px solid red;
            float: left;
            list-style: none;//去除点
            margin-left: -1px;
        }
        ul li:hover{
            position: relative;
            border: 1px solid black;
        }
    </style>

     

     

     

     也可以用z-index，来调节层级：

        <style>
        ul li{
            width: 100px;
            height: 30px;
            border: 1px solid red;
            float: left;
            list-style: none;//去除点
            margin-left: -1px;
        }
        ul li:hover{
            z-index: 1;
            border: 1px solid black;
        }
    </style>

     

    3、文字围绕图片显示

    不添加浮动属性：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
    .box{
        width: 300px ;
        height: 228px ;
        border: 1px solid red;
        
    }
    </style>
    <body>
        <div class="box">
            <img src="img/1.jpeg"/>
            <p> 明月出天山，苍茫云海间。
                长风几万里，吹度玉门关。
                汉下白登道，胡窥青海湾。
                由来征战地，不见有人还。
                戍客望边色，思归多苦颜。
                高楼当此夜，叹息未应闲。</p>
        </div>
    </body>
</html>

     

     为图片添加浮动属性：文字会围绕图片来显示

     

     

    4、三角形使用技巧

    （1）三角形效果：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .box{
                width: 0;
                height: 0;
                border-top: 10px solid red;
                border-bottom: 10px solid yellowgreen;
                border-left: 10px solid black;
                border-right: 10px solid blue;
                
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

     

     更改border-bottom属性：

          <style>
            .box{
                width: 0;
                height: 0;
                border-top: 10px solid red;
                border-bottom: 0px solid yellowgreen;
                border-left: 10px solid black;
                border-right: 10px solid blue;
                
            }
        </style>

     

     更改bottom-top属性：

       <style>
            .box{
                width: 0;
                height: 0;
                border-top: 20px solid red;
                border-bottom: 0px solid yellowgreen;
                border-left: 10px solid black;
                border-right: 10px solid blue;
                
            }
        </style>

     

     

         <style>
            .box{
                width: 0;
                height: 0;
                border-top: 20px solid transparent;
                border-bottom: 0px solid yellowgreen;
                border-left: 0px solid black;
                border-right: 10px solid blue;
                
            }
        </style>

     

     

    5、css的初始化

    不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对css初始化

    css初始化是指重设浏览器的样式

    每个网页都必须进行css的初始化