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%,行内元素默认宽度是它本身容器的宽度
  • widthheight 只对块级元素生效,对行内元素无效。

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

你可能感兴趣的:(CSS常见样式)