css每日一報(自己積累平時寫法)

1、pc端共用的樣式:

*{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;font-family:"Microsoft Yahei","微軟雅黑","宋體",Arial,Georgia,Serif;}
html,body{background:#ffffff;font-size:12px;color:#333;}
ul,ol,li,i,em,cite,u,b,h1,h2,h3,h4,h5,h6{list-style:0 none; font-style: normal;text-decoration:none;font-weight: normal;}
a,img{border:0 none;text-decoration:none;-ms-interpolation-mode: bicubic;text-decoration:none; outline:0 none;}
a{color:#333;-moz-transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; cursor:pointer;}
table,tr,td,th,thead,tfoot,tbody{border-collapse:collapse;border-spacing:0;}
button, input, select, textarea,form{ outline:0 none; overflow:visible; font-family: "Microsoft Yahei","微軟雅黑"; background-color: #FFF;}
p{word-wrap:break-word}
.text-overflow{ display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.text-overflow_two{ overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.text-overflow_three{ overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.tianstion{ transition:all  0.4s; -moz-transition:all  0.4s; -ms-transition:all  0.4s; -o-transition:all  0.4s;-webkit-transition:all  0.4s;} 
.clear20{clear:both;height:20px;overflow:hidden; *zoom:1;}
.clear{clear:both;overflow:hidden;*zoom:1;}
.fl{float:left}
.fr{float:right}
.mgat{margin:0 auto}

2、 a標籤的各種狀態

    a:link:連接平常的狀態

    a:visited:連接被訪問過之後

    a:hover:鼠標放到連接上的時候

    a:active:連接被按下的時候 

3、box-sizing:content-box(在寬度和高度之外繪製元素的內邊距和邊框。) | border-box (意思就是當元素的寬度和高度固定了,那麼padding了距離之後,元素的寬度和高度不會改變。) | inherit(規定應從父元素繼承 box-sizing 屬性的值。)

這個的作用:就是把內邊距和邊框的和歸納在了整個元素的寬度和高度中了。這可令瀏覽器呈現出帶有指定寬度和高度的框,並把邊框和內邊距放入框中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章