自行整理面试知识（CSS篇）（一）

display:none 与 visibility:hidden的区别

前者能让元素从渲染树中消失，渲染的时候不会占据任何的空间

后者能让元素被隐藏，渲染时会占据空间，仅是不可见

前者会致使子孙节点无法被渲染，即时向子节点添加display:block也不能使其显示 后者是可继承属性，子孙节点可以通过设置使其显示

修改display会造成文档重排，引起回流，后者只引起重绘

css hack原理和应用

原理：利用浏览器对css的支持和解析结果不一样的特性编写针对某一浏览器的样式

本质上是一种曲线救国的行为，利用某些浏览器才能识别的特殊字符致使其他浏览器无法识别特定的样式，就是hack，比如IE7和IE6的“*”号，以及IE独特的"\9"

应用：嵌入属性，属性hack。 选择器hack，比如:root。HTML头部引用，独用于IE，比如<!–[if IE 7]> 这种形式，其他浏览器会认为这是注释而不会编译

link与@import

不推荐后者，前者可以并行加载，后者是串行加载

在webpack中不存在太大区别，webpack会将其打包成一个css文件，并通过style或者 (插件)link标签添加

浏览器对link的支持度更广

css属性继承

能被继承的属性有除（vertical-align / text-decoration / text-shadow / white-space / unicode-bidi）文本系列及字体系列的所有属性，可见性，表格布局属性，列表布局属性（list-style系列），光标，部分声音样式属性。

内联元素属性继承字体和除text-indent及text-aligin的所有字体属性（修改布局无效）【行内元素】

大部分与阴影/边框/布局/背景/定位相关的属性是无法继承的

文档流/普通流

两者为同一概念

将窗体分为一行一行，并在每一行里从左至右依次排列元素，这就是普通流

浮动元素不占据文档流空间，但是定位仍然基于文档流，当有文件脱离文档流时，其余元素会填补其空间

position：absolute/fixed会使元素完全脱离文档流，前者定位于他最近的一个具有relative属性的父元素（没找到的话就定位于body），后者直接定位于浏览器视窗

position：relative/static不会使元素脱离文档流，前者可以使元素能被left等(位置偏移属性)影响，后者则不会受任何来自层级与偏移属性影响（默认值）

浮动/清除浮动

浮动可以使元素脱离文档流，使其向左或向右移动，使其外边框碰到另一个float元素或者包含他的元素边框为止

浮动框会自动向下换行，若高度不一，则会导致元素被卡住，float在视觉上无法生效

浮动会导致他的容器无法自适应伸长，因为脱离了文档流，致使其类似position：absolute，对渲染树类似于不存在的幽灵一般，这个时候有可能造成页面的布局错误，需要使用clear属性进行清除浮动

只要向容器元素的任意元素添加clear:both，多用:after伪类元素进行清除，clear实际原理是设置元素的某一边不被float环绕

容器元素如果有写死了的width，是不存在这个问题的

如果生成了BFC，则浮动元素也会被算在BFC高度内，所以向容器元素添加overflow:hidden，同样有效

BFC

BFC：块级元素上下文

两者都是独立的渲染区域，BFC是造成margin塌陷的元凶，BFC会致使其中相邻box的margin合并重叠，BFC的排列方式是在垂直方向从左至右，BFC的区域不受任何来自外界元素的影响，也不会影响外界元素，所以不受float影响，不会环绕float box，BFC计算高度时也会计算上float box的高度，所以可以清除浮动

生成BFC，则是让容器内元素无法影响外界，或者不会被外界影响的属性：

position为fixed和absolute，float属性不为none，display为inline-block，table-cell，table-caption，flex，inline-flex

overflow不为visible

主要应用于自适应两栏布局，向容器元素添加overflow：hidden即可让容器内形成BFC，使元素无视float不占位，将元素按边框依次排列

外边距折叠(collapsing margins)

一般与水平方向的margin无关，影响的是垂直方向的margin，会致使margin发生折叠（选取最大的那个显示），且这种折叠与父子关系无关，是在渲染之后相邻元素（在视觉上相邻）之间发生的现象。

BFC会阻止折叠现象，只要使元素生成BFC，就可以避免外边距折叠。

inline-block与veritical-align（IFC）

具有行内元素特性的元素之间有些时候会有间隙，在大部分的时候是因为编码习惯下的回车导致的占位，只需要设置font-size:0px解决了，由此引出baseline概念

vertical-aligin默认基于元素baseline布局，元素会被排列至父元素的基线上方，一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

IFC（行内元素上下文）则是根据基线进行从左至右的排列的，而幽灵元素则会影响基线为其底边框，导致对齐出现问题，设置line-height ： 0，和font-size：0px是一个道理，都会强制使其不占位

同时vertical-aligin决定了元素是根据哪一条基线进行排列的，这也是vertical-aligin的实现原理

css优先级

排除!important情况下，以最近更改的样式为准

!important > 内联 > !d > class > tag 

水平居中

行内元素居中可以用text-aligin：center

块级元素使用margin：0 auto （实际上使浏览器自动分配多余的左右空间，所以这种居中是基于其父元素的width的,可以设置width：fit-content）

浮动和绝对定位下可以使用left：50% + margin-left：- calc(宽度值 /2)进行居中

flex可以使用justify-content：center进行居中

垂直居中

行内元素使用vertical-aligin：middle进行居中（多用于table和table-cell的居中）

绝对定位下可以使用top：50% + margin-top：- calc(高度值 /2)进行居中

也可以使用top 0 left 0 right 0 bottom 0 margin auto进行在绝对定位下的居中

同样，可以使用translate(0,-50%) + top:50% 进行在绝对定位下的居中，原理是元素上边距至视窗有50%的top，再向上translate50%的自身高度值，则可实现居中

借助第三方div，设置一个50%高的兄弟元素，将该元素向下挤50%，再给居中元素本身设置自身高度的50%的负的margin-top

flex：align-items：center

vertical-aligin与line-height对行内元素居中：利用line-height强行改变基线位置，设置line-height的值为元素高度，则中心基线则为元素中线，再设置vertical-aligin: middle

垂直水平居自行组合

浏览器兼容

各大浏览器的内核不同，造成兼容问题。

有些浏览器的分辨率不同，有些浏览器的margin和padding不统一，由于在不同分辨率下页面产生不同的原理是因为页面被zoom（缩放了），所以通过得到浏览器可用视窗大小/开发分辨率（window.screen.availWidth / 你开发所用浏览器分辨率）给缩放回去，后者只需要给全局下设置margin 0 padding 0则可做到兼容

至于浏览器本身的js兼容问题，容js篇再谈