一、块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别
- 块级元素:div | h1~h6 | p | hr | form | ul | dl | ol | pre | table | li | dd | dt | tr | th | blockquote | canvas | fieldset | ……
- 行内元素:em | strong | span | a | br | img | button | input | label | select | textarea | code | script | abbr | cite | ……
- 区别
- 块级元素从新的一行开始,而行内元素与相邻行内元素在一行上
- 块级元素宽度默认为父容器宽度,行内元素由内容决定
- 块级元素可以包含块级元素和行内元素,而行内元素不能包含块级元素
- 块级元素可以设置宽高以及内外边距,而行内元素只有左右padding、margin生效
二、什么是 CSS 继承? 哪些属性能继承,哪些不能?
参考文献
1.css-可继承和不可继承的属性
2.CSS中可以和不可以继承的属性(有点错误)
3.CSS三大特性之继承性
CSS继承就是包含在内部的标签将拥有外部标签的样式,即子元素可以继承父元素的属性。
-
可继承
- visibility | cursor
- 字体属性:font | -family | -size (相对单位需计算)| -style | -weight |
- 文本属性:word-spacing | letter-spacing | text-align | text-transform | text-indent | line-height |
- 颜色属性:color
- 列表属性:list-style-image | list-style-position | list-style-type | list-style |
- ……
-
不可继承
- 文本属性:text-decoration | vertical-align
- 定位布局属性:display | margin | padding | width | height | float | clear | position | left | top | overflow | z-index |
- 边框:border | -width | -style | -color |
- 背景:background | -color | -image | -repeat | -position |
- ……
三、如何让块级元素水平居中?如何让行内元素水平居中?
- 块级元素水平居中
margin: 0 auto;
- 行内元素水平居中
对其父元素设置text-align: center
四、用CSS实现小三角形
利用块级元素,使其宽高为0,再分别设置四个border,可组合成各种三角形
五、单行文本溢出加 ...如何实现?
通过以下样式,
p{
<!--文本不换行,文本会在在同一行上继续-->
white-space:nowrap;
<!--当内容溢出元素框时,内容会被修剪,并且其余内容是不可见的-->
overflow:hidden;
<!--当文本溢出包含元素时,显示省略符号来代表被修剪的文本。-->
text-overflow:ellipsis;
}
六、px, em, rem 有什么区别?
- px:是屏幕中最小的点。像素不是物理长度,在不同分辨率的设备上物理长度不同。
- em:是一个相对长度单位,em会继承父级元素的字体大小。
- rem:这个单位代表相对于根元素的 font-size大小,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。
七、解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
设置字体大小,行高,字体类型
-
12px/1.5
代表font-size和line-height(font-szie的1.5倍)。 -
arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
字体系列,从前向后一次匹配
'Hiragino Sans GB':如果字体名称包含空格,它必须加上引号。
'\5b8b\4f53':'宋体'的utf-8编码,这样避免浏览器解析css时出现乱码。
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}