CSS常见样式1

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

块级元素：header , main , footer , h1~h6 , div , section , aside , article , p , ul，li , ol , table , thead , tbody , tfoot , tr , form , dl , dt。
行内元素：span , img , input , a , td , dd , textarea , select , option , em , strong。
区别：

• 块级元素的大小为单独占据一行的空间大小，行内元素的大小只有本身元素的大小。
• 块级元素可以设置自身的宽高，而行内元素无法设置。
• 块级元素可以设置margin值和padding值，但是行内元素只能设置margin和padding的左右值。
• 块级元素既可以容纳块级元素也可以容纳行内元素，而行内元素只能容纳行内元素。

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

所谓的CSS继承，就是给父元素设置一个样式，他的子元素也会被赋予该样式，我们把这叫做CSS继承。
可以继承的属性有：font , color , line-height , text-align , list-style , text-transform , word-spacing , letter-spacing 。
不能继承的属性有：margin , padding , background , border , display , positon , float , top , right , bottom , left , width , height 。

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

块级元素水平居中：div { margin: 0 auto; } ，当然还可以利用position，给父元素设置一个postion属性，可以使用absolute， 也可以使用relative , 然后给自身设置right: 50%-自身一般的宽度。
行内元素水平居中：将行内元素的display属性设置为block，然后像块级元素一样操作让其水平居中。或者在行内元素的父元素上，设置一个text-align：center，但是他的父元素必须是块状元素。

4.用 CSS 实现一个三角形

http://js.jirengu.com/nipin/1

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

将该文本设置为块级元素，然后添加样式：

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

如果不将文本设置为块级元素，可以在其父元素，父元素必须是块级元素，添加上述样式，也行。

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

• px是基本的像素单位，是一个固定值。
• em是相对单位，根据其父元素的大小来确定，假若父元素的字体大小为20px，他的子元素为1em的时候，字体转化为px为20px ，2em的时候字体为40px , 他是父元素的倍数。
• rem也是相对单位，他的大小根据html根元素的大小来确定，html根元素的大小一般为16px , 62.5%rem = 10px。

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

代码.png

• 确定body中的所有元素字体大小为12px,行高为字体大小的1.5倍，字体样式从下列选择
  ’tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;从左至右，依次匹配，最先匹配到的被使用，其他的就无效了。
• 至于为什么加引号，是因为如果不加引号，Hiragino Sans GB将会因为它的单词中间的空格而被浏览器认为是三种字体，使该字体无法被识别，所以需要添加引号，让浏览器识别它为一个字体。
• '\5b8b\4f53'代表黑体的字体样式，可以通过浏览器的调试窗口,console端输入eacape('\5b8b\4f53')；得到黑体的字样。

实现效果：

1.http://js.jirengu.com/nipin/2
2.http://js.jirengu.com/puxed/6
3.http://js.jirengu.com/qiko/1
4.http://js.jirengu.com/tawoz/1
5.http://js.jirengu.com/yevaj/1