CSS进阶：常见布局技巧

目录

1. margin负值的运用

2. 文字围绕浮动元素

3. 行内块的巧妙运用

4. CSS三角强化

---

1. margin负值的运用

两个盒子浮动，中间是没有缝隙的，导致两个边框放在一起会加宽边框，解决方法：

让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

margin-left: -1px;

鼠标经过某个盒子时，提高盒子的层级即可（如果没有定位，则加定位（position: relative;保留位置），如果有定位，则加z-index）

2. 文字围绕浮动元素

原理：设置一个大盒子，盒子里面放文字和图片，图片设浮动，文字就会环绕图片

 代码：

    
    
    
    
    



    

        

            
        
        
[锦集]热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场
    

 效果图：

3. 行内块的巧妙运用

行内块可以巧妙地运用到页码的设计中，实现如下的页面布局

 

 代码如下：

    
    
    
    
    



    

        <<上一页
        2
        3
        4
        5
        6
        7
        8
        9
        ...
        >>下一页
        到第
        
        页
        确定
    

4. CSS三角强化

 原理：

 一个矩形加一个三角形

代码：

            width: 0;
            height: 0;
            border-color: transparent red transparent transparent transparent;
            border-style: solid;
            border-width: 22px 8px 0 0;