css常见面试题

用css写一个三角形

width:0;
height:0;
border:30px solid transparent;
border-top-color:blue;

三种定位的区别

相对定位(relative)：相对于自身
绝对定位(absolute)：相对于有定位元素的最近的父级
固定定位(fixed)：相对于屏幕

上下固定中间自适应怎么实现

弹性盒方法：上下写高中间flex:1
absolute方法：上中下全部absolute，上写高与top:0，下写高与bottom:0,中间top:上的高，bottom:下的高

display:inline-block后中间有空隙怎么解决

方法一：自身添加浮动
方法二：挨着写标签，勿换行
    正确方式

<div>
	<p>inline-block块</p><p>inline-block块</p><p>inline-block块</p>
</div>

    错误方式

<div>
	<p>inline-block块</p>
	<p>inline-block块</p>
	<p>inline-block块</p>
</div>

方法三：父级添加font-size:0

盒模型:标准盒与怪异盒

标准盒(box-sizing:content-box)：总宽 = width(content) + padding + border + margin
怪异盒(box-sizing:border-box)：总宽 = width(content+padding+border) + margin,即把padding与border算在了width中

居中

方法一：弹性盒；
方法二：position + margin:auto；
方法三：position + margin:-宽的一半，-高的一半；
方法四：position + transform:translateXY(-50%)；
方法五：text-align + line-height + inline-block + vertical-align；（存在缺陷，必须与文字共同存在时，才可以上下居中。）

display:none与visibility:hidden的区别

display：none 不显示对应的元素，在文档布局中不再分配空间
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间

回流与重绘

回流：当浏览器发现某个部分发生了变化影响了布局，需要倒回去重新渲染
重绘：改变某个元素的背景色、文字颜色、边框颜色等影响周围或内部布局的属性时，屏幕的一部分要重画，但元素的几何尺寸不变。
回流必定引起重绘，而重绘不一定会引起回流
display:none;的节点不会被加入渲染树，而visibility: hidden;会被加入渲染树
display:none;会触发回流；visibility: hidden;会触发重绘

清除浮动的几种方式

方法一：给父元素设置高度；
方法二：给父元素使用overflow: hidden；
方法三：同级元素最后新增元素添加clear 属性；
方法四：给父元素利用伪元素清除浮动；

.clearfix::after{
	content: '';
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix{
	*zoom: 1;
}

上下margin重合的问题

margin重合时会取大的值。

line-height的三种值

line-height:number/length/%(number与%都是基于当前字体尺寸的倍数，length是设置固定的行间距)

flex:1等同于什么

flex-grow：用于设置各item项按对应比例划分剩余空间，若flex中没有指定flex-grow,则相当于设置了flex-grow:1
flex-shrink：用于设置item的总和超出容器空间时，各item的收缩比例，若flex中没有指定flex-shrink,则等同于设置了flex-shrink:1
flex-basis：用于设置各item项的伸缩基准值，可以取值为长度或百分比，如果flex中省略了该属性，则相当于设置了flex-basis:0.

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

常见的pc端css兼容性问题

1.双倍浮动BUG：
    描述：块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大；
    解决方案：给float的元素添加 display:inline;将其转换为内联元素；
2.表单元素行高不一致：
    1.给表单元素添加vertical-align:middle;
    2.给表单元素添加float:left；
3.IE6（默认16px为最小）不识别较小高度的标签（一般为10px）：
    1.给标签添加overflow:hidden;
    2.标签添加font-size:0;
4.图片添加超链接时，在IE浏览器中会有蓝色的边框：
    解决方案：给图片添加border:0或者border：none;
5.最小高度min-height不兼容IE6;
    1.min-height:100px;_height:100px;
    2.min-height:100px;height:auto!important;height:100px;
6.图片默认有间隙：
    1.给img添加float属性；
    2.给img添加display：block;
7.按钮默认大小不一：
    1.如果按钮是一张图片，直接用背景图作为按钮图片；
    2.用a标记模拟按钮，使用JS实现其他功能；
8.百分比BUG：
    描述：父元素设置100%，子元素各50%，在IE6下，50%+50%大于100%；
    解决方案：给右边的浮动元素添加clear:right；
9.鼠标指针BUG：
    cursor:hand 只有IE浏览器识别；
    cursor:pointer;IE及以上浏览器和其他浏览器都识别（手型）；
10.透明度设置，IE不识别opacity属性：
    标准写法：opacity:value;(取值范围0-1)；
    兼容IE浏览器 filter:alpha(opacity=value);(取值范围1-100)；
11.上下margin重叠问题：
    描述：给上面的元素设置margin-bottom，给下面的元素设置margin-top,只能识别其中较大的那个值；
    解决方案：　　
        1.margin-top和margin-bottom 只设置其中一个值；
        2.给其中一个元素再包裹一个盒子，并设置over-flow:hidden;
12.给子元素设置margin-top.应用在了父元素上：
    1.把给子元素设置的margin-top改为给父元素设置padding-top;
    2.给父元素设置1px的border,即border-top:1px solid transparent;
    3.给父元素设置over-flow:hidden;
    4.给父元素设置float:left；