CSS技巧与最佳实践-优快云博客

CSS resets(对所有标签应用一段默认的样式，以此保持各个浏览器一致) vs Normalize.css（保证样式一致，同时保持各个浏览器的兼容型保持一致）
而且css resets会导致每个标签的继承链过长，嗯，很糟糕的感觉；而Normalize.css则非常谨慎，调试样式时很是简单
这里写图片描述

解决方法很简单：font-size:1em;font-size:16px;
浮动：高度塌陷；
1:

但是会添加无意义的标签，违背了结构与表现分离的精髓。
2：给父容器添加overflow:hidden;or auto(浮动元素又会回到容器层)
3:让父容器也浮动起来。影响页面布局。
4：the best way: :after 在元素的末尾添加一个看不见的块
这里写图片描述

zoom是为了IE6和IE7设置的。
BFC（block formatting context）块状格式化上下文，都可以清除浮动

float:left;
overflow:auto;
display:table-cell;
display:table-caption;
display:inline-block;
position:fixed;
position:absolute;

尼古拉斯清除浮动法：创建一个匿名的表格单元,触发BFC(升级法)

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

加上before可以防止浏览器顶部空白崩溃，也就是margin上下的叠加

.clearfix:after,
.clearfix:brfore{
    content:"";
    display:table;
    }
    .clearfix:after{
        clear:both;
        }

在中文版chrome,最小的字号会有一个下限，这个下限会强制改变该值的大小，它会变成浏览器的最小值，对中文版来说这个下限一般是12px,但是英文版的是10px；所以在中文版的chrome中，3rem=36px(font-size: 62.5%;)例外，其他浏览器都是10px;
chrome://version/,查看chrome的版本，不过我的没有这个转换问题。

margin-left:-3px;解决html中的空白字符问题
这里写图片描述

<ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">快速注册</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">帮助</a></li>
                <li><a href="#">APP下载</a></li>
            </ul>
header .top ul li + li{
    border-left:1px solid #999;
    margin-left:-3px;
}

在每组li之间是存在换行符的，而这种回车符就是一个空白符。所以解决问题时删除所有的换行符，不过会很乱的阿
解决方法
1

ul{font-size:0;}
li{1.2rem}

不过新问题出现了，下边距出现了，而且子元素还要重新设置下font-size.
2
这里写图片描述
3
li不闭合

4 设置负的margin边距，不过各种浏览器的边距是不一样的
5 css4 white-space-collapsing

关于表格响应式设计，尤其很多列，中小屏幕一般会比较丑的。
1：隐藏表格里边不重要的列；
2：把横向的表格变成纵向的表格（行列倒置）
3：把表格每一项做成类似表单的格式来展示，就是把其展开，左边是名，右边是值

.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
/**************
* 页面样式
***************/

/*  ============
    基本默认值
    ============ */

html{
    font-size:62.5%;
    color:#222;
}

::selection{
    background-color: #b3d4fc;
    text-shadow:none;
}

ul{
    margin:0;
    padding:0;
}

li{
    list-style:none ;
}


/* ====================
    工具样式
    ================== */

 .center-block {
  display: block;     /*将页面元素设置为块级元素*/
  margin-right: auto;    /*左右居中显示*/
  margin-left: auto;
}
.pull-right {  float: right !important;  /*向右浮动*/ }
.pull-left {  float: left !important;  /*向左浮动*/}
.text-right{
    text-align:right !important;
}
.text-center{
    text-align:center !important;
}
.text-left{
    text-align:left !important;
}
.show{
    display:block !important;
}
.invisible{
    visibility: hidden;
}
.text-hide{
    font:0/0 a;
    color:transparent;
    text-shadow: none;
    background-color: transparent;
    border:0;
}

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}

.clearfix:after{
    clear:both;
}


/* ==============
    浏览器更新提示
    ============= */

.browserupgrade{
    margin:0;
    padding: 1rem;
    background: #ccc;
}

/* ==============
    自定义页面样式
    ============= */
body{
    font-size: 1.2rem; /* 10px */
    line-height: 1.5; /* 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。类似word */
    background-color: #f7f7f7;
}

a{
    color:#666;
    text-decoration: none;
}

a:hover,a:active{
    color: #0ae;
    text-decoration: underline;
}

/*  =============
    头部文件
    ============= */


header{
    width:100%;
}

header .top{
    line-height: 3rem;/*最好使用px代替*/
    /*line-height:30px;*/
    padding: 0 1.5rem;
    color: #fff;
    background: #555;
    border-bottom:1px solid #ecc000;

}

header .top .tel{
    float:left;
}

header .top ul{
    text-align:right;
}

header .top ul li{
    display:inline-block;
}

header .top ul li + li{
    border-left:1px solid #999;
    margin-left:-3px;
}

header .top ul li a{
    display: inline-block;/* a默认是inline元素，所以设置padding无效padding */
    padding:0 1.5rem;
    color:#fff;
}

header .main{
    padding:0;
}

header .main .brand{
    float:left;
    padding:1rem 1.5rem;
}

header .main ul{
    text-align: right;
}

header .main ul li{
    display:inline-block;
    border-left:1px solid #f0ede9;
}

header .main ul li a{
    display:inline-block;
    padding:0 3rem;
    line-height: 5.5rem;
    font-size: 1.6rem;
    font-weight:bold;
    color:#7c7a65;
    text-decoration: none;
}

header .main ul li a:hover,
header .main ul li a:focus,
header .main ul li a.active{
    color:#ffb300;
    background-color: #f8f6f1;
}

/* ==============
    网站主要内容
   ==============  */

.container{
    width:100%;
}

/*  =============
    交易信息
    ============== */
.transaction{
    width:100%;
    background-color: #7c7365;
}

.trans-content {
    max-width: 90%;
    margin:0 auto;
    font-size: 1.5rem;
}

.trans-data{
    float: left;
    padding:1rem;
    text-align: left;
}

.trans-data span{
    display: inline-block;
    line-height: 3rem;
    color: #fff;
} 

.trans-data span.trans-money{
    font-size: 2.2rem;
    color: #ff9900;
    letter-spacing: 3px;
    margin:0 1rem;
    padding:0 1rem;
    border-radius: 3px;
    background-color:rgba(255,255,255,0.9);
    box-shadow:1px 2px 1px #333 inset;
}
.trans-report{
    text-align:right;
}

.trans-report a{
    display:inline-block;
    padding:1rem;
    line-height: 3rem;
    color: #fff;
}

/* ==============
    滚动广告
   ==============  */
.ad{
    display:none;
}

/* ==============
    标题内容
   ==============  */
.feature{
    width:90%;
    margin:2rem auto;
    font-size: 0; /*去掉空白行间隙 */
}

.feature .item{
    display: inline-block;
    width:calc(33.333333% - 3rem); /*padding 2rem;item>margin-left:3rem/3=1rem*/
    padding:1rem;
    font-size: 1.4rem;
    background-color: #fff;
    box-shadow:0 0 4px #ccc;
}

.feature .item + .item{
    margin-left: 1.5rem;
}

.feature .item h3{
    display: inline-block;
    width: 40%;
    margin:0;
    padding: 0;
    vertical-align: top;
    font-size: 3.3rem;
    text-align: center;
    color: #ff9900;

}

.feature .item p{
    display:inline-block;
    width: 55%;
    margin:0;
    padding:0;
    color: #999;
}

/* 最新公告 */

.notice{
    width: 90%;
    margin:2rem auto;
    font-size: 1.4rem;
    line-height: 3rem;
    background-color: #fff;
    box-shadow: 0 0 4px #ccc;
}

.notice a{
    float: left;
    display:inline-block;
    width:70%;
    margin-left: 2rem;
    text-decoration: none;
}

.notice a:first-child{  /*保证文字不换行 */
    text-overflow: ellipsis;/*隐藏滚动条 */
    overflow: hidden;/*省略号隐藏文字 */
    white-space: nowrap;
}

.notice a:first-child:before{
    content: '最新公告：\00a0\00a0'; /*增加空格 */
    color: #aaa;
}

.notice a span{
    color: #999;
    font-size: 1.2rem;
    margin-right:1rem;
}

.notice a.more{
    float: right;
    width: auto;
    margin-right:2rem;
    color: #ff9900;
}


/* 产品列表 */

.product{
    width: 90%;
    margin:2rem auto;
    font-size: 1.4rem;
    background-color: #f5f9fa;
    border-top: 2px solid #ff9900;
    box-shadow: 0 0 4px #ccc;
}

.product h2{
    float: left;
    width:20%;
    text-align: center;
    font-size: 2.4rem;
    font-weight:normal;
}

.product h2 em{
    display: block;
    margin-top: 1rem;
    font-size: 1.6rem;
}

.product h2 em:first-child{
    margin-top: 4rem;
}

.product .product-content{
    float: right;
    width: 79.5%;
    border-left:1px solid #eee;
    background-color: #fff;
}

.product .product-content .item{
    width: 100%;
}

.product .product-content .item + .item{
    border-top:1px solid #eee;
}

.product .product-content .item h3{
    float: left;
    width: 30%;
    margin:1.5rem 0;
    font-size: 1.4rem;
    font-weight:normal;
    text-align: center;
}

.product .product-content .item h3 em{
    margin-right: 0.5rem;
    font-size: 3.6rem;
    font-style: normal;
    color: #8b999d;
}

.product .product-content .item h3{
    display: block;
    font-size: 1.2rem;
    font-style: normal;
    color: #999;
}

.product .product-content .item .info{
    float: left;
    width: 48%;
    padding: 1rem;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 14px;
}

.product .product-content .item .info p{
    float: left;
    display: inline-block;
    text-align: center;
    width: 56%;
}

.product .product-content .item .info p:last-child{
    width: 40%;
}

.product .product-content .item p span{
    display: block;
    font-size: 2.4rem;
    color: #ff9900;
}

.product .product-content .item  .buy{
    float: left;
    width: calc(22% - 4.4rem);
    padding: 1rem;
}

.product .product-content .item .buy a{
    display: block;
    width: 90%;
    margin: 1.5rem auto;
    max-width: 12rem;
    line-height: 4rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #ff9900;
    border-radius: 5px;
}

.product .product-content .item .buy a:hover,
.product .product-content .item .buy a:active{
    background-color: #ffc468;
}

.product .product-content .item .buy a.disabled{
    background-color: #ccc !important;
    cursor:not-allowed; /*表示禁止*/
}


/* ==============
    底部导航
   ==============  */

 .footer{
    padding: 3rem 0;
    background-color: #fff;
    border-top: 2px solid #eee;
 }

.footer-content{
    width: 90%;
    margin: 0 auto;
}

.footer-content .brand{
    float: left;
    display:block;
    filter: grayscale(100%);
    -webkit-filter:graycale(100%);
    width: 20%;
    height:35px;
    background: url(../img/logo@2x.png) no-repeat left;
    background-size:150px 35px;
}

.footer-content ul{
    float:left;
    width:15%;
}


.footer-content ul li.title{
    font-size: 1.6rem;
    line-height: 3rem;
}









/* ==============
    底部导航
   ==============  */

  footer{
    width:100%;
    padding:3rem 0 5rem;
    background-color: #ededed;
  }
  footer{
    text-align: center;
  }

  footer ul li{
    display: inline-block;
  }

  footer ul li .icon{
    display: inline-block;
    text-indent:-999rem; /*隐藏文字*/
    margin-right:1.5rem;
    background: url(https://i.alipayobjects.com/e/201307/jebmKcbrh.png) no-repeat;
    background-size: 466px 447px;
    overflow:hidden;
  }


footer ul li .icon-zfywxk{
    width:38px;
    height:27px;
    background-position: -369px -45px;
}

footer ul li .icon-pcirk{
    width:78px;
    height:27px;
    background-position: -110px -96px;
}

footer ul li .icon-visayz{
    width:36px;
    height:27px;
    background-position: -426px -90px;
}

footer ul li .icon-vsjmfw{
    width:63px;
    height:27px;
    margin-right:13px;
    background-position: -401px -186px;
}

footer ul li .icon-wlgs{
    width:22px;
    height:27px;
    background-position: -48px -48px;
}

footer ul li .icon-rzcx{
    width:75px;
    height:27px;
    background-position: 0 -320px;
}

footer ul li .icon-gs{
    width:30px;
    height:30px;
    margin-right: 0;
    background: url(https://os.alipayobjects.com/rmsportal/lybcjqloSPjMAFg.png) no-repeat;
    background-size: 30px;
}
footer p{
    text-align: center;
    color:#999;
}

响应式布局开发 -4