塊級元素和行內元素分別有哪些?動手測試并列出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
- 塊級元素可以設置width和height屬性,行內元素不能設置寬高
- 塊級元素寬度默認占整行,而行內元素寬度自適應大小
- 塊級元素可以包含塊級元素和行內元素,而行內元素只能包含文本和行內元素
- 行內元素設置上下外邊距會失效,設置上下內邊距有效但不占高度
什么是 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
。
如何讓塊級元素水平居中?如何讓行內元素水平居中?
- 設置左右外邊距的值為auto;
- 設置text-align:center;
用 CSS 實現一個三角形
.sanjiao { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid blue; }
單行文本溢出加 ...如何實現?
white-space: nowrap;
不讓他折行顯示
overflow: hidden;
隱藏多出的部分
text-overflow: ellipsis;
后邊用...表示
px, em, rem 有什么區別
- px:固定尺寸
- em:相對于父元素的尺寸倍數
- rem:相對于根元素(html)的尺寸倍數
解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
- 字體大小為12px
- 字體行高為1.5倍字體大小
- 字體可在tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif 這些字體中選擇(若都不存在,則為瀏覽器默認字體)
- 當有空格或者Unicode碼時,需要加引號
- \5b8b\4f53是字體的Unicode碼,表示宋體
代碼1 . 參考
<a >代碼2</a> . 參考
<a >代碼3</a> .參考
<a >代碼4</a> .
參考
<a >代碼5</a> . 參考