CSS---常见布局技巧

1. margin负值的运用

2. 文字围绕浮动元素

3. 行内块的巧妙运用

4. CSS三角强化

1. margin负值运用

经过边框盒子变色: 例子:

标签:hover {

border: 1px solid 颜色;

}

---

2. 文字围绕浮动元素巧妙运用

利用浮动元素不会压住文字的特性

首先 准备一个大盒子 里面拥有文字 然后 在左侧的图片添加浮动

---

3. 行内块的巧妙运用

 这类布局可以借助行内块的特性   首先是行内块本身就有大小  

                                                      其次给父盒子添加 text-align: center  完成布局

 通过  &lt  是小于号

          &gt 是大于号  来实现

直角三角形的实现:

把上边框的宽度调大

左边和下边的边框宽度设置为 0

                

 

 注: border-color: 上 右 下 左(顺时针)

---

CSS初始化  (也称为 CSSreset)

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

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

Unicode编码字体:

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

比如:

        黑体 \9ED1\4F53

        宋体 \5B8B\4F53

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

下面的例子: 京东的初始化

把我们所有标签的内外边距清零
* {
    margin:0;
    padding:0
}  
把 em 和 i  让斜体的文字都不倾斜
em,i {
    font-style:normal
}
去掉 li 的小圆点
li {
    list-style:none
}


img {
    border:0;  // border 0 是为了照顾低版本浏览器  如果 图片外面包含了链接会有边框的问题
    取消图片底侧右空白缝隙的问题
    vertical-align:middle 
}

当我们的鼠标经过 button 按钮的时候, 鼠标变成小手
button {
    cursor:pointer
}
a {
    color:#666;text-decoration:none
}

a:hover {
    color:#c81623
}

body {
        -webkit-font-smoothing:antialiased;background-color:#fff;   //这个是CSS3里面的抗锯齿形(放大时候会出现不清晰的锯齿形) 让文字更加清晰
        font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}
                                                                                5B8B\4F53 是通过Unicoude编码来实现的
                                                                                            
        用来隐藏元素
        .hide,.none {
            display:none
        }

        用来清除浮动
        .clearfix:after {
            visibility:hidden;
             clear:both;
            display:block;
            content:".";height:0
        }