2021 css常见面试知识点总结

https://juejin.cn/post/6941206439624966152

1，css盒子模型

分为ie盒子模型和标准盒子模型

ie：width和hegiht属性是计算content 和 padding 和border之和的

标准：width 和 height 就是content的高和宽

在css3中引入 box-sizing属性

两个属性值，content-box对应ie盒子模型 border-box对应标准盒子模型

2， 画一条0.5px的线

直接设置0.5px，其实不太可靠，因为不同浏览器表现不一样。

meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

width	设置 layout viewport   的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置 layout viewport   的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

2，transform: scale(0.5,0.5);

附：transform有六个属性值

matrix:矩阵，六个值

translate：移动位置

scale：缩放，定义两值的话，第一个是宽0.5比例，第二个是高

rotate：旋转，值为角度

skew：倾斜

3，transition和animation的区别

transition 有四个值property属性名，duration持续时间，timing-function速度曲线，delay延迟时间，多用于当样式变化时，如：hover

transition:width 2s, height 2s, background-color 2s, transform 2s

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count 动画播放次数
• animation-direction 是否反向播放 ：属性默认normal 可选alternate：轮流的
• fill-mode
• play-state

animation需要用@keyframes（关键帧）规则定义两个或多个关键帧来完成

例子：

@keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#examples

区别 1. 需要一个事件来触发，比如hover，所以没法在网页加载时自动触发。

2. 是一次性的，不能重复发生，除非一再触发。animation-iteration-count

3. 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。@keyframes

4,BFC

https://blog.csdn.net/sinat_36422236/article/details/88763187

http://www.itcast.cn/news/20201016/16152387135.shtml

BFC(Block formatting context)直译为"块级格式化上下文

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

如何创建BFC

·body根元素

·设置浮动，不包括none

·设置定位，absoulte或者fixed

·弹性布局，flex

·行内块显示模式，inline-block

·设置overflow，即hidden，auto，scroll

·表格单元格，table-cell

bfc解决外边距塌陷

问题：两个div盒子设置margin :100px，实际却只显示100px

解决：通过包裹这两个盒子的div设置bfc如overflow:hidden

利用BFC解决包含塌陷

问题：子元素设置margin-top会作用到父元素上，并且内部并没有实现margin-top

解决：利用bfc独立容器的特点，给父元素触发bfc设置overflow：hidden

子元素浮动影响父元素

问题：子元素浮动，父元素没有设置高度，在这个前提下子元素如果浮动，子元素脱离文档流，父元素失去子元素高度支撑消失

解决方案:给父元素触发bfc：overflow:hidden 因为bfc在计算高度时会计算浮动元素

 BFC可以阻止标准流元素被浮动元素覆盖

问题，两个div盒子，当其中一个盒子设置浮动后脱离文档流，会覆盖掉还在文档流的div盒子

解决方案：基于BFC的区域不会与float box重叠。给还在标准流的div盒子触发bfc：overflow:hidden

5，垂直居中的方法

我们在学习margin时，可能会有这么一个疑问，为什么margin:auto只能实现水平居中，而不能实现垂直居中？

原因是：

auto的作用为：自动填充剩余空间

默认的宽度规则是“适应于父级”规则（在水平方向上自动扩充）

块级元素在水平方向自动填充一整行，而在垂直方向上不会自动填充

因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin：auto不能实现垂直居中。

————————————————

问题：

如何让一个div盒子在浏览器窗口中垂直居中：

1.1:设置开启position定位后设置高度

position：relative后是的该盒子可以设置top值

设置

top：50%

margin-top：-（二分之一的盒子高度）

1.2: transform: translateY

top：50%

transform: translateY(-50%)

意思是使得div向上平移（translate）自身高度的一半(50%)

优点：该方法比起上述方法无需知道自身高度

2，flex布局：给父元素

display: flex; align-items: center; /*定义body的元素垂直居中*/ justify-content: center;

2.2魔改版：让主轴变为垂直在设置 主轴内元素居中

flex-direction:column；

justify-content：center；

3，给父元素开启相对定位，给子元素开启绝对定位，最后设置margin： auto；

如果实在浏览器窗口内只有一个盒子让他实现垂直居中

那么还需要使html，body：｛

width：100%；

height： 100%；

padding：0；

｝

即清空浏览器默认样式

4，父元素设置上下内边距相等，但同时不设置高度，让他默认被子元素撑起

5，table-cell (未脱离文档流)

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

只适用行内元素的垂直居中，并且是单行文本。

6，块元素和行元素

块元素：

• 独占一行
• 宽度默认为父级的100%
• 可以设置height width margin padding

行内元素：

• 不会独占一行
• 垂直方向不可以设置margin padding，不可以设置width height

7，opacity=0，visibility=hidden，display:none

都是将元素隐藏

opacity=0 不会改变页面布局，不会删除绑定事件，例如果绑定click事件，点击任然会触发相关事件

visibility=hidden: 不会改变页面布局，但是不会触发元素已绑定的实践

display:none: 改变页面布局，元素删除

8， 双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠

折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

9,清除浮动

https://www.cnblogs.com/ForEvErNoME/p/3383539.html

一 :after伪元素

1，利用clear：both

在浮动元素有设置一个空元素，并设置其css样式claer：both 缺点：添加了无用的html

或者直接给下一个html添加上clear：both

最终方案：

二：

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动

.clearfix:after{ content: "020"; display: block; height: 0; clear: both; visibility: hidden; }

三：给浮动元素的容器添加overflow:hidden （触发父元素bfc）

使得浮动元素回到容器层

10，CSS选择器，优先级

!improtant>内联样式（1000）id选择器（100）>class类选择器（10）=伪类（10）>元素选择器/标签选择器（1）>通配选择器 *（0）

再然后就是继承，子元素会继承父元素的样式，子元素会覆盖掉相同属性的样式

一个选择器里含多个选择器则相加优先级计算，并集选择器单独计算（可以理解为多个单独的选择器，只是合在一起写了）

11，浮动元素display:block

12, inline-block （img）

比起inline他可以设置宽高

比起block他不独占一行

13，css绘制三角形

基于border在四个方向上为四个不同的梯形，而当盒子宽度高度为0的情况下，则会形成四个方向上不同的三角形

那么就可以是剩下三个三角形透明实现

div｛ width: 0 height: 0 border: 40px solid border-color: transparent transparent red ｝