CSS知识总结

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

答:块级元素有h1~h6,p,div,ul,ol,form,article,aside,table,dl.dd,hr.行内元素有span,input,strong,em,a,img,code,button,lable,select,textarea.块级元素与行内元素的区别有,1,块级元素会占据一整行,后一个块级元素会新起一行,行内元素只占据内容的宽度,2,块级元素设置盒模型padding,margin上下左右都有效,行内元素设置padding,margin左右有效,上下没有效果。3,块级元素可以包含其他块级元素或行内元素,行内元素只能包含数据或行内元素。4,块级元素可以设置宽高,行内元素不能设置宽高。

2 什么是 CSS 继承? 哪些属性能继承,哪些不能?

答:CSS 继承指元素的有些属性能继承给后代元素。能继承的属性有color,font-family,font-size,font-style,font,line-height,list-style,text-align,visibility,word-spacing.不可继承的有display,margin,padding,border,background,height,width,position.

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

答:设置margin:0 auto;让块级元素居中。让行内元素水平居中只需在父级块级元素中设置text-align:center;

4 用 CSS 实现一个三角形

答:设置一个块级元素,宽高设置为0,设置边框border为三角形的高度。设置三个方向的边框颜色为transparent,剩下一个为三角形的颜色。html:

css: .box{
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-right: 100px solid transparent ;
border-bottom: 100px solid transparent ;
border-left: 100px solid red ;
}

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

答:给文本设置三个属性:overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

6 px, em, rem 有什么区别

答:px为像素,em为父级元素的字体大小,rem为相当于body字体大小。

7 解释下面代码的作用?为什么要加引号? 字体里的数字符号代表什么?

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

答:第一个参数设置字体大小和行高,等效于font:12px;line-height:1.5;第二个参数设置字体,。因为字体名字中有空格,加上引号表示一个参数,字体里的数字符号代表中文字体名字的unicode码,'\5b8b\4f53'表示宋体。设置不止一个字体时,自动匹配字体库中能找到的最近一个字体。

代码

1 实现如下效果: 【参考】

JS Bin代码链接

2 实现如下按钮效果: 【参考】

JSBin代码链接

3 实现如下表格:【参考】

JS Bin代码链接

4 实现如下三角形

JS Bin代码链接

5 实现如下Card: 【参考】

JS Bin代码链接

你可能感兴趣的:(CSS知识总结)