CSS常见布局技巧，CSS三角巧妙应用，CSS的初始化

目录

1.CSS常见布局技巧

1.margin 负值运用 

2.文字围绕浮动元素

 3.行内块巧妙应用

2.CSS三角巧妙应用

---

1.CSS常见布局技巧

巧妙利用一个技术更快更好的布局：

1. margin 负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. CSS三角强化

1.margin 负值运用 

 边框过粗，边框都为1px 相当于1px+1px = 2px,所以中间的边框较粗。使用margin-left: -1px; 让右边的盒子向左走1px，将左边的边框遮住。

 代码实现

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
    

当鼠标经过时，让其显示出不同的边框

  ul li:hover {

            border: 1px solid blue;

        }

可是右边边框缺少。 

1.  让每个盒子margin 往右移动 -1px 正好压住相邻盒子边框
2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有固定定位，则加相对定位（保留位置），如果有定位，则加z-index）

2.文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性。

代码实现：

    
    
    
    
    




    

        

            
        
        
克里斯蒂亚诺罗纳尔多
    

 3.行内块巧妙应用

代码实现：

    
    
    
    
    



    

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

2.CSS三角巧妙应用

 代码实现：

    
    
    
    
    



    

    

        
            ￥1650
        
        
        ￥5650
    

3.CSS 初始化

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

简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset)

每个网页都必须首先进行CSS初始化。

这里我们以 京东CSS初始化代码为例。

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：
黑体  \9ED1\4F53

宋体  \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1