1惕稻、塊級元素和行內(nèi)元素分別有哪些峡眶？動手測試并列出4條以上的特性區(qū)別
block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th
inline-level: em strong span a br img button input label select textarea code script
- 特性區(qū)別
- 塊級可以包含塊級和行內(nèi)收恢，行內(nèi)只能包含文本和行內(nèi)
- 塊級占據(jù)一整行空間究孕，行內(nèi)占據(jù)自身寬度空間
- 對行內(nèi)元素沒有辦法設(shè)置寬高
- 對行內(nèi)元素設(shè)置padding只對左右生效庸毫，而對上下不生效，在頁面上是看不到的合是。但是在盒模型中可以看到了罪，當(dāng)然如果你給其添加一個border也是可以看到的。
- 同樣對內(nèi)元素設(shè)置margin也是僅對左右產(chǎn)生效果聪全。盒模型中可以看到margin的.
2泊藕、什么是 CSS 繼承? 哪些屬性能繼承，哪些不能难礼？
CSS繼承：當(dāng)元素的一個繼承屬性沒有指定值時娃圆，則取父元素的同屬性的計(jì)算值computed value，只有文檔根元素取該屬性的概述中給定的初始值蛾茉。
能繼承的屬性如： color, font-size,letter-spacing讼呢、word-spacing，line-height谦炬、font悦屏、font-family、font-style键思、font-variant础爬，font-weight text-decoration、text-transform吼鳞、list-style幕帆，list-style-type
不可繼承的屬性如: display、margin赖条、border失乾、padding、background
height min-height纬乍、max-height碱茁、width、min-width仿贬、max-width
overflow纽竣、position、left茧泪、right蜓氨、top、bottom队伟、float穴吹、clear
3、如何讓塊級元素水平居中嗜侮？如何讓行內(nèi)元素水平居中?
- 讓塊級元素居中: 首先要給這個塊級元素設(shè)置一個寬度,然后用margin: 0 auto;
- 行內(nèi)元素居中：在塊狀元素內(nèi)部用text-align: center;
4港令、用 CSS 實(shí)現(xiàn)一個三角形
首先準(zhǔn)備一個div啥容，讓其寬高設(shè)為0。然后為其四邊添加border粗邊框顷霹，這樣好看到效果咪惠。然后將其中三邊設(shè)置成透明。
5淋淀、單行文本溢出加 ...如何實(shí)現(xiàn)?
white-space: nowrap; /* 讓文本不換行 */
overflow: hidden; /* 讓溢出部分隱藏 */
text-overflow: ellipsis; /* 要溢出的部分加省略號*/
6遥昧、px, em, rem 有什么區(qū)別
- px: 固定單位
- em: 相對單位，相對于父元素的大小
- rem: 相對單位朵纷，相對于根元素(html)字體大小
7渠鸽、解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
設(shè)置字體樣式， 字體大小為12px柴罐， 行高為1.5
字體為font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; 排在最前面的優(yōu)先級最高徽缚。
加引號是因?yàn)橹虚g有空格，可能誤導(dǎo)成兩個字體
'\5b8b\4f53' 代表的是宋體
代碼
1革屠、實(shí)現(xiàn)如下效果：
效果
源代碼
2凿试、實(shí)現(xiàn)如下按鈕效果：
button
源代碼
3、實(shí)現(xiàn)如下表格：
table
源代碼
4似芝、實(shí)現(xiàn)如下三角形:
三角形
源代碼
5那婉、實(shí)現(xiàn)如下Card:
Card
源代碼
