1. 块级元素和行内元素有哪些？动手测试并列出4条以上的特性区别
块级元素：div,h1,h2,h3,h4,h5,h6,hr,p,form,ul,ol,li,pre,table,dl,dd,dt,tr,td,th
行内元素：em,strong,span,a,br,img,button,input,label,select,textarea,code,
script
区别
(1) 块级元素可以包括块级元素和行内元素，行内元素只能包括行内元素和文本
(2) 块级元素占据一整行空间，行内元素只占据自身宽度空间，多个行内元素并排排列
(3)块级元素可以设置宽高，行内元素不能设置宽高
(4)块级元素设计边距生效，行内元素设置上下边距(margin、padding)不生效，左右边距(margin、padding)生效
2. 什么是CSS继承，那些属性能继承，哪些不能？
css继承：子元素继承父元素CSS样式的属性值
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction（字体内容 大小相关属性）
块状元素可继承：text-indent和text-align(字体布局属性,当前元素必须是块级元素)
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image(ul ol 的属性可以继承给li)
表格元素可继承：border-collapse
3. 如何让块级元素水平居中？如何让行内元素水平居中？
块级元素水平居中 margin: 0 auto;
行内元素水平居中 text-align: center;
4. 用CSS实现一个三角形
.tr{
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
}
5. 单行文本溢出加...如何实现？
e{
white-space: nowrap; //不折行
overflow: hidden; //溢出之后隐藏
text-overflow: ellipsis; //文本溢出之后用...表示
}
6. px,em,rem有什么区别？
px：固定单位
em：相对单位，相对于父元素字体大小
rem：相对大小，相对于根元素(html)z字体大小
7.解释下面代码的作用？为什么要加引号？字体里\5b8b\4f53的代表是什么？
body{
font: 12px/1.5 tohoma,arial,'Hiragino Sans GB',5b8b\4f53',sans-serif;
}
作用：表示页面字体大小为12px，行高是字体的1.5倍，后面是字体，用逗号隔开，用户浏览第一个字体，若没有，就查询第二个字体，以此类推，如果都没有，则使用浏览器默认样式。
加引号是因为中间有空格，不加引号会被识别成三个元素，\5b8b\4f53表示字体用Unicode编号，这个表示"宋体"
网友评论