CSS常见样式

问答

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")。
当元素的一个 继承属性 没有指定值时，则取父元素的同属性的。

• 可继承的
  1. 文字相关的属性是可被继承的，font-size, font-family, font, font-style, font-weight, line-height, text-align, letter-spacing, text-indent, text-transform, word-spacing.
  2. 列表相关属性是被继承的: list-style, list-style-image, list-style-position, list-style-type
  3. 颜色相关属性是被继承的: color
• 不可继承的
  1. 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。