任務(wù)8 css的常用樣式

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

塊級元素
div h1 ~ h6(標(biāo)題) p(段落) hr(橫線) form ul li dl dd ol dt(列表) pre table tr td th(表格)
行內(nèi)元素
em strong span a br img buttoon input label select textarea code script code
區(qū)別:

  1. 塊級可以包含塊級和行內(nèi)消返,行內(nèi)只能包含文本和行內(nèi)
  2. 塊級占據(jù)一整行空間,行內(nèi)占據(jù)自身寬度空間
  3. 寬高設(shè)置 行內(nèi)不行 塊級可以
  4. 塊級元素可以設(shè)置 上下margin 行內(nèi)元素不行
    5.行內(nèi)元素使用padding 對于實(shí)際高度無效但是可以撐開整個元素的高度

2. 什么是 CSS 繼承? 哪些屬性能繼承宇攻,哪些不能倡勇?

父元素樣式 可以應(yīng)用于后代
可繼承屬性:

  1. 字體系列屬性
font:組合字體
font-family:規(guī)定元素的字體系列
font-weight:設(shè)置字體的粗細(xì)
font-size:設(shè)置字體的尺寸
font-style:定義字體的風(fēng)格
font-variant:設(shè)置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫夸浅,但是所有使用小型大寫字體的字母與其余文本相比扔役,其字體尺寸更小。
font-stretch:對當(dāng)前的 font-family 進(jìn)行伸縮變形亿胸。所有主流瀏覽器都不支持预皇。
font-size-adjust:為某個元素規(guī)定一個 aspect 值婉刀,這樣就可以保持首選字體的 x-height。
  1. 文本系列屬性
text-indent:文本縮進(jìn)
text-align:文本水平對齊
line-height:行高
word-spacing:增加或減少單詞間的空白(即字間隔)
letter-spacing:增加或減少字符間的空白(字符間距)
text-transform:控制文本大小寫
direction:規(guī)定文本的書寫方向
color:文本顏色
  1. 元素可見性:
    visibility
  2. 表格布局屬性
caption-side溯街、border-collapse洋丐、border-spacing、empty-cells友绝、table-layout
  1. 列表布局屬性
list-style-type、list-style-image迁客、list-style-position、list-style
  1. 光標(biāo)屬性:
    cursor

不可繼承屬性

1粘室、display:規(guī)定元素應(yīng)該生成的框的類型

2卜范、文本屬性:

vertical-align:垂直文本對齊

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

3. 如何讓塊級元素水平居中?如何讓行內(nèi)元素水平居中?

塊級:margin: 0 auto
行內(nèi): 父元素text-align:center

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

.t1 {
  height: 0px;
  width: 0px;
  border-top: 20px solid black;
  border-right: 20px solid transparent;
  border-bottom:20px solid transparent;
  border-left: 20px solid transparent;
}

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

/*不折行*/
white-space:nowrap;
/*超出部分隱藏*/
overflow:hidden;
/*顯示省略符號來代表被修剪的文本熟菲。*/
text-overflow:ellipsis;

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

px:(Pixel)相對長度單位朴恳。像素px是相對于顯示器屏幕分辨率而言的
em: 相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸呆贿。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對于瀏覽器的默認(rèn)字體尺寸
rem: 為元素設(shè)定字體大小時做入,仍然是相對大小,但相對的只是HTML根元素

塊級元素行內(nèi)元素

  • 塊級(block-level); 行內(nèi)(內(nèi)聯(lián)壶运、inline-level)
  • 塊級可以包含塊級和行內(nèi)浪秘,行內(nèi)只能包含文本和行內(nèi)
  • 塊級占據(jù)一整行空間,行內(nèi)占據(jù)自身寬度空間
  • 寬高設(shè)置棵癣、內(nèi)外邊距的差異

7. 解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?

  • 解釋:body元素的字體高度為12px夺衍,行高為字體大小的1.5倍,字體選擇 tahoma沟沙,沒有的話選擇arial矛紫,依次類推。
    加引號是因?yàn)檫@種字體的名字本來中間就含有空格含衔,加引號是為了讓機(jī)器識別 Hiragino Sans GB是一種字體名而不是三個字體名。

  • \5b8b\4f53 這是使用 Unicode 編碼的字體名缓呛,這個例子中杭隙, \5b8b 為Unicode的“宋”,\4f53 為Unicode的“體”痰憎,所以這個編碼就是指“宋體”。

代碼

task1
task2
task3
task4
task5
border-width border-color border-style

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蜗细,隨后出現(xiàn)的幾起案子怒详,更是在濱河造成了極大的恐慌踪区,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異传泊,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門薪鹦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惯豆,“玉大人,你說我怎么就攤上這事楷兽。” “怎么了端考?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵揭厚,是天一觀的道長。 經(jīng)常有香客問我裂明,道長太援,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任仙蛉,我火速辦了婚禮碱蒙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘巧还。我一直安慰自己鞭莽,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布麸祷。 她就那樣靜靜地躺著澎怒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪阶牍。 梳的紋絲不亂的頭發(fā)上喷面,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天,我揣著相機(jī)與錄音走孽,去河邊找鬼惧辈。 笑死,一個胖子當(dāng)著我的面吹牛磕瓷,可吹牛的內(nèi)容都是我干的盒齿。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼边翁,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了硕盹?” 一聲冷哼從身側(cè)響起符匾,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瘩例,沒想到半個月后啊胶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡垛贤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年创淡,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片南吮。...
    茶點(diǎn)故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡琳彩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出部凑,到底是詐尸還是另有隱情露乏,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布涂邀,位于F島的核電站瘟仿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏比勉。R本人自食惡果不足惜劳较,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一驹止、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧观蜗,春花似錦臊恋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至砖第,卻和暖如春撤卢,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背梧兼。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工放吩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人羽杰。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓渡紫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親忽洛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2 344

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案环肘? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素欲虚;行內(nèi)(內(nèi)聯(lián)、inline-level)元素悔雹。 塊元素的...
    饑人谷_小侯閱讀 1,985評論 1 4
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表复哆,主要用...
    寥寥十一閱讀 1,808評論 0 6
  • 本文為閱讀《Head First HTML 與 CSS》的css部分的讀書筆記,方便回顧書上的知識腌零,另一篇為Hea...
    兼續(xù)閱讀 1,806評論 0 17
  • 北京時間19:42梯找,此時此刻的我地址在寢室躲在被窩里哭泣,莫名的傷感益涧,莫名的煩躁锈锤,莫名的想家。現(xiàn)在的我話也漸漸變少...
    迷離25閱讀 103評論 0 0