入門任務8

塊級元素和行內元素分別有哪些?##

塊級元素

元素 作用
<address> 聯系方式信息
<figcaption> 圖文信息組標題
<ol> 有序列表
<article> 文章內容
<figure> 圖文信息組 (參照 <figcaption>)
<output> 表單輸出
<aside> 伴隨內容
<footer> 區(qū)段尾或頁尾
<p>
<audio> 音頻播放
<form> 表單
<pre> 預格式化文本
<blockquote> 塊引用
<h1>~<h6> 標題級別 1-6
<section> 一個頁面區(qū)段
<canvas> 繪制圖形
<header> 區(qū)段頭或頁頭
<table> 表格
<tr> 表格的行
<td> 表格的單元格
<th> 表格的表頭
<dd> 定義列表中定義條目描述
<hgroup> 標題組
<tfoot> 表腳注
<div> 文檔分區(qū)
<hr> 水平分割線
<ul> 無序列表
<dl> 定義列表
<noscript> 不支持腳本或禁用腳本時顯示的內容
<video> 視頻
<fieldset> 表單元素分組。

行內元素

元素 作用
<a> 錨點
<abbr> 縮寫
<acronym > 首字母
<b > 粗體(不推薦)
<bdo> 元素可覆蓋默認的文本方向
<big> 大字體
<br> 換行
<cite > 引用
<code> 計算機代碼(在引用源碼的時候需要)
<dfn > 定義字段
<em > 強調
<i> 斜體
<img > 圖片
<input > 輸入框
<kbd > 定義鍵盤文本
<label > 表格標簽
<q> 短引用
<samp > 定義范例計算機代碼
<select > 項目選擇
<small > 小字體文本
<span > 常用內聯容器,定義文本內區(qū)塊
<strong > 粗體強調
<sub> 下標
<sup > 上標
<textarea > 多行文本輸入框
<tt > 電傳文本
<var > 定義變量

區(qū)別

  • 塊級元素可以包含行內元素和其他塊級元素呛踊,行內元素只能包含數據和其他行內元素
  • 塊級元素獨自占據一行,行內元素會在一條直線上水平方向排列
  • 塊級元素可以設置寬高啦撮,行內元素不能設置谭网,寬高與內容文本有關
  • 塊級元素可以設置外邊距(margin)/外邊距(padding),而行內元素的行內元素設置上下margin,padding,border不占據空間。
  • 行內元素的上下padding,border存在顏色赃春,則顏色會顯示愉择。
  • 行內元素可以"感受"到浮動元素的存在。

什么是 CSS 繼承? 哪些屬性能繼承织中,哪些不能锥涕?##

  • 繼承,它是依賴于祖先-后代的關系的狭吼。繼承是一種機制层坠,它允許樣式不僅可以應用于某個特定的元素,還可以應用于它的后代刁笙。就是沒有特別設置時破花,兒子會繼承父級的一些屬性樣式。
    可以繼承的屬性

1疲吸、字體系列屬性
font:組合字體
font-family:規(guī)定元素的字體系列
font-weight:設置字體的粗細
font-size:設置字體的尺寸
font-style:定義字體的風格
font-variant:設置小型大寫字母的字體顯示文本座每,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字體的字母與其余文本相比摘悴,其字體尺寸更小峭梳。
font-stretch:對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支持蹂喻。
font-size-adjust:為某個元素規(guī)定一個 aspect 值葱椭,這樣就可以保持首選字體的 x-height。

2叉橱、文本系列屬性
text-indent:文本縮進
text-align:文本水平對齊
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、生成內容屬性:quotes
7逞壁、光標屬性: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沐绒、display:規(guī)定元素應該生成的框的類型
2、文本屬性:
vertical-align:垂直文本對齊
text-decoration:規(guī)定添加到文本的裝飾
text-shadow:文本陰影效果
white-space:空白符的處理
unicode-bidi:設置文本的方向
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、生成內容屬性: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

如何讓塊級元素水平居中?如何讓行內元素水平居中?##

塊級元素水平居中margin: 0 auto;
行內元素水平居中text-align: center;

用 CSS 實現一個三角形##

triangle

單行文本溢出加 ...如何實現?##

task2.png

px, em, rem 有什么區(qū)別?##

  • 都是設置寬高的長度和字體的大小
  • px 在縮放頁面時無法調整那些使用它作為單位的字體骡尽、按鈕等的大小遣妥。
  • em 的值并不是固定的,會繼承父級元素的字體大小考润,代表倍數祭阀。
  • rem 的值并不是固定的哎迄,始終是基于根元素(html)的,也代表倍數境钟。

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

設置body里的字體大小為12px,行高為1.5故河,按照以下字體順序設置字體 ,加引號是因為字體名稱里有空格吱韭,不加引號的話,會被認為是2個字體名稱鱼的,\5b8b\4f53是Unicode編碼理盆,代表宋體。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末凑阶,一起剝皮案震驚了整個濱河市猿规,隨后出現的幾起案子,更是在濱河造成了極大的恐慌宙橱,老刑警劉巖姨俩,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蘸拔,死亡現場離奇詭異,居然都是意外死亡环葵,警方通過查閱死者的電腦和手機调窍,發(fā)現死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來张遭,“玉大人邓萨,你說我怎么就攤上這事【站恚” “怎么了缔恳?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長洁闰。 經常有香客問我歉甚,道長,這世上最難降的妖魔是什么扑眉? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任纸泄,我火速辦了婚禮,結果婚禮上腰素,老公的妹妹穿的比我還像新娘刃滓。我一直安慰自己,他們只是感情好耸弄,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布咧虎。 她就那樣靜靜地躺著,像睡著了一般计呈。 火紅的嫁衣襯著肌膚如雪砰诵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天捌显,我揣著相機與錄音茁彭,去河邊找鬼。 笑死扶歪,一個胖子當著我的面吹牛理肺,可吹牛的內容都是我干的。 我是一名探鬼主播善镰,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼妹萨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了炫欺?” 一聲冷哼從身側響起乎完,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎品洛,沒想到半個月后树姨,有當地人在樹林里發(fā)現了一具尸體摩桶,經...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年帽揪,在試婚紗的時候發(fā)現自己被綠了硝清。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡转晰,死狀恐怖耍缴,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情挽霉,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布变汪,位于F島的核電站侠坎,受9級特大地震影響,放射性物質發(fā)生泄漏裙盾。R本人自食惡果不足惜实胸,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望番官。 院中可真熱鬧庐完,春花似錦、人聲如沸徘熔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酷师。三九已至讶凉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間山孔,已是汗流浹背懂讯。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留台颠,地道東北人褐望。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像串前,于是被迫代替她去往敵國和親瘫里。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案荡碾? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,751評論 1 92
  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,055評論 0 1
  • 1.塊級元素和行內元素分別有哪些减宣?動手測試并列出4條以上的特性區(qū)別塊級元素有 p、div玩荠、form 漆腌、 ul贼邓、 ...
    _小黑閱讀 411評論 0 0
  • 好馬配好鞍填具,好車配風帆统舀。所有的牛叉都來自信息差,你的圈子越多劳景,資源越容易對接誉简,能對接就能輕松變現。當你永遠保持在一...
    雕刻新思維閱讀 1,294評論 0 1
  • 有句話從小到大一直就被我們聽著:“世界并不缺乏美盟广,只是缺乏一雙發(fā)現美的眼睛闷串。”其實筋量,愛也是如此烹吵。愛很簡單,不需要“...
    霧濕樓臺cwq閱讀 259評論 2 4