前端工程师面试知识库：CSS相关

1.盒模型

1.ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;
复制代码

2.margin、border、padding、content由外到里 3.几种获得宽高的方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

• dom.style.width/height   这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
• dom.currentStyle.width/height   这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。
• window.getComputedStyle(dom).width/height   这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
• dom.getBoundingClientRect().width/height   这种方式是根据元素在视窗中的绝对位置来获取宽高的
• dom.offsetWidth/offsetHeight   这个就没什么好说的了，最常用的，也是兼容最好的。

4.拓展 各种获得宽高的方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

• 获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width
• 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth
• 网页全文的高度和宽度： document.body.scrollHeight/Width
• 滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft
• 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth
• 网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

5.边距重叠解决方案(BFC) BFC原理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

• 内部的box会在垂直方向，一个接一个的放置 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
• box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
• bfc的区域不会与浮动区域的box重叠
• bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
• 计算bfc高度的时候，浮动元素也会参与计算 创建bfc
• float属性不为none（脱离文档流）
• position为absolute或fixed
• display为inline-block,table-cell,table-caption,flex,inine-flex
• overflow不为visible
• 根元素 demo

<section class="top">
	<h1>上</h1>
	这块margin-bottom:30px;
</section>
<!-- 给下面这个块添加一个父元素，在父元素上创建bfc -->
<div style="overflow:hidden">
	<section class="bottom">
	<h1>下</h1>
	这块margin-top:50px;
	</section>
</div>
复制代码

css reset 和 normalize.css 有什么区别

• 两者都是通过重置样式，保持浏览器样式的一致性
• 前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致
• 后者修复了常见的桌面端和移动端浏览器的bug：包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
• 前者中含有大段的继承链
• 后者模块化，文档较前者来说丰富

居中方法

水平方向上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素
.text_div{
	text-align:center;
}
复制代码

不定宽块状元素居中
.text_div{
    margin:0 auto;//且需要设置父级宽度
}

复制代码

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    left:-50%;
}
复制代码

垂直居中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

单行内联(inline-)元素垂直居中 
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{
    height: 120px;
    line-height: 120px;
}
复制代码

利用表布局
.father {
    display: table;
}
.children {
    display: table-cell;
    vertical-align: middle;
     text-align: center; 
}
复制代码

flex布局
.center-flex {
    display: flex;
    flex-direction: column;//上下排列
    justify-content: center;
}
复制代码

绝对布局方式
已知高度
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}
未知高度
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
复制代码

垂直水平居中根据上方结合文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

flex方式
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
grid方式
.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}
复制代码

css优先级确定

• 每个选择器都有权值，权值越大越优先
• 继承的样式优先级低于自身指定样式
• ！important优先级最高 js也无法修改
• 权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）

bfc内容见盒模型

如何清除浮动

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

• clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度
• 父级同时浮动（需要给父级同级元素添加浮动）
• 父级设置成inline-block，其margin: 0 auto居中方式失效
• 给父级添加overflow:hidden 清除浮动方法
• 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.float_div:after{
	content:".";
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
}
.float_div{
	zoom:1
} 
复制代码

自适应布局

思路：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/4701.html

1. 左侧浮动或者绝对定位，然后右侧margin撑开
2. 使用div包含，然后靠负margin形成bfc
3. 使用flex

画三角形

#item {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	border-bottom: 50px solid blue;
	background: white;
}
复制代码

link @import导入css

1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3. link无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. ink支持使用Javascript控制DOM去改变样式；而@import不支持。

animation

长宽比方案

1. 使用padding方式结合calc实现
2. 长宽一项设置百分比另一项aspect-ratio实现（需借助插件实现）

display相关

1. block:div等容器类型
2. inline:img span等行内类型
3. table系列：将样式变成table类型
4. flex:重点把握，非常强大
5. grid:同上
6. inline-block:可设置宽度，两者间有一点间隙
7. inherit:继承父级