CSS的常见样式（上）

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

• 块级元素：div h1~h6 ul dl ol p hr form pri table li dt tr dd td dh

• 行内元素：span a em strong br img button input label select texteare code script

  
  
  e3d0a167a512755890299c203941afc.png

-特性：
1.块级元素内可以包含行内元素和块级元素，而行内元素只能包含行内元素和文本；
2:块级元素可以设置宽高，而行内元素无法设置宽高；
3.块级元素设置margin、padding上下左右都生效，而行内元素设置margin、padding上下不生效，只有左右才生效；
4.块级元素独占一行，而行内元素只占据自身宽度空间

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

• 应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会
• 可以继承：font-family,font-size,font-style,font-variant,font-weight,font
  word-spacing letter-spacing text-align text-transform text-indent line-height
  color list-style-image, list-style-position,list-style-type, list-style
• 不能继承：text-decoration vertical-align background border
  margin padding width height float clear position left top overflow z-index display

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

1aaa8f0a73c155dc3581baa5d55da49.png

• 块级元素水平居中使用margin:0 auto;即可
• 行内元素水平居中使用padding和text-align:center即可

5.用 CSS 实现一个三角形

这是一个三角形

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

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

7.px, em, rem 有什么区别?

px:固定单位
em:相对单位，相对于父元素字体的大小
rem:相对单位，相对于根元素（html）字体的大小

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

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

字体大小为12px;
字体行高为1.5倍字体大小；
代码字体可在tahoma,arial,‘Hiragino Sans GB’,’\5b8b\4f53’,sans-serif 这些字体中选择 ； （若都不存在，则为浏览器默认字体）
当有空格或者Unicode码时，需要加引号；
\5b8b\4f53是字体的Unicode码，表示宋体；

• 实现如下效果【参考】
  作业
• 实现如下按钮效果【参考】
  作业
• 实现如下表格【参考】
  作业
• 实现如下三角形
  实现如下card:参考
  作业