CSS常見樣式

一.塊級(jí)元素和行內(nèi)元素分別有哪些?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別

塊級(jí)元素:

  • address - 地址
  • blockquote - 塊引用
  • center - 居中對(duì)齊
  • dir - 目錄列表
  • div - 常用塊級(jí)容易录别,也是css layout的主要標(biāo)簽
  • dl - 定義列表
  • fieldset - form控制組
  • form - 交互表單
  • h1 - 大標(biāo)題
  • h2 - 副標(biāo)題
  • h3 - 3級(jí)標(biāo)題
  • h4 - 4級(jí)標(biāo)題
  • h5 - 5級(jí)標(biāo)題
  • h6 - 6級(jí)標(biāo)題
  • hr - 水平分隔線
  • isindex - input prompt
  • menu - 菜單列表
  • noframes - frames可選內(nèi)容褐健,(對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
  • noscript - )可選腳本內(nèi)容(對(duì)于不支持script的瀏覽器顯示此內(nèi)容)
  • ol - 排序表單
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

行內(nèi)元素:

  • a - 錨點(diǎn)
  • abbr - 縮寫
  • acronym - 首字
  • b - 粗體(不推薦)
  • bdo - bidi override
  • big - 大字體
  • br - 換行
  • cite - 引用
  • code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
  • dfn - 定義字段
  • em - 強(qiáng)調(diào)
  • font - 字體設(shè)定(不推薦)
  • i - 斜體
  • img - 圖片
  • input - 輸入框
  • kbd - 定義鍵盤文本
  • label - 表格標(biāo)簽
  • q - 短引用
  • s - 中劃線(不推薦)
  • samp - 定義范例計(jì)算機(jī)代碼
  • select - 項(xiàng)目選擇
  • small - 小字體文本
  • span - 常用內(nèi)聯(lián)容器通熄,定義文本內(nèi)區(qū)塊
  • strike - 中劃線
  • strong - 粗體強(qiáng)調(diào)
  • sub - 下標(biāo)
  • sup - 上標(biāo)
  • textarea - 多行文本輸入框
  • tt - 電傳文本
  • u - 下劃線
  • var - 定義變量

區(qū)別:
1.塊級(jí)元素會(huì)獨(dú)占一行,其寬度自動(dòng)填滿其父元素寬度;
行內(nèi)元素不會(huì)獨(dú)占一行混卵,相鄰的行內(nèi)元素會(huì)排列在同一行里题翰,直到一行排不下恶阴,才會(huì)換行,其寬度隨元素的內(nèi)容而變化豹障。
2.塊級(jí)元素內(nèi)可以包含塊級(jí)元素和行內(nèi)元素冯事,而行內(nèi)元素只能包含文本和行內(nèi)元素。
3.塊級(jí)元素可以設(shè)置 width, height屬性血公,行內(nèi)元素設(shè)置width, height無效昵仅。
【注意:塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行的】
4.塊級(jí)元素可以設(shè)置margin 和 padding累魔,行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果摔笤,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會(huì)產(chǎn)生邊距效果够滑。(水平方向有效,豎直方向無效)

二.什么是 CSS 繼承? 哪些屬性能繼承籍茧,哪些不能版述?

繼承性是指指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性,即子元素可以繼承父元素的屬性寞冯。
一渴析、無繼承性的屬性
1、display:規(guī)定元素應(yīng)該生成的框的類型
2吮龄、文本屬性:
vertical-align:垂直文本對(duì)齊
text-decoration:規(guī)定添加到文本的裝飾
text-shadow:文本陰影效果
white-space:空白符的處理
unicode-bidi:設(shè)置文本的方向
3俭茧、盒子模型的屬性:width、height漓帚、margin 母债、margin-top、margin-right尝抖、margin-bottom毡们、margin-left、border昧辽、border-style衙熔、border-top-style、border-right-style搅荞、border-bottom-style红氯、border-left-style、border-width咕痛、border-top-width痢甘、border-right-right、border-bottom-width茉贡、border-left-width塞栅、border-color、border-top-color腔丧、border-right-color构蹬、border-bottom-color、border-left-color悔据、border-top、border-right俗壹、border-bottom科汗、border-left、padding绷雏、padding-top头滔、padding-right怖亭、padding-bottom、padding-left
4坤检、背景屬性:background兴猩、background-color、background-image早歇、background-repeat倾芝、background-position、background-attachment
5箭跳、定位屬性:float晨另、clear、position谱姓、top借尿、right、bottom屉来、left路翻、min-width、min-height茄靠、max-width茂契、max-height、overflow嘹黔、clip账嚎、z-index
6、生成內(nèi)容屬性:content儡蔓、counter-reset郭蕉、counter-increment
7、輪廓樣式屬性:outline-style喂江、outline-width召锈、outline-color、outline
8获询、頁面樣式屬性:size涨岁、page-break-before、page-break-after
9吉嚣、聲音樣式屬性:pause-before梢薪、pause-after、pause尝哆、cue-before秉撇、cue-after、cue、play-during
二琐馆、有繼承性的屬性
1规阀、字體系列屬性
font:組合字體
font-family:規(guī)定元素的字體系列
font-weight:設(shè)置字體的粗細(xì)
font-size:設(shè)置字體的尺寸
font-style:定義字體的風(fēng)格
font-variant:設(shè)置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫瘦麸,但是所有使用小型大寫字體的字母與其余文本相比谁撼,其字體尺寸更小。
font-stretch:對(duì)當(dāng)前的 font-family 進(jìn)行伸縮變形滋饲。所有主流瀏覽器都不支持厉碟。
font-size-adjust:為某個(gè)元素規(guī)定一個(gè) aspect 值,這樣就可以保持首選字體的 x-height了赌。
2墨榄、文本系列屬性
text-indent:文本縮進(jìn)
text-align:文本水平對(duì)齊
line-height:行高
word-spacing:增加或減少單詞間的空白(即字間隔)
letter-spacing:增加或減少字符間的空白(字符間距)
text-transform:控制文本大小寫
direction:規(guī)定文本的書寫方向
color:文本顏色
3、元素可見性:visibility
4勿她、表格布局屬性:caption-side袄秩、border-collapse、border-spacing逢并、empty-cells之剧、table-layout
5、列表布局屬性:list-style-type砍聊、list-style-image背稼、list-style-position、list-style
6玻蝌、生成內(nèi)容屬性:quotes
7蟹肘、光標(biāo)屬性:cursor
8、頁面樣式屬性:page俯树、page-break-inside帘腹、windows、orphans
9许饿、聲音樣式屬性:speak阳欲、speak-punctuation、speak-numeral陋率、speak-header球化、speech-rate、volume瓦糟、voice-family筒愚、pitch、pitch-range菩浙、stress锨能、richness扯再、、azimuth址遇、elevation
三、所有元素可以繼承的屬性
1斋竞、元素可見性:visibility
2倔约、光標(biāo)屬性:cursor
四、內(nèi)聯(lián)元素可以繼承的屬性
1坝初、字體系列屬性
2浸剩、除text-indent、text-align之外的文本系列屬性
五鳄袍、塊級(jí)元素可以繼承的屬性
1绢要、text-indent、text-align

三.如何讓塊級(jí)元素水平居中拗小?如何讓行內(nèi)元素水平居中?

塊級(jí)元素居中:{margin:0 auto}重罪;
行內(nèi)元素居中: {text-align:center};

四.用 CSS 實(shí)現(xiàn)一個(gè)三角形

五.單行文本溢出加 ...如何實(shí)現(xiàn)?

white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;

當(dāng)然還需要設(shè)置寬度width屬性來兼容部分瀏覽哀九。

六.px, em, rem 有什么區(qū)別

px:
px實(shí)際上就是像素剿配,用px設(shè)置字體大小時(shí),比較穩(wěn)定和精確阅束。但是這種方法存在一個(gè)問題呼胚,當(dāng)用戶在瀏覽器中瀏覽我們制作的Web頁面時(shí),如果改變了瀏覽器的縮放息裸,這時(shí)會(huì)使用我們的Web頁面布局被打破蝇更。這樣對(duì)于那些關(guān)心自己網(wǎng)站可用性的用戶來說,就是一個(gè)大問題了呼盆。因此年扩,這時(shí)就提出了使用“em”來定義Web頁面的字體。
em:
em就是根據(jù)基準(zhǔn)來縮放字體的大小宿亡。em實(shí)質(zhì)是一個(gè)相對(duì)值常遂,而非具體的數(shù)值。這種技術(shù)需要一個(gè)參考點(diǎn)挽荠,一般都是以<body>的“font-size”為基準(zhǔn)克胳。另外,em是相對(duì)于父元素的屬性而計(jì)算的圈匆。
rem:
em是相對(duì)于其父元素來設(shè)置字體大小的漠另,這樣就會(huì)存在一個(gè)問題,進(jìn)行任何元素設(shè)置跃赚,都有可能需要知道他父元素的大小笆搓。而rem是相對(duì)于根元素<html>性湿,這樣就意味著,我們只需要在根元素確定一個(gè)參考值满败。

七.解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

表示字體大小為12px肤频,
行高為1.5倍字體大小,
字體在tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif 這些字體中依次選擇(若都不存在算墨,則為瀏覽器默認(rèn)字體)
多個(gè)單詞不加引號(hào)會(huì)識(shí)別成多個(gè)元素宵荒,當(dāng)有空格或者Unicode碼時(shí),需要加引號(hào)
"\5b8b\4f53"是對(duì)應(yīng)字體的unicode編碼净嘀,表示黑體报咳。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市挖藏,隨后出現(xiàn)的幾起案子暑刃,更是在濱河造成了極大的恐慌,老刑警劉巖膜眠,帶你破解...
    沈念sama閱讀 219,490評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件岩臣,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡柴底,警方通過查閱死者的電腦和手機(jī)婿脸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來柄驻,“玉大人狐树,你說我怎么就攤上這事『枧В” “怎么了抑钟?”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)野哭。 經(jīng)常有香客問我在塔,道長(zhǎng),這世上最難降的妖魔是什么拨黔? 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1 295
  • 正文 為了忘掉前任蛔溃,我火速辦了婚禮,結(jié)果婚禮上篱蝇,老公的妹妹穿的比我還像新娘贺待。我一直安慰自己,他們只是感情好零截,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6 393
  • 文/花漫 我一把揭開白布麸塞。 她就那樣靜靜地躺著,像睡著了一般涧衙。 火紅的嫁衣襯著肌膚如雪哪工。 梳的紋絲不亂的頭發(fā)上奥此,一...
    開封第一講書人閱讀 51,754評(píng)論 1 307
  • 那天,我揣著相機(jī)與錄音雁比,去河邊找鬼稚虎。 笑死,一個(gè)胖子當(dāng)著我的面吹牛偎捎,可吹牛的內(nèi)容都是我干的祥绞。 我是一名探鬼主播,決...
    沈念sama閱讀 40,464評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼鸭限,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了两踏?” 一聲冷哼從身側(cè)響起败京,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎梦染,沒想到半個(gè)月后赡麦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡帕识,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3 338
  • 正文 我和宋清朗相戀三年泛粹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肮疗。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡晶姊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伪货,到底是詐尸還是另有隱情们衙,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評(píng)論 5 346
  • 正文 年R本政府宣布碱呼,位于F島的核電站蒙挑,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏愚臀。R本人自食惡果不足惜忆蚀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望姑裂。 院中可真熱鬧馋袜,春花似錦、人聲如沸炭分。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽捧毛。三九已至观堂,卻和暖如春让网,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背师痕。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工溃睹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人胰坟。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3 373
  • 正文 我出身青樓因篇,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親笔横。 傳聞我的和親對(duì)象是個(gè)殘疾皇子竞滓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 一吹缔、塊級(jí)元素和行內(nèi)元素分別有哪些商佑?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別 1.行內(nèi)元素 a - 錨點(diǎn) abbr - 縮寫...
    任少鵬閱讀 264評(píng)論 0 0
  • 1. 塊級(jí)元素和行內(nèi)元素分別有哪些?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別 塊級(jí)元素:div , p , form, u...
    Rising_suns閱讀 185評(píng)論 0 0
  • 塊級(jí)元素和行內(nèi)元素分別有哪些厢塘?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別茶没。 常見的塊級(jí)元素和行內(nèi)元素: 塊級(jí)元素:h/p/d...
    饑人谷_tanfei閱讀 247評(píng)論 0 0
  • 那個(gè)小王,網(wǎng)站上那篇文章的配圖怎么那么丑吶晚碾,你去做一張?zhí)鎿Q一下抓半;這個(gè)文章缺個(gè)封面圖,小王你去做個(gè)吧格嘁。 |作為一名互...
    高智豪閱讀 570評(píng)論 1 3