前端常见的布局技巧

今天刚学的分享给大家，一起进步
1.margin负值的运用
例子：![淘宝网上的某一版块](https://img-blog.csdnimg.cn/20200902175159144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1bnppeXVhbg==,size_16,color_FFFFFF,t_70#pic_center

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

ul li {
            
             float: left;
             margin-left: -1px;
             list-style: none;
             width: 150px;
             height: 200px;
             background-color: pink;
             border: 1px solid gray;
         }

2.文字环绕布局
例子：
实验：.box {
width: 300px;
height:70px;
background-color: pink;
}
.pic {
width:120px;
height: 60px;
margin-right: 5px;
padding: 5px;
float: left;
}
img {
width:120px;
height: 60px;

        }
        -------------------------------
        <div class="box">
    <div class="pic">
        <img src="imges/vae.jpg" alt="">
    </div>
    <p>许嵩许嵩许嵩许嵩许嵩许嵩许嵩许嵩许嵩许嵩许嵩许嵩许嵩</p>
</div>

3.行内块巧妙运用
例子：

    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button> 确定 </button>
    </div>

.box {
                text-align: center;
            }
            .box a {
                display: inline-block;
                width: 36px;
                height: 36px;
                background-color: #f7f7ff;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 36px;
                text-decoration: none;
                color: #333333;
                font-size: 14px;

            }
            .box .prev,
            .box .next  {
                width: 85px;
            }
            .box input {
                height: 36px;
                width: 45px;
                border: 1px solid #ccc;
                outline: none;
            }
            .box button {
                height: 36px;
                width: 36px;
                background-color: #f7f7ff;
                border: 1px solid #ccc;
                font-size: 14px;
                color: #333333;
            }

4.三角形的巧妙运用
结果：

<div class="box">
        <div class="tra"></div>
    </div>

.box {
                position: relative;
                width: 100px;
                height: 40px;
                background-color: pink;
            }
            .box .tra{
                position: absolute;
                right: 0;
                width: 0;
                height: 0;
                border-color: transparent #ffffff transparent transparent ;
                border-width: 40px 20px 0 20px;
                border-style: solid;
                /* border: 20px solid palegreen;
                border-top-width: 40px;
                border-right-color:  violet;
                border-bottom-width: 0; */
                /* border-top: 40px solid transparent;
                border-right: 20px solid steelblue;
                border-bottom: 0px solid #aa44aa;
                border-left: 20px solid transparent; */
            }

<div class="big"> 
        <div class="miaosha">
            <span>¥16999.00</span> 
           <i class="i"></i>
        </div>
        <span class="pre">¥2999.00</span>
    </div>

.big {
                position: relative;
                width: 200px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border: 1px solid pink;
                
            }
            .miaosha {
                position: relative;
                float: left;
                width: 100px;
                height: 40px; 
                margin-right: 8px;
                background-color: pink;
            }
            .miaosha .i{
                position: absolute;
                right: 0;
                width: 0;
                height: 0;
                border-color: transparent #ffffff transparent transparent ;
                border-width: 40px 20px 0 0;
                border-style: solid;
                
            }
            .big .miaosha span {
                color: white;
                font-size: 14px;
                font-weight: 800;
            }
            .big .pre {
                font-size: 14px;
                color: #323232;
                text-decoration: line-through;     
            }