塊級(jí)元素和行內(nèi)元素分別有哪些?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別
- 塊級(jí)元素
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
- 行內(nèi)元素
em strong span a br img
button iput label select textarea
code script
塊級(jí)元素與行內(nèi)元素的區(qū)別
- 塊級(jí)可以包含塊級(jí)和行內(nèi)盾似,行內(nèi)只能包含文本和行內(nèi)
- 塊級(jí)占據(jù)一整行空間,行內(nèi)占據(jù)自身寬度空間
- 寬高設(shè)置雪标、內(nèi)外邊距的差異零院,行內(nèi)元素設(shè)置設(shè)置寬高、內(nèi)外邊距上下無(wú)效(對(duì)布局來(lái)說(shuō))村刨、左右有效
- 塊級(jí)元素總是從新行開(kāi)始告抄,豎直排列而行內(nèi)元素是水平排列
什么是 CSS 繼承? 哪些屬性能繼承,哪些不能嵌牺?
繼承是一種機(jī)制打洼,它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素,還可以應(yīng)用于它的后代逆粹。例如一個(gè)BODY定義了的顏色值也會(huì)應(yīng)用到段落的文本中
有些屬性能繼承募疮,也有些屬性是不能繼承
css樣式表屬性可以繼承的有如下:
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
其中包括列表相關(guān)屬性
list-style-image, list-style-position,
list-style-type, list-style
文本相關(guān)屬性
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height,
text-align, text-indent, texttransform,
word-spacing
以及color屬性
另外,F(xiàn)ont-size的子類(lèi)繼承的不是實(shí)際值枯饿,而是計(jì)算后的值
如何讓塊級(jí)元素水平居中酝锅?如何讓行內(nèi)元素水平居中?
塊級(jí)元素相對(duì)與父元素居中
margin:0 auto
行內(nèi)元素居中text-algin:center
用 CSS 實(shí)現(xiàn)一個(gè)三角形
可以使用邊框來(lái)做三角形
.t1{
height:0;
width:0px;
border-top:solid 20px red;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
border-bottom:solid 20px blue;
}
.t2{
height:0;
width:0px;
border-top:solid 20px red;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
border-bottom:solid 20px transparent;
}
單行文本溢出加 ...如何實(shí)現(xiàn)?
.card > h3{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
###px, em, rem 有什么區(qū)別
>- px: 固定單位
- em: 相對(duì)單位诡必,相對(duì)于父元素字體大小 相當(dāng)于百分比
- rem: 相對(duì)單位奢方,相對(duì)于根元素(html)字體大小
>>其他表示大小的元素
>>- 百分比(寬高?文字大邪质妗蟋字?line-height? position?)
>>- vw vh: 相對(duì)單位,1vw 為屏幕寬度的1% [兼容性](http://caniuse.com/#search=vw)
###解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
>設(shè)置body的字體如下 原始大小12px,防縮1.5倍實(shí)際大小18px
設(shè)置font-family為tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
從前到后如果前面的沒(méi)有則選擇后面的
'Hiragino Sans GB'加引號(hào)的原因是中間有空格扭勉,防止認(rèn)為是兩個(gè)參數(shù)
'\5b8b\4f53'是unicode表示黑體
>>在 CSS 中設(shè)置字體時(shí)鹊奖,直接寫(xiě)字體中文或英文名稱(chēng)瀏覽器都能識(shí)別,直接寫(xiě)中文的情況下編碼(GB2312涂炎、UTF-8 等)不匹配時(shí)會(huì)產(chǎn)生亂碼忠聚。保險(xiǎn)的方式是將字體名稱(chēng)用Unicode來(lái)表示
>>
>>宋體 | SimSun | \5B8B\4F53 黑體 | SimHei | \9ED1\4F53 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
打開(kāi)控制臺(tái) escape('微軟雅黑')设哗,把 %u替換成 \,即可獲取對(duì)應(yīng)Unicode編碼