一.em,rem.vm,vw的計算方式
em:它是相對長度單位.相對于當前對象內(nèi)文本的字體尺寸.如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對于瀏覽器的默認字體尺寸:如果有設(shè)置,則是相對于你設(shè)置過后的字體大小.同時 em會繼承父級元素的字體大小.
rem:它是相對于根節(jié)點默認字體大小.
vw,vh:分別為視口寬度,視口高度單位;
1% vw(vh):1%瀏覽器視口寬度(視口高度)
比如瀏覽器默認字體大小為16px的情況下,不作任何設(shè)置的話2em=32px;2rem=32px.若是在<body>中設(shè)置過font-size=a,則2em=2a;2rem=16px;若是在<html>中設(shè)置font-size=a,則2em=16px;2rem=2a.也就是說在沒有任何字體大小設(shè)置情況下,em,rem都是以默認字體大小為基數(shù);在有字體大小設(shè)置情況下em已<body>或是所在元素中的大小設(shè)置為參照基數(shù).而rem只以<html>中的設(shè)置為參照.
二.顏色的幾種寫法
1.顏色關(guān)鍵字
color:red; background-color:blue;
2.RGB
color:rgb(111,222,333); background-color:rgb(111,222,333);
3.十六進制
color:#eeffcc(#efc); background-color:e8a6b3;
透明色如何表示
可以用RGBA 或HSLA(色相.飽和度,明度,透明度)
color:rgba(111,222,333,0.3);background-color:rgba(111,222,333,0.8);小數(shù)點表示透明度
color:hsla(111,222,333,0.3);background-color:hsla(111,222,333,0.8);
透明效果如何實現(xiàn)
用opacity
opacity:0.5;
rgb:(111,222,333);小數(shù)點表示透明度
currentColor如何來用
用于不知道當前元素的顏色而又需要設(shè)置與當前顏色一致的顏色.
三.盒模型有哪些屬性
width:寬度
height:高度
border(top,right,bottom,left):邊框?qū)挾?br>
margin(top,right,bottom,left):當前元素邊框與周圍元素的距離
padding(top,right,bottom,left):內(nèi)容與邊框的距離
四.標簽的默認樣式
即使沒有給他們定義樣式屬性值志秃，他們在瀏覽器中顯示時，也會具有各種樣式屬性
body{
display:block;
margin:8px;
}
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
text-decoration: underline;
}
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
dd {
display: block;
-webkit-margin-start: 40px;
}
五.列舉display 的幾個值
| 值 | 作用 |
|---|---|
| block | 塊對象的默認值。用該值為對象之后添加新行 |
| none | 隱藏對象。與visibility屬性的hidden值不同卦尊，其不為被隱藏的對象保留其物理空間 |
| inline | 內(nèi)聯(lián)對象的默認值龄坪。用該值將從對象中刪除行 |
| compact | 分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象 |
| marker | 指定內(nèi)容在容器對象之前或之后。要使用此參數(shù)图毕，對象必須和:after及:before 偽元素一起使用 |
| inline-table | 將表格顯示為無前后換行的內(nèi)聯(lián)對象或內(nèi)聯(lián)容 |
| list-item | 將塊對象指定為列表項目惫皱。并可以添加可選項目標志 |
| run-in | 分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象 |
| table | 將對象作為塊元素級的表格顯示 |
| table-caption | 將對象作為表格標題顯示 |
| table-cell | 將對象作為表格單元格顯示 |
| table-column | 將對象作為表格列顯示 |
| table-column-group | 將對象作為表格列組顯示 |
| table-header-group | 將對象作為表格標題組顯示 |
| table-footer-group | 將對象作為表格腳注組顯示 |
| table-row | 將對象作為表格行顯示 |
| table-row-group | 將對象作為表格行組顯示 |
六.塊級元素和行內(nèi)元素分別有什么特點
塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行內(nèi)元素：span, strong, em, br, img , input, label, select, textarea, cite
區(qū)別
1）塊級元素會獨占一行像樊，其寬度自動填滿其父元素寬度
行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排列在同一行里逸吵，直到一行排不下凶硅，才會換行，其寬度隨元素的內(nèi)容而變化
2） 塊級元素可以設(shè)置 width, height屬性扫皱，行內(nèi)元素設(shè)置width, height無效
3 ) 塊級元素可以設(shè)置margin 和 padding. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果捷绑。
七.box-sizing: border-box有什么用
用于更改用于計算元素寬度和高度的默認的 CSS 盒模型韩脑。
.box {
width: 300px;
border: 10px;
}
這樣渲染出來的為320px;
.box {
width: 300px;
border: 10px;
padding: 10px;
box-sizing: border-box;
}
這樣渲染出來的為300px;
八.inline-block有什么作用？inline-block的縫隙是怎么回事粹污？如何解決
1.使元素具有寬度高度特性段多，又具有同行特性
2.相鄰元素之間有換行或者出現(xiàn)空格會導(dǎo)致有縫隙
3.①負margin
②給其父元素設(shè)置font-size:0;給其自身設(shè)置實際需要的字號大小
③元素之間不換行,用<span>
