CSS---CSS高级技巧---常见布局技巧---7.28

常见布局技巧

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

1.margin负值的运用

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

   ul li {
            position: relative;/*第二种方法*/
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            background-color: pink;
            border: 1px solid red;
            margin-left: -1px;
         }
   /* 1.如果盒子没有定位，则鼠标经过添加相对定位即可*/
   ul li:hover {
            position: relative;
            border-color: coral;
               }
   /* 2.如果li都有定位，则利用z-index提高层级*/
   ul li:hover {
            z-index: 1;
            border: 1px solid coral;
               }

代码效果：

---

---

2.文字围绕浮动元素

   .box {
            width: 378px;
            height: 122px;
            background-color: pink;
            margin: 100px auto;
        }
   .pic {
            float: left;
            width: 145px;
            height: 95px;
            margin: 14px;
        }
.pic img {
            width: 100%;
         }
 .box p {
            padding: 10px;
        }

代码效果：

 

---

---

3.行内块的巧妙运用（页码）

   .box {
            text-align: center;
        }
 .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            line-height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-decoration: none;
            text-align: center;
            color: #333;
            font-size: 14px;
        }
.box .prew,
.box .next {
            width: 90px;
           }
.box .current,
.box .elp {
            background-color: #fff;
            border: none;
          }
.box input {
            height: 36px;
            width: 42px;
            border: 1px solid #ccc;
            outline: none;
           }
.box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            }

代码效果：

---

---

4.css三角强化

/*简便写法*/
     width:0;
     height:0;
     border-color:transparent red transparent transparent;
     border-style:solid;
     border-width:22px 8px 0 0;

 .box {
      width: 0;
      height: 0;
      border-top: 150px solid transparent;
      border-bottom: 0 solid pink;
      border-left: 0 solid skyblue;
      border-right: 100px solid deeppink;
      }
/*完整代码*/
.price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
        }
        .price .xianjia {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            color: #fff;
            font-weight: 700;
        }
        .xianjia i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-top: 24px solid transparent;
            border-bottom: 0 solid pink;
            border-left: 0 solid skyblue;
            border-right: 13px solid #fff;
        }
        .price .yuanjia {
            font-size: 14px;
            color: #9999;
            text-decoration: line-through;
        }

代码效果：

---

---

 CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset)
每个网页都必须首先进行CSS初始化：
我们以京东CSS初始化代码为例。

/*把我们所有标签的内外边距清零*/
* {
   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;
        }

button,
input {
/*"\5B8B\4F53"就是宋体的意思,这样浏览器兼容性比较好*/
   font-family:Microsoft YaHei, Heiti SC, tahoma, arial, 
               Hiragino Sans GB, "\5B8B\4F53",sans-serif;
      }

body {
/* CSS3 抗锯齿形  让文字显示的更加清晰*/
   -webkit-font-smoothing:antialiased;
   background-color:#fff;
   font:12px/1.5 Microsoft YaHei, Heiti sC, tahoma, arial, 
         Hiragino Sans GB,"\5B8B\4F53"sans-serif;
   co1or:▣#666;
     }

.hide,
.none {
   display:none;
      }

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

.clearfix {
   *zoom:1;
          }

Unicode编码字体：
把中文字体的名称用相应的Unicode偏码来代替，这样就可可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：黑体\9ED1\4F53     宋体\5B8B\4F53     微软雅黑\5FAE\8F6F\96C5\9ED1