css常见样式及属性

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

• 块级元素和行内元素分别有哪些
  1.块级元素
  div，h1~h6，p，hr，form，ul，dl，ol，pre，tableli，dd，dt，tr，td，th；
  2.行内元素 em,strong,span,a,br,img,button,input,lable,select,textarea,code,script;

• 动手测试并列出4条以上的特性区别
  1.块级元素可以包含文本，块级，行内元素，而行内元素只能包含文本和行内元素；
  2.块级元素单独占据一整行，行内元素占据的位置只有自身文本宽度的空间；
  3.块级元素可以设置宽高，行内元素设置宽高无效；
  4.块级元素的padding，margin值设置有效，行内元素padding，margin上下的值设置无效，但左右有效；

  
  
  

二、什么是 CSS 继承? 哪些属性能继承，哪些不能？

• 什么是CSS继承？

继承就是子元素继承了父元素的CSS样式的属性

• 什么属性能继承？

1.字体：family，size，weight，line-height
2.文本：letter-spacing，word-spacing，text-align, text-indent
3.列表：list-style-type
4.颜色：color，ps：a标签不能继承父元素的字体颜色，原因是a标签自己有默认字体颜色，会覆盖掉- 继承自父元素的字体颜色；

• 什么属性不能被继承？

1.display
2.float
3.padding和margin
4.背景相关，比如颜色图片等

三、如何让块级元素水平居中？如何让行内元素水平居中?

• 如何让块级元素水平居中？

div{margin: 0 auto;}

• 如何让行内元素水平居中?

div{text-align:center;}
扩展__垂直居中

四、用 CSS 实现一个三角形

各种三角形

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

1.white-space:nowrap：设置文本不换行；
2.overflow:hidden：设置文本溢出后隐藏；
3.text-overflow:ellipsis：当文本溢出后生成“…”；

六、px, em, rem 有什么区别

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

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

• 字体大小为12px，行高是字体的1.5倍
• 设置字体为tohoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif 设置的字体如果浏览器以及用户本地没有，则选择下一项，以此类推，如果候选字体全都没有，则使用普通无衬线字体。
• 加单引号,表示引号内是一种字体，防止空格会造成浏览器读取错误。
• \5b8b\4f53 表示宋体的Unicode编码。

八、代码效果

• 代码1-文本
• 代码2-按钮
• 代码3-表格
• 代码4-三角形
• 代码5-card