塊級元素和行內元素分別有哪些?
塊級元素:
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
行內元素:
em strong span a br img
button input label select textarea
code script
特性區(qū)別:
1.塊級元素可以包含行內元素和塊級元素,而行內元素只能文本和行內元素。
2.塊級元素設置寬高有效,行內元素設置寬高無效。
3.塊級元素可以獨占一行,其寬度自動填滿其父元素寬度,行內元素不能獨占一行,與相鄰的行內元素處在一行,直到此行被內容填滿才會換行。
4.設置margin和padding屬性,塊級元素上下左右都有效,行內元素只有左右有效。
什么是 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。
內聯(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。
如何讓塊級元素水平居中?如何讓行內元素水平居中?
塊級元素 設置 margin: 0 auto 可達到居中目的
/* margin: 0 auto; 實際上是下面兩個起作用 */
margin-left: auto;
margin-right: auto;
行內元素水平居中text-align: center;
用 CSS 實現(xiàn)一個三角形
單行文本溢出加 ...如何實現(xiàn)?
{
white-space: nowrap; /*先設置文本不折行*/
overflow: hidden; /*設置溢出隱藏*/
text-overflow: ellipsis; /*設置隱藏部分為...*/
}
px, em, rem 有什么區(qū)別
px在縮放頁面時無法調整那些使用它作為單位的字體、按鈕等的大??;
em的值并不是固定的,會繼承父級元素的字體大小,代表倍數;
rem的值并不是固定的,始終是基于根元素 <html> 的,也代表倍數。
解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
作用:設置字體大小為12px,行高是字體1.5倍,后面則是第一到第五字體,用逗號隔開,如果用戶瀏覽第一字體沒有,則查詢第二字體有沒有,以此類推,如果都沒有則采用系統(tǒng)默認字體;
字體名稱為中文時,如:"微軟雅黑" ,或字體名稱為英文但是名稱有多個單詞組成,中間包含空格,如:“Times New Roman”時需要加引號,不加引號可能會導致瀏覽器無法識別字體設置。
使用瀏覽器打開頁面時,瀏覽器會讀取 HTML 文件進行解析渲染。當讀到文字時會轉換成對應的 unicode碼(可以認為是世界上任意一種文字的特定編號)。\5b8b\4f53代表宋體的unicode碼。
代碼1
代碼2
代碼3
代碼4
代碼5