1.塊級元素和行內元素分別有哪些?動手測試并列出4條以上的特性區別
- 塊級元素:div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
- 行內元素:em strong span a br img button input label select textarea code script
- 區別:塊級元素可設寬高,行內元素不行;塊級元素獨占一行,行內元素不是;塊級元素可以包含塊級元素和行內元素,行內元素只能包含行內元素和文本;塊級元素可以設置寬高,邊框,邊距,行內元素不能設置寬高,邊距只可以設置左右。
2.什么是 CSS 繼承? 哪些屬性能繼承,哪些不能?
CSS的繼承是指被包在內部的標簽將擁有外部標簽的樣式性質。它是依賴于祖先-后代的關系的。繼承是一種機制,它允許樣式不僅可以應用于某個特定的元素,還可以應用于它的后代;
可以繼承的屬性:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、text-indent、text-align、list-style。
不能繼承的屬性:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align等
3.如何讓塊級元素水平居中?如何讓行內元素水平居中?
塊級元素居中設置margin:0 auto;行內元素設置text-align: center;
4.用 CSS 實現一個三角形
5.單行文本溢出加 ...如何實現?
設置white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
6.px, em, rem 有什么區別
px固定單位像素;em相對單位相對于父元素字體大小;rem相對單位相對于html(根元素)文字大小。
7.解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
有空格,不加引號會被識別成兩個元素;數字和字母代表字體的Unicode碼,種類為宋體和微軟雅黑。
實現效果1
實現效果2
實現效果3
實現效果4