塊級元素和行內(nèi)元素分別有哪些？動手測試并列出4條以上的特性區(qū)別
- 塊級元素：div, p, h1, h2, h3, h4, ul, li
- 行內(nèi)元素：em, a, img, span, button, label, select
- 區(qū)別：
- 塊級元素單獨占據(jù)一行桌粉，行內(nèi)元素可以讓其他元素在它的左右循榆。
- 塊級元素能設(shè)置寬高檀葛，而行內(nèi)元素設(shè)置無效。
- 對于margin和padding屬性，塊級元素會產(chǎn)生上下左右的內(nèi)外邊距效果虾宇。行內(nèi)元素左右會產(chǎn)生邊距效果，上下不會產(chǎn)生如绸。
- 塊級元素可以包含行內(nèi)元素嘱朽，而行內(nèi)元素內(nèi)一般不會包含塊級元素旭贬。
什么是 CSS 繼承? 哪些屬性能繼承，哪些不能搪泳？
每個 CSS 屬性定義的概述都指出了這個屬性是默認繼承的還是默認不繼承的稀轨。當元素的一個繼承屬性 （inherited property ）沒有指定值時，則取父元素的同屬性的計算值岸军。
- 可繼承：color, font, font-family, text-decoration, visibility, cursor 等
- 不可繼承： margin, padding, width, height, display, background 等
如何讓塊級元素水平居中奋刽？如何讓行內(nèi)元素水平居中?
- 塊級元素水平居中：margin-left 和 margin-right的值設(shè)為auto。
margin:0 auto; - 行內(nèi)元素：
text-align: center;
用 CSS 實現(xiàn)一個三角形
.arrow-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid transparent;
border-bottom: 30px solid green;
}
https://ychenxi.github.io/Blog/triangle
單行文本溢出加 ...如何實現(xiàn)?
white-space: nowrap; 設(shè)置文本不換行
overflow: hidden; 設(shè)置溢出隱藏
text-overflow: ellipsis; 設(shè)置隱藏部分為...
px, em, rem 有什么區(qū)別
- px: 像素艰赞，固定單位
- em: 相對單位杨名，相對于父元素字體的大小
- rem: 相對單位，相對于根元素字體的大小
解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body {
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
給body增加字體效果猖毫。
字體大小12px台谍。行高是字體大小的1.5倍。優(yōu)先使用 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif中最左邊的字體吁断。如果找不到則向后使用趁蕊，依次類推直到找到可以使用的字體使用。加引號是因為字體名稱有空格仔役，如果不加引號掷伙，可能導致識別錯誤。'\5b8b\4f53'是unicode編碼后的'宋體'又兵。
代碼
- css border: https://ychenxi.github.io/Blog/cssBorder
- css buttons: https://ychenxi.github.io/Blog/cssButtons
- css table: https://ychenxi.github.io/Blog/cssTable
- css triangle: https://ychenxi.github.io/Blog/triangle
- css cards: https://ychenxi.github.io/Blog/cssCard
