一.塊級元素和行內元素分別有哪些?動手測試并列出4條以上的特性區別
塊級元素:
- address - 地址
- blockquote - 塊引用
- center - 居中對齊
- dir - 目錄列表
- div - 常用塊級容易,也是css layout的主要標簽
- dl - 定義列表
- fieldset - form控制組
- form - 交互表單
- h1 - 大標題
- h2 - 副標題
- h3 - 3級標題
- h4 - 4級標題
- h5 - 5級標題
- h6 - 6級標題
- hr - 水平分隔線
- isindex - input prompt
- menu - 菜單列表
- noframes - frames可選內容,(對于不支持frame的瀏覽器顯示此區塊內容
- noscript - )可選腳本內容(對于不支持script的瀏覽器顯示此內容)
- ol - 排序表單
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 非排序列表
行內元素:
- a - 錨點
- abbr - 縮寫
- acronym - 首字
- b - 粗體(不推薦)
- bdo - bidi override
- big - 大字體
- br - 換行
- cite - 引用
- code - 計算機代碼(在引用源碼的時候需要)
- dfn - 定義字段
- em - 強調
- font - 字體設定(不推薦)
- i - 斜體
- img - 圖片
- input - 輸入框
- kbd - 定義鍵盤文本
- label - 表格標簽
- q - 短引用
- s - 中劃線(不推薦)
- samp - 定義范例計算機代碼
- select - 項目選擇
- small - 小字體文本
- span - 常用內聯容器,定義文本內區塊
- strike - 中劃線
- strong - 粗體強調
- sub - 下標
- sup - 上標
- textarea - 多行文本輸入框
- tt - 電傳文本
- u - 下劃線
- var - 定義變量
區別:
1.塊級元素會獨占一行,其寬度自動填滿其父元素寬度;
行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化。
2.塊級元素內可以包含塊級元素和行內元素,而行內元素只能包含文本和行內元素。
3.塊級元素可以設置 width, height屬性,行內元素設置width, height無效。
【注意:塊級元素即使設置了寬度,仍然是獨占一行的】
4.塊級元素可以設置margin 和 padding,行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。(水平方向有效,豎直方向無效)
二.什么是 CSS 繼承? 哪些屬性能繼承,哪些不能?
繼承性是指指被包在內部的標簽將擁有外部標簽的樣式性,即子元素可以繼承父元素的屬性。
一、無繼承性的屬性
1、display:規定元素應該生成的框的類型
2、文本屬性:
vertical-align:垂直文本對齊
text-decoration:規定添加到文本的裝飾
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
二、有繼承性的屬性
1、字體系列屬性
font:組合字體
font-family:規定元素的字體系列
font-weight:設置字體的粗細
font-size:設置字體的尺寸
font-style:定義字體的風格
font-variant:設置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字體的字母與其余文本相比,其字體尺寸更小。
font-stretch:對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支持。
font-size-adjust:為某個元素規定一個 aspect 值,這樣就可以保持首選字體的 x-height。
2、文本系列屬性
text-indent:文本縮進
text-align:文本水平對齊
line-height:行高
word-spacing:增加或減少單詞間的空白(即字間隔)
letter-spacing:增加或減少字符間的空白(字符間距)
text-transform:控制文本大小寫
direction:規定文本的書寫方向
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、元素可見性:visibility
2、光標屬性:cursor
四、內聯元素可以繼承的屬性
1、字體系列屬性
2、除text-indent、text-align之外的文本系列屬性
五、塊級元素可以繼承的屬性
1、text-indent、text-align
三.如何讓塊級元素水平居中?如何讓行內元素水平居中?
塊級元素居中:{margin:0 auto};
行內元素居中: {text-align:center};
四.用 CSS 實現一個三角形
五.單行文本溢出加 ...如何實現?
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
當然還需要設置寬度width屬性來兼容部分瀏覽。
六.px, em, rem 有什么區別
px:
px實際上就是像素,用px設置字體大小時,比較穩定和精確。但是這種方法存在一個問題,當用戶在瀏覽器中瀏覽我們制作的Web頁面時,如果改變了瀏覽器的縮放,這時會使用我們的Web頁面布局被打破。這樣對于那些關心自己網站可用性的用戶來說,就是一個大問題了。因此,這時就提出了使用“em”來定義Web頁面的字體。
em:
em就是根據基準來縮放字體的大小。em實質是一個相對值,而非具體的數值。這種技術需要一個參考點,一般都是以<body>的“font-size”為基準。另外,em是相對于父元素的屬性而計算的。
rem:
em是相對于其父元素來設置字體大小的,這樣就會存在一個問題,進行任何元素設置,都有可能需要知道他父元素的大小。而rem是相對于根元素<html>,這樣就意味著,我們只需要在根元素確定一個參考值。
七.解釋下面代碼的作用?為什么要加引號? 字體里\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 這些字體中依次選擇(若都不存在,則為瀏覽器默認字體)
多個單詞不加引號會識別成多個元素,當有空格或者Unicode碼時,需要加引號
"\5b8b\4f53"是對應字體的unicode編碼,表示黑體。