问答

1. 块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

块级元素:
address caption div dl dt dd fieldset form h1~h6 hr legend li ul ol noframes p pre table tbody tfoot thead th td tr
行内元素:
a abbr acronym b bdo big br cite code dfn em i img input kbd label q samp select span strong sub sup texrarea tt var
可变元素(根据上下文语境决定该元素为块级元素或行内元素):
button del iframe ins map object script
区别:

• 块级元素各占据一行,且另起一行,默认情况下,其宽度自动填满父容器的宽度;行内元素不会独占一行,相邻行内元素会排列在同一行,直到排不下自动换行,其宽度随内容而变化;
• width,height属性对块级元素设置有效,对行内元素无效;行内元素是由其内容决定其宽度和高度
• 块级元素即使设置了width也是独占一行;行内元素设置上下padding,margin不生效,背景和border会被撑开,但行内元素高度还是自身的高度
• 块级元素可以包含行内元素和块级元素;行内元素只能包含行内元素或文本

2. 什么是 CSS 继承? 哪些属性能继承，哪些不能？

CSS继承是指被包在内部的标签将用用外部标签的样式性质,一种允许样式不仅可以应用于某个特定元素,还可以应用于后代的机制;对可以继承的元素来说,子元素自身样式优先于从父级继承的样式

• 无继承性的属性

1. display: 规定元素应该生成的框类型
2. 文本属性:
   vertical-align: 垂直文本对齐
   text-decoration: 规定添加文本的装饰
   text-shadow: 文本阴影效果
   white-space: 空白符的处理
   Unicode-bidi: 设置文本的方向
3. 盒子模型的属性: width height margin border border-style padding
4. 背景属性: background background-color background-image background-repeat background-position
5. 定位属性: float clear position top right min-width max-width overflow clip z-index
6. 生成内容属性: content counter-reset count-increment
7. 轮廓样式属性: outline-style outline-width outline-color
8. 页面样式属性: size page-break-before
9. 声音样式属性: pause-before pause-after pause cue-before play-during

• 有继承性的属性

1. 字体属性
   font: 组合字体
   font-family: 规定元素的字体
   font-weight: 字体粗细
   font-size: 字体大小
   font-style: 字体风格
   font-variant:设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
   font-size-sdjust: 为某个元素规定一个aspect值,可以保持首选字体的x-height
2. 文本属性
   text-indent: 文本缩进
   text-align: 文本水平对齐
   line-height: 行高
   Word-spacing: 增加或减少单词间的空白
   letter-spacing: 增加或减少字符间的空白
   text-transform: 控制文本大小写
   direction: 规定文本的书写方向
   color: 文本颜色
3. 元素可见性: visibility
4. 表格布局属性: caption-side border-collapse border-spacing empty-cells table-layout
5. 列表布局属性: list-style-type list-style-images list-style-position list-style
6. 生成内容属性:quotes
7. 光标属性: cursor
8. 页面样式属性: page page-break-inside Windows orphans
9. 声音样式属性: speak speak-puntuation speak-numeral speak-header speak-rate volume voice-family pitch stress richness azimuth elevation

• 所有元素可以继承的属性

1. 元素可见性: visibility
2. 光标属性: cursor

• 内联元素可以继承的属性

1. 字体系列属性
2. 除text-indent text-align之外的文本系列属性

• 块级元素可以继承的属性
  text-indent text-align

3. 如何让块级元素水平居中？如何让行内元素水平居中?

• 块级元素设置width后,使用margin: 0 auto;
• 行内元素居中使用 text-align: center;

4. 用 CSS 实现一个三角形

.box{
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-bottom: 100px solid red;
}

5. 单行文本溢出加 ...如何实现?

white-space:nowrap;/*规定段落中的文本不进行换行*/
overflow:hidden;/*设置hidden内容会被修剪，并且其余内容是不可见的。*/
text-overflow:ellipsis;/*ellipsis显示省略符号来代表被修剪的文本。*/

6. px, em, rem 有什么区别

• px: 像素(pixel),相对于显示器屏幕分辨率而言,1px就是1像素大小
• em: 相对长度单位.相对于当前对象内文本的字体尺寸,即父元素font-size;若未被设置,则相对于浏览器的默认字体尺寸
• rem: CSS3新增的相对单位(root em),rem是相对单位,但相对的只是HTML根元素;通过他既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应

7. 解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

• 作用:
  body元素内字体大小设置为12px,lin-height行高设置为1.5倍,字体样式为tahoma,系统里没有这种字体就采用arial样式,没有找到就往后推,直到找到为止,都没有就采用系统默认样式sans-serif
• 加引号是因为单词间有空格,防止误认为是多个单词(样式),解析错误
• \5b8b\4f53代表汉字"宋体"的Unicode编码

---

代码

1. 地址
2. 地址
3. 地址
4. 地址
5. 地址