- 块级元素和行内元素分别有哪些？动手测试并列出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
网友评论