盒子模型
content互订、margin、padding侵贵、border;
（IE盒模型和標(biāo)準(zhǔn)盒模型的區(qū)別）———IE盒模型的content包括border娩怎、padding
position的static、relative泛粹、absolute遂铡、fixed它們的區(qū)別？
- 絕對定位晶姊，元素會相對于值不為 static 的第一個父元素進(jìn)行定位(會一直往父級節(jié)點(diǎn)查找)扒接，且它是脫離正常文檔流、不占位的; fixed:同樣是絕對定位们衙，但元素會相對于瀏覽器窗口進(jìn)行定位钾怔，而不是父節(jié)點(diǎn)的position (IE9以下不支持);
- relative:相對定位，元素相對于自身正常位置進(jìn)行定位,屬于正常文檔流;
- static: position的默認(rèn)值砍艾，也就是沒有定位蒂教，當(dāng)元素設(shè)置該屬性后（ top、bottom脆荷、left、right、z-index ）等屬性將失效;
- inherit:貌似沒用過蜓谋，查了一下文檔“規(guī)定從父元素繼承 position 屬性的值”;
水平居中
<div class="div-demo"></div>
<style>
.div-demo {
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<style>
.div-demo {
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
</style>
<body class="container">
<div class="div-demo"></div>
<style>
html,body {
height:100%;
}
.container {
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-demo {
width:100px;
height:100px;
background-color:#06c;
}
</style>
</body>
三角形icon
<body class="container">
<div class="div-angles"></div>
<div class="div-angles right"></div>
<div class="div-angles bottom"></div>
<div class="div-angles left"></div>
<style>
html,body {
height:100%;
}
.container {
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-angles {
width: 0;
height: 0;
border-style: solid;
border-width:30px;
width:0px;
height:0px;
border-color: transparent transparent #06c transparent;
}
.right {
border-color: transparent transparent transparent #06c ;
}
.bottom {
border-color: #06c transparent transparent ;
}
.left {
border-color: transparent #06c transparent transparent;
}
</style>
</body>
什么是外邊距合并,項(xiàng)目中是否有遇到過?
BFC梦皮、
:before 和 :after兩偽元素，平時都是使用雙冒號還是單冒號桃焕？ 有什么區(qū)別剑肯？以及它們的作用：
- 單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素观堂。（偽元素由雙冒號和偽元素名稱組成） ;
- 雙冒號是在當(dāng)前規(guī)范中引入的让网，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時支持舊的已經(jīng)存在的偽元素寫法师痕， 比如:first-line溃睹、:first-letter、:before胰坟、:after等因篇， 而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法;
- 想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before笔横，之后則使用::after竞滓；
- 在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后吹缔。 如果按堆棧視角商佑，::after生成的內(nèi)容會在::before生成的內(nèi)容之上;
Chrome、Safari等瀏覽器厢塘，當(dāng)表單提交用戶選擇記住密碼后莉御，下次自動填充表單的背景變成黃色，影響了視覺體驗(yàn)是否可以修改俗冻？
<style>
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;//設(shè)置成元素原本的顏色
background-image: none;
color: rgb(0, 0, 0);
}
</style>
瀏覽器的最小字體為12px礁叔，如果還想再小，該怎么做迄薄？
- CSS3：css3的樣式transform: scale(0.7)琅关，scale有縮放功能;
移動端的邊框0.5px,你有幾種方式實(shí)現(xiàn)？
- 偽類縮放：現(xiàn)在用的比較多的方式之一 :after 1px然后transform: scale(0.5);基本能滿足所有場景讥蔽，對于圓角的處理也很方便
