CSS面试题整理-优快云博客

CSS面试题整理

说一下CSS的模型
控制盒模型的模式：
box-sizing:content-box(默认值，标准盒模型)
box-sizing: border-box (IE盒模型)

在HTML页面中的所有元素都可以看成是一个盒子
盒子的组成:内容 content、内边距 padding、边框 border、外边距 margin
盒模型的类型:
标准盒模型
margin + border + padding + content
IE盒模型
margin + content(border+padding)

CSS选择器的优先级
CSS的特性：继承性层叠性优先级
优先级：写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式。标签、类/伪类/属性选择器、全局选择器行内样式 id !important 优先级顺序如下

!important > 行内样式 > id > 类/伪类/属性选择器 > 标签选择器 > 全局选择器

常用的隐藏元素的方法有哪些?

display:none; //最常用的一种  元素在页面消失 元素不占有空间
opacity:0; //设置元素的透明度为0 元素不可见 占据空间位置
visibility:hidden;  //让元素消失 占据空间位置 一种不可见的状态

px和rem的区别

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度
rem，相对单位，相对于html根节点的font-size的值 直接给html节点的 font-size:62.5%;
1rem=10px  16px*62.5%=10px

CSS的哪些属性是可以继承?哪些不可以继承?

CSS的特性：继承性 层叠性 优先级
继承性:子元素可以继承父类元素的样式  
	字体的一些属性可以被继承：font
	文本的一些属性： text-align line-height 
	元素的可见性 ： visibility:hidden
	表格的布局的属性 border-spacing
	列表的属性  list-style 
	页面样式属性 page
哪些不能继承： border  padding margin等

position有哪些值分别是根据什么定位

static 默认没有定位
fixed 固定定位  相对于浏览器窗口进行定位
reliative 相对于自身的定位 不会脱离文档流
absolute 相对于第一个有reliative的父元素 脱离文档流
reliative和absolute的区别
reliative不脱离文档流 相对于自身定位 
reliative如果有left right top bottom这些属性出现，那么就只有 left right有效
absolute 相对于第一个有reliative的父元素进行定位

display:none 和visibility:hiddren的区别

display:none 是不占位置的
visibility:hiddren  虽然隐藏了 但占用了位置
产生回流一定会造成重绘 但重绘不一定会造成回流
产生回流的情况 改变元素的位置 left top 显示隐藏元素
产生重绘的情况  样式改变  换皮肤等

46.px % em rem vw/vh 有什么区别

px 基本单位，绝对单位(其他的都是相对单位)
% 相对于父元素的宽度比例
em 相对于当前元素的font-size
rem 相对于根节点的font-size
vw 屏幕宽度的 1%
vh 屏幕高度的1%
vmin 两者的最小值，vmax两者的最大值