1、什么是 CSS 继承?哪些属性能继承,哪些不能?
css继承是指当html中某元素未设置任何属性时,其父元素的css属性值会传递给其子元素,使得该元素也具有该种属性,这就是css属性继承。
不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承: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。
表格元素可继承:border-collapse
2、块级元素和行内元素分别有哪些?
常用的块级元素主要有:div,h1~h5,p,ul,li,table,form,dl,dt,dd等;
常用的内联元素主要有:span,a,img,em,strong,button,input,label,select,textarea等。
3、如何让块级元素水平居中?如何让行内元素水平居中?如何让 inline-block 元素水平居中?
块级元素水平居中:margin:0 auto;
行内元素水平居中:父容器设置text-align:center;
inline-block元素水平居中:父容器设置text-align:center。
4、单行文本溢出加 ...如何实现?
实现思路:a、单行文本超出不换行 b、超出部分隐藏 c、溢出部分用...代替。
代码如下:
```
white-space:nowrap;
over-flow:hidden;
text-overflow:ellipsis;
```
5、px, em, rem,vw 有什么区别
px:像素,绝对单位;em:相对于父元素中文本尺寸大小,如:1em表示父元素文本大小相同;rem:相对于根元素中文本尺寸的大小,如:html文档中就是相对于HTML中文本的尺寸大小;vw:相对于父元素宽度的百分比,1vw = 1%*父元素width。
6、解释下面代码的作用? 字体里\5b8b\4f53代表什么?
```
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
```
设置body元素中字体大小为12px,行高为字体大小的1.5倍,字体优先级依次为tahoma、arial、‘Hiragino Sans GB’、黑体、scans-serif;
\5b8b\4f53 代表“黑体”这两个汉字,试想如下场景:当某位用户(如外国用户)浏览器中没有中文字体解析文件,将html字体设置成“黑体”两个字时该用户电脑无法解析,因此系统无法去找到黑体字体文件来解析渲染html中文字,这时我们将“黑体”两个汉字编码成两个数字字母代码\5b8b\4f53 ,所有用户的浏览器都能识别并去搜索对应字体文件去解析渲染页面。
7、浏览器渲染文字机制?
浏览器读到html文件后进行解析渲染,读到文字时,会先将其转换成该字体对应的unicode码(每种文字都有一套对应的unicode码),之后再根据html中font-family去查找用户电脑中对应字体文件,最后根据字体文件去将编码好的unicode码一一渲染绘制出对应字体在页面上展示给用户。当用户本地不存在该字体时,无法解析渲染。