塊級元素和行內元素分別有哪些?##
塊級元素
元素 | 作用 |
---|---|
<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 實現一個三角形##
單行文本溢出加 ...如何實現?##
px, em, rem 有什么區(qū)別?##
- 都是設置寬高的長度和字體的大小
- px 在縮放頁面時無法調整那些使用它作為單位的字體骡尽、按鈕等的大小遣妥。
- em 的值并不是固定的,會繼承父級元素的字體大小考润,代表倍數祭阀。
- rem 的值并不是固定的哎迄,始終是基于根元素(html)的,也代表倍數境钟。
解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?##
設置body里的字體大小為12px,行高為1.5故河,按照以下字體順序設置字體 ,加引號是因為字體名稱里有空格吱韭,不加引號的話,會被認為是2個字體名稱鱼的,\5b8b\4f53是Unicode編碼理盆,代表宋體。