css常见样式1

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

块级元素：

div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th

行内元素：

em strong span a br img 
button iput label select textarea
code script

块级元素特性：

• 每个块级元素都各占一整行空间。
• 可包含块级和行内。

行内元素特性：

• 行内元素占据自身宽度空间。
• 可包含行内和文本。
• 设置宽高属性无效，它的长度高度主要根据内容决定。
• 和相邻的行内元素会在同一行。

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

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值为继承属性。文档根元素则取该属性给定的初始值。

• 会继承 color font-size等
• 不继承 padding margin border background-image等

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

对于块级元素 设置 margin: 0 auto 可达到居中目的;
行内元素则对父级元素设置text-align:center来实现

4. 用 CSS 实现一个三角形

借助border属性（前提要求：元素本身的长宽为0；将不需要的部分通过 border-color 来设置隐藏）

.t1{
  height:0px;
  width:0px;
  border-top:solid 20px transparent;
  border-left:solid 20px transparent;
  border-right:solid 20px transparent;
  border-bottom:solid 20px blue;
}

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

.card > h1{
  white-space: nowrap; /*将文本限制换行*/
  overflow: hidden;/*溢出部分隐藏*/
  text-overflow: ellipsis;/*溢出部分显示为省略*/
}

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

• px： 固定单位
• em: 相对单位，相对于父元素字体大小
• rem: 相对单位，相对于根元素(html)字体大小

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

将body的字体大小设置为12px，行高设置为1.5，字体优先度（如果浏览器或本地找不到tahoma则选用下一个字体arial，重复）为tahoma,arial,Hiragino Sans GB,'\5b8b\4f53',sans-serif
因为名字中间有空格，不加引号会被误认为多个字体；\5b8b\4f53代表黑体2个中文字的Unicode码

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

代码及实现效果

文字边框
按钮
表格
三角形
card