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 实现一个三角形
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代表什么?
- 确定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