问答
1. 块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
块级元素(block-level)
h1 h2 h3 div p hr form ul dl ol table
li dt dd tr td th
行内元素(inline-level)
span strong em a br img
button input label select texture
code script
行内元素和块级元素区别
- 块级元素占据一行，垂直方向排列；行内元素和其他元素在一行，水平方向排列
- 块级元素内能包含行内元素，行内元素只能包含文本及其他行内元素
- 块级元素默认宽度为父元素的100%，行内元素默认宽度是它本身容器的宽度
-
width和height只对块级元素生效，对行内元素无效。
2. 什么是 CSS 继承? 哪些属性能继承，哪些不能？
每个 CSS 属性定义 的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。
当元素的一个 继承属性 没有指定值时，则取父元素的同属性的。
- 可继承的
- 文字相关的属性是可被继承的，font-size, font-family, font, font-style, font-weight, line-height, text-align, letter-spacing, text-indent, text-transform, word-spacing.
- 列表相关属性是被继承的: list-style, list-style-image, list-style-position, list-style-type
- 颜色相关属性是被继承的: color
- 不可继承的
- background、border、position这些背景、布局、定位相关的都是默认不继承的。
3. 如何让块级元素水平居中？如何让行内元素水平居中?
/*块级元素水平居中*/
p {
width: 60px;
margin: 0 auto;
}
/*行内元素水平居中*/
.box {
text-align: center
}
4. 用 CSS 实现一个三角形
.triangle {
height: 0;
width: 0;
border-top: 40px solid blue;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid transparent;
}
5. 单行文本溢出加 ...如何实现?
/*单行文本溢出*/
.text {
/*去掉自动换行*/
white-space: nowrap;
/*隐藏元素溢出的内容*/
overflow: hidden;
/*设置溢出内容显示的样式*/
text-overflow: ellipsis;
}
6. px, em, rem 有什么区别
-
px固定单位, 一般表示一个像素 -
em相对单位， 相对于父元素的大小。font-size属性的单位，1em是父元素大小的一倍。Chrome浏览器默认字体大小16px,中文最小12px。 -
rem相对单位， 相对于根元素的大小，1rem是根元素大小的一倍。
7. 解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- 为body 设置字体大小为12px,1.5倍行高，字体类型依次为
tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-seri。 - 字体名字包含空格的时候应该加上引号。
- 在 CSS 中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8 等）不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示。
\5b8b\4f53代表Unicode的字体码。\5b8b\4f53代表宋体，英文名为SimSun。
