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

2018-9-16

CSS相关

1.盒模型

1.ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法如下

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

2.margin、border、padding、content由外到里 3.几种获得宽高的方式

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.拓展各种获得宽高的方式

获取屏幕的高度和宽度（屏幕分辨率）： 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原理

内部的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。
前者中含有大段的继承链
后者模块化，文档较前者来说丰富

居中方法

水平方向上

针对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%;
}
复制代码

垂直居中

单行内联(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%);
}
复制代码

垂直水平居中根据上方结合

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

css优先级确定

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

bfc内容见盒模型

如何清除浮动

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

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
} 
复制代码

自适应布局

思路：

左侧浮动或者绝对定位，然后右侧margin撑开
使用div包含，然后靠负margin形成bfc
使用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;
}
复制代码