1.<!-- 无viewport页面会进行缩放，无横向滚动条 width=device-width,initial-scale=1 无缩放无滚动条 -->

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

 

2.rem:

/*任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px

以rem为单位的字体 与body的设置值无关 仅与html的设置有关

Chrome,360极速浏览器,opera：若font-size的rem设置的值小于12px 或者小于75% 会自动转化为12px 75%

为了方便计算可以将font-size:100px;

Chrome,360极速浏览器,opera html font-size:62.5% 10rem 10rem 宽高div 120*120 div字体1rem:12px

ie11：html font-size:62.5% 10rem 10rem 宽高div 99.33*99.33 div字体1rem:12px

firefox:html font-size:62.5% 10rem 10rem 宽高div 100*100正常 div字体1rem:10px;

为了所有浏览器统一 font-size的值设置为大于12px

*/

 

3.media:

/*屏幕宽度不大于1024px*/

@media only screen and (max-width: 1024px) {

      .content {

           width: 1000px;

           margin: 0 auto;

       }

}

/*屏幕宽度400px到1024px之间*/

@media only screen and (min-width: 400px) and (max-width: 1024px) {

       .left {

          width: 35%;

       }

      .right {

         width: 0;

     }

    .middle {

        width: 60%;

    }

}

 

4.box-sizing

box-sizing:content-box;border和padding不计算入width之内 150*150

box-sizing:padding-box; padding计算入width内 ff:110*110; safari/chrome:150*150;

box-sizing:border-box;border和padding计算入width之内，其实就是怪异模式 ff/chrome:100*100

content-box加不加意义不大，padding-box存在浏览器差异不好用，border-box safari/chrome/firefox均是一样的效果

5.:after选择器

/*在a标签后添加虚线分隔*/

nav a:nth-child(1)::after,

nav a:nth-child(2)::after,

nav a:nth-child(3)::after,

nav a:nth-child(5)::after,

nav a:nth-child(6)::after,

nav a:nth-child(7)::after {

content: " ";

width: 1px;

height: 28px;

background-color: #dadada;

position: absolute;

top: 9px;

right: -1px;

}

也可以用before 注意位置left right,a标签顺序

nav a:nth-child(2)::before,

nav a:nth-child(3)::before,

nav a:nth-child(4)::before,

nav a:nth-child(8)::before,

nav a:nth-child(6)::before,

nav a:nth-child(7)::before {

content: " ";

width: 1px;

height: 28px;

background-color: #dadada;

position: absolute;

top: 9px;

left: -1px;

}