1. 塊級元素和行內元素分別有哪些?動手測試并列出4條以上的特性區別.
* 塊級元素單獨占一行空間,行內元素占自己文本內容空間。
* 塊級元素可以設置寬高,內邊距,外邊距等,行內元素設置無效。
* 塊級元素可以包含塊級元素和行內元素,行內元素只能包含行內元素和文本。
- 常用的塊狀元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> - 常用的行內元素有:
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
2. 什么是 CSS 繼承? 哪些屬性能繼承,哪些不能?
* 在CSS中,后代元素可以繼承父代元素的屬性。
* 不可繼承的: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。
* 內聯元素可繼承: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. 如何讓塊級元素水平居中?如何讓行內元素水平居中?
- 塊狀元素水平居中設置:margin:0 auto;
- 行內元素水平居中設置其父元素:text-align: center;
4. 單行文本溢出加 ...如何實現?
- 設置css為:
overflow:hidden;//設置溢出部分為隱藏
text-overflow:ellipsis;//如果超出顯示...
white-space:nowrap;//設置不允許換行
5. px, em, rem 有什么區別?
- px像素(Pixel),相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
- em是相對長度單位,相對于當前對象內文本的字體尺寸,如當前對行內文本的字體尺寸未被人為設置,則相對于瀏覽器的默認字體尺寸。 em的值并不是固定的,em會繼承父級元素的字體大小。
- rem是CSS3新增的一個相對單位(root em,根em)。使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。
6. 解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
image.png
- 設定了網站根元素字體的大小和字體的種類。
- 因為字體種類名稱超出一個字(單詞)就必須加引號。
- 字體里\5b8b\4f53代表一種字體‘宋體’的編碼。,因為有些瀏覽器不支持‘SimSun ’這種寫法。