1.1塊級元素和行內(nèi)元素分別有哪些？
- 塊級元素
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
- 行內(nèi)元素
em strong span a br img
button iput label select textarea
code script
1.2塊級元素和行內(nèi)元素區(qū)別
- 寬高的設(shè)置只對塊級元素有效對行內(nèi)元素是無效的
-
行內(nèi)元素會在一條直線上排列，都是同一行，水平方向排列
塊級元素各占據(jù)一行，垂直方向排列。 - 塊級元素可以包含行內(nèi)元素和塊級元素。行內(nèi)元素不能包含塊級元素。
- 行內(nèi)元素可以感受浮動元素的存在
- 行內(nèi)元素設(shè)置上下margin,padding,border不占據(jù)空間。
2.1什么是 CSS 繼承?
每一個元素都是文檔樹的一部分，除了最頂級的HTML元素，每個元素都有其對應(yīng)的父級元素，每一個父級元素的CSS屬性值都可以被應(yīng)用到它的子元素中去。
2.2哪些屬性能繼承，哪些不能？
- 不可繼承的：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、page-break-after、 page-bread-before和unicode-bidi
- 所有元素可繼承：visibility和cursor。
- 內(nèi)聯(lián)元素可繼承：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、list-style-type、list-style-position、list-style-image。
- 表格元素可繼承：border-collapse。
3.1如何讓塊級元素水平居中？
margin: 0 auto;
3.2如何讓行內(nèi)元素水平居中？
text-align: center;
4.用 CSS 實現(xiàn)一個三角形
.trangle {
width: 0;
height: 0;
border-top:solid 20px transparent;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
border-bottom:solid 20px red;
}
5.單行文本溢出加 ...如何實現(xiàn)?
span {
white-space: nowrap;不折行
overflow: hidden;超出部分隱藏
text-overflow: ellipsis;顯示省略號
}
6.px, em, rem 有什么區(qū)別?
- px: 固定單位
- em：相對單位，相對于父元素的字體大小（例如：父元素字體大小為12px，子元素如果設(shè)置字體大小為2em，則實際顯示為父元素的2倍24px）
- rem 相對單位，相對于根元素（html）字體大小（方法與em相似，不過計算依據(jù)為根元素字體大小）
7.解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
上述代碼的作用：設(shè)置body的字體大小為12px，行高1.5，字體樣式先tahoma 再 arial 接下去依次Hiragino Sans GB，宋體，sans-serif
為什么要加引號：如果不加引號Hiragino Sans GB會被按空格分隔成多個元素，加引號讓其被視為為一個整體。
\5b8b\4f53：代表宋體的unicode碼。可以通過瀏覽器的控制臺使用unescape('%u5b8b%u4f53')來解碼。
