之前有整理過(guò)一部分知識(shí)點(diǎn), 一直沒(méi)有發(fā)布, 因?yàn)槎际怯嘘P(guān) CSS 方面的零散內(nèi)容; 現(xiàn)在想想無(wú)論做什么都需要慢慢積累, 所以還是決定將之前整理的相關(guān)內(nèi)容驗(yàn)證之后慢慢分享給你們, 現(xiàn)在看到感覺(jué)還挺有意思 。
好了廢話(huà)不多說(shuō), 直接上代碼以及圖例(為了讓大家方便閱讀, 都有自己驗(yàn)證過(guò)程的一些圖片作為分享) 。
1. Reset 原因 (為什么要初始化CSS樣式)：
1. 因?yàn)闉g覽器的品種很多妆距，每個(gè)瀏覽器的默認(rèn)樣式也是不同的, 會(huì)造成一些布局上的困擾;
2. 如 ul 默認(rèn)帶有縮進(jìn)樣式, 在IE下, 它的縮進(jìn)是由 margin 實(shí)現(xiàn)的, 而在 Firefox 下卻是由 padding 實(shí)現(xiàn)的;
3. 為了讓頁(yè)面獲得瀏覽器跨瀏覽器的兼容性玲昧，需要用重置文件css代碼覆蓋瀏覽器默認(rèn)的樣式來(lái)統(tǒng)一樣式 棺棵。
2. Reset 是什么?
1. Reset 是重置的意思
2. 現(xiàn)在的瀏覽器五花八門(mén)挂据，就 ie 來(lái)說(shuō)就有好多版本组贺，還有火狐丸边，Chrome等等叠必。每個(gè)瀏覽器的默認(rèn)樣式也是不同的。所以就要考慮一個(gè)兼容問(wèn)題原环。比如你用 ie 打開(kāi)網(wǎng)站正常挠唆，但是用火狐或其他瀏覽器打開(kāi)的時(shí)候，網(wǎng)站就變形了嘱吗。
3. Reset 代碼
/*公共樣式--開(kāi)始*/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
*{box-sizing: border-box;}
html, body {
height: 100%;
}
body {
font-family: "Microsoft YaHei";
font-size:14px;
color:#333;
}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,ol {
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
a {
text-decoration: none;
color: #232323;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
input, textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
/* 對(duì)一些公共樣式設(shè)置公共的 class 類(lèi)名, 使用時(shí)在需要的元素標(biāo)簽內(nèi)添加對(duì)應(yīng)的 class 類(lèi)名即可; 不需要的可以將下面的代碼刪除 */
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ".";
width: 0;
height: 0;
visibility: hidden;
display: block;
clear: both;
overflow:hidden;
}
.fl {
float: left
}
.fr {
float: right
}
.tl {
text-align: left;
}
.tc {
text-align: center
}
.tr {
text-align: right;
}
.ellipse {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline{
display: inline-block;
*display: inline;
*zoom: 1;
}
