为什么要初始化css?

html-css013

为什么要初始化css?,第1张

初始化css可以避免不必要的麻烦。

很多html都会有默认属性,而且对不同浏览默认值可能不同,很容易导致兼容性问题。而且对于默认值,也容易被自己或他人忽略而造成样式没有达到预期效果。

比如body在浏览器中会有默认的margin如果不清除,对于我们后面的代码编写会造成影响,明明没有写的属性却被设置了。对于其他如p元素、input元素等亦是如此。

@charset "utf-8"

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,button,input,textarea{padding:0pxmargin:0pxborder:none}

a,a:visited{text-decoration:none}

a:active,a:hover{text-decoration:none}

a:focus,input:hover,button:hover,input[type='button']:hover{outline:none}

:focus{outline:0}

i,cite{font-style: normal}

b, strong { font-weight: bold }

h1,h2,h3,h4,h5,h6{font-weight: normal}

li{vertical-align:bottomlist-style-type:none}

input[type=checkbox],input[type=email],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text]{vertical-align:middleoutline:0-webkit-appearance:none-webkit-user-select:text}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999}

select,textarea{outline:0-webkit-appearance:none}

textarea{-webkit-user-select:text}

table{border-collapse:collapseborder-spacing:0}

*{-webkit-user-select:none-webkit-tap-highlight-color:rgba(0,0,0,0)-webkit-touch-callout:none}

body, button, input, select, textarea{outline:none}

button, input, optgroup, select, textarea { color: inheritfont: inheritmargin: 0 }

input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)-webkit-appearance:noneborder:0border-radius:0}

button { overflow: visible }

button, select { text-transform: none }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: buttoncursor: pointer }

button[disabled], html input[disabled] { cursor: default }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0padding: 0 }

input { line-height: normal }

input[type="checkbox"], input[type="radio"] { box-sizing: border-boxpadding: 0 }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto }

input[type="search"] { -webkit-appearance: textfield-moz-box-sizing: content-box-webkit-box-sizing: content-boxbox-sizing: content-box }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none }

table { border-collapse: collapseborder-spacing: 0 }

td, th { padding: 0 }

/* 禁止webkit横屏改变字体大小*/

html{-webkit-text-size-adjust:100%-ms-text-size-adjust:100%}

/* 设置HTML5元素为块*/

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:blockpadding:0pxmargin:0pxborder:none}

/* 超出隐藏*/

.overflow{overflow:hidden}

/* 点击去除阴影*/

a,button,input,i{-webkit-tap-highlight-color:rgba(0,0,0,0)-moz-tap-highlight-color:rgba(0,0,0,0)-ms-tap-highlight-color:rgba(0,0,0,0)tap-highlight-color:rgba(0,0,0,0)}

/* float*/

.fl{float: left}

.fr{float: right}

/* 图片自适应调整 并解决图片缩放的失真问题*/img{max-width:100%height:autoborder:noneinterpolation-mode: bicubic}

/* 文字居中*/

.txt-center{text-align:center}

.txt-justify{text-align:justifytext-justify:inter-ideograph}

/* 自动换行*/

.word-auto{word-wrap: break-wordword-break: normal}

/* 自动居中*/

.word-hidden{text-overflow: ellipsiswhite-space: nowrapoverflow: hidden}

.mg-auto{margin-left:automargin-right:autoposition:relative}

/* clearfix*/

.clearfix:after{visibility: hiddendisplay: blockfont-size: 0content:" "clear: bothheight: 0}

.clearfix{*zoom:1}

.middle{vertical-align: middle}

body{-webkit-text-size-adjust:none-webkit-tap-highlight-color:rgba(0,0,0,0)-webkit-font-smoothing:antialiased-moz-user-select:noneoverflow-x:hidden -webkit-user-select: none}