web面试（二）CSS

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异初始化样式会对SEO有一定的影响4. 什么是响应式设计，响应式设计的基本原理是什么响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

CSS优化、提高性能的方法有哪些

  • 移除空的css规则（Remove empty rules）

  • 正确使用display的属性不滥用浮动、web字体

  • 不声明过多的font-size

  • 不在选择符中使用ID标识符

  • 遵守盒模型规则

  • 尽量减少页面重排、重绘

  • 抽象提取公共样式，减少代码量

overflow值

值描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

position的值有哪些

static：默认值。没有定位，元素出现在正常的流中relative（相对定位）：生成相对定位的元素,相对于其正常（原先本身）位置进行定位
absolute：（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

BFC介绍

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

  • 根元素(<html>)

  • 浮动元素（元素的float不是 none）

  • 绝对定位元素（元素的position为absoule或fixed）

  • 行内块元素（元素的display为inline-block）

  • 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）

  • 表格标题（元素的display为table-caption，HTML表格标题默认为该值）

  • 匿名表格单元格元素（元素的display为table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）

  • overflow值不为visible的块元素

  • display值为flow-root的元素

  • contain值为layout、content或pain的元素

  • 弹性元素（display为flex或inline-flex元素的直接子元素）

  • 网格元素（display为grid或inline-grid元素的直接子元素）

  • 多列容器（元素的column-count或column-width不为auto，包括column-count为1）

  • column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

传送门

BFC 主要的作用是：

  1. 清除浮动

  2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

  3. 内部box会在垂直方向，一个接一个地放置。

  4. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

  5. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

  6. 形成了BFC的区域不会与float box重叠

  7. 计算BFC高度时，浮动元素也参与计算

opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构：
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：
display none : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取,visibility: hidden元素内容
opacity: 0： 修改元素会造成重绘，性能消耗较少

联系：
它们都能让元素不可见

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于css3伪类，双冒号(::)用于css3伪元素。（伪元素由双冒号和伪元素名称组成）,双冒号是在当前规范中引入的，用于区分伪类和伪元素

CSS中link 和@import的区别

1：本质的差别，link属于XHTML标签，而@import完全是css提供的一种方式。

link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

4：使用dom控制样式时的差别。当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。

5（不推荐）：@import可以在css中再次引入其他样式表，比如创建一个主样式表，在主样式表中再引入其他的样式表。

移动端px、em、rem、vw/vh/vmin/vmax、%区别

px： 相对长度单位，相对于显示器屏幕分辨率而言的

em：相对长度单位，相对当前对象内文本字体大小，值并不是固定的，会继承父级元素的字体大小，如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px.存在容易造成字体设置混乱问题。

rem：相对长度单位，根元素<html>的，值并不是固定的，如果html根节点设置字体font-size为100px. 则1em=100px. 2em=200px. 跟父级字体无关。浏览器兼容性比较好。

vw,vh,vmin,vmax：视窗单位, 也是相对单位，由视窗 (Viewport) 大小来决定的, 单位 1, 代表类似于 1%. 视窗 (Viewport) 是你的浏览器实际显示内容的区域 -, 换句话说是你的不包括工具栏和按钮的网页浏览器.

具体描述如下:

vw: 视窗宽度的百分比(1vw 代表视窗的宽度为 1%)

vh: 视窗高度的百分比

vmin: 取当前 Vw 和 Vh 中较小的那一个值

vmax: 取当前 Vw 和 Vh 中较大的那一个值

vh 和 vw 相对于视口的高度和宽度, 1vh 等于 1/100 的视口高度, 1vw 等于 1/100 的视口宽度 比如: 浏览器高度 900px, 宽度为 750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框.

%：相对长度单位, 相对于包含块的高宽或字体大小来取值.

vw 和 % 的区别：

1.%是根据父元素的宽高来计算的，而vw则是以viewport来计算

2.100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然 包括了页面滚动条宽度）

清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法?

浮动的元素是脱离文档标准流的，如果我们不清除浮动，那么就会造成父元素高度塌陷，影响页面布局。

清除浮动的方式：

  • 为父元素设置高度

  • 为父元素添加overflow:hidden

  • 伪元素

.fix::after { 
     content:""; 
     display:block; 
     clear:both;
}

使用伪元素的好处：不增加冗余的DOM节点，符合语义化

overflow:hidden可以触发BFC机制。BFC块级格式化上下文，创建了BFC的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算BFC的高度时，浮动元素也参与计算

如何实现高度自适应

情况一：让容器高度充满这个屏幕

在容器内容很少的情况下，要想让这个容器充满整个屏幕：

.container {
　　min-height:100vh;
　　display:flex
}

情况二：让容器高度充满剩余屏幕高度

要让容器充满屏幕的剩余高度，用 vh 结合 flex 布局就可以实现。

.container {
　　min-height:100vh;
　　display:flex
}

.header {
　　height:100px;
}

.content {
　　flex:1;
}

.footer {
　　height:100px;
}

情况三：高度根据内容自适应

把height属性去掉，给它一个padding-bottom的值。那么，css高度就会根据内容来实现自适应，padding-bottom属性设置元素的下内边距（底部空白）。

如何让一个不定宽高的盒子水平垂直居中

定位的方式

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

css3属性

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
flex布局
.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

如何实现等边三角形  

1、图片

2、canvas

3、transform rotate()

 

 

 

 

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kunmomo/p/15472377.html