- 塊級元素和行內元素分別有哪些？動手測試并列出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
- 區別
塊級可以包含塊級和行內，行內只能包含文本和行內
塊級占據一整行空間，行內占據自身寬度空間
塊級元素可以設置寬高，行內元素不能設置
margin和padding行內元素可以設置左右間距，塊級都可
- 什么是 CSS 繼承?
子元素從父元素繼承屬性；當一個非繼承屬性沒有指定值時，則取屬性的初始值. - 哪些屬性能繼承，哪些不能？
- 繼承屬性
border-collapse
border-spacing
caption-side
color
cursor
direction
font (其中包括 font-family , font-size , font-weight , font-style)
letter-spacing
line-height
list-style (其中包括 list-style-image , list-style-position , list-style-type)
text-align
text-indent
text-transform
visibility
white-space
word-spacing
字體呀，文本呀，顏色等的設置都是可繼承屬性- 非繼承屬性
z-index
width (其中包括 min-width , max-width)
display
float
clear
vertical-align
unicode-bidi
position
top
bottom
left
right
text-decoration
background (其中包括 background-color , background-image , background-position , background-attachment , background-repeat)
border (其中包括 border-color , border-style , border-width , border-spacing and so on)
padding (其中包括 padding-left , padding-right , padding-top , padding-bottom)
margin (其中包括 margin-left , margin-right , margin-top , margin-bottom)
outline (其中包括 outline-color , outline-style , outline-width)
clip
content
非繼承屬性大部分都是一些和定位呀，浮動呀，盒子模型呀等有關
參考地址
- 如何讓塊級元素水平居中？
- 先設置width（<界面width），再設置margin: auto;
- 如何讓行內元素水平居中?
- text-align: center.
- 運用盒模型flex.
display： flex;
justify-content: center;
- 用 CSS 實現一個三角形
CSS三角形.png
單行文本溢出加 ...如何實現?
.card > h3{
white-space: nowrap; /*單行文本超出邊框寬度，nowrap不折行*/
overflow: hidden; /*超出文本隱藏*/
text-overflow: ellipsis; /*溢出變...*/
}px, em, rem 有什么區別
- px:像素，可直接設置數值，如12px，但不能小于瀏覽器的最小值12px
- em:相對單位，相對于父元素字體大小
rem:相對單位，相對于根元素(html)字體大小
CSS樣式px，em，rem.png
根元素body為20px，text為body的子元素，p和h3為text的子元素，可見p元素下的字體被放大了4倍，變成了80px；而h3下的字體為20px.
- 解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
font字體的設置.png
