css问题-优快云博客

本文详细探讨了CSS中display:none,visibility:hidden和opacity:0的区别，包括它们对空间占用和事件处理的影响。此外，还讨论了<link>与@import导入样式表的差异，以及FOUC的避免方法。文章深入讲解了BFC（BlockFormattingContext）的概念及其在解决布局问题中的应用，并介绍了CSS选择器权重、盒模型的差异以及响应式设计的基本原理。

display:none;与visibility:hidden; 与 opacity:0的区别

联系：它们都能让元素不可见
区别：
- 占据空间
  - display：会让元素完全从渲染树中消失，渲染的时候不占据任何空间
  - visibility和opacity占据空间，只是内容不可见
- 添加事件
  - opacity 添加事件，可以触发事件
  - display，visibility 则不能触发事件
- 属性继承
  - display，opacity 是非继承属性，修改子孙节点无法显示
  - visiblelity 是继承属性，子孙节点消失由于继承 hideen，通过设置 visible可以让子孙节点显示

link与@import的区别

联系：都能导入样式表
区别：
- 兼容性：
  - link是XHTML标签，无兼容问题
  - import只在IE5以上才能识别
- 加载时机
  - 页面被加载的时，link会同时被加载
  - @import引用的CSS会等到页面被加载完再加载，过多嵌套，会出现 FOUC(文档样式短暂失效)
- 权重
  - link方式的样式的权重高于@import的权重

什么是FOUC?如何避免

用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁
解决办法：
- 把样式表放在文档的<head>

如何创建块级格式化上下文(block formatting context),BFC有什么用

链接
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

形成bfc的条件

浮动元素(float 除 none 之外)
定位元素(position(absolute/fixed))
overflow(hidden/auto/scroll)
display(inline-block, table-cell, table-caption)

BFC规则

创建BFC的元素，他的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，和它的子元素不进行外边距传递

应用

解决margin重叠的问题(添加独立的bfc)
解决浮动高度塌陷的问题(在父级添加 overflow:hidden)
解决元素被浮动元素覆盖

清除浮动的几种方式，各自的优缺点

定义高度
- 父级div定义 height
clear：both
- 结尾处加空标签或 ::after伪类 clear:both
bfc
- 常用 overflow：hidden

css不同选择器的权重(css层叠规则)

!important -> 无限大
行内样式 -> 1000
id ID选择器 -> 100
-> 10
- class 类选择器
- :hover 伪类选择器
- [name="a"] 属性选择器
-> 1
- tag 标签选择器
- ::after 伪类元素选择器
* 通配符选择器

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

标准(W3C)盒模型：元素宽度 = width
怪异(IE)盒模型：元素宽度 = width+ padding +border

box-sizing 的常用属性

box-sizing: content-box; 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; 触发怪异(IE)盒模型元素的效果，padding和border不会撑大盒子
box-sizing: inherit; 继承父元素 box-sizing 属性的值

display:inline-block 什么时候不会显示间隙？

移除空格，换行
使用 margin负值
font-size:0

几种常见的css布局

链接

重绘和回流（重排）是什么，如何避免？

重绘：当渲染树中的元素样式（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素的位置（如：尺寸、位置、隐藏/状态状态）发生改变时，产生回流
回流一定引起重绘，而重绘不一定引起回流
JS获取Layout(布局)属性值(如:offsetLeft,scrollTop等)，也会引起回流计算最新值

减少回流重绘

需要对元素进行复杂操作时，可以先隐藏(display:none)，操作完后再显示
脱离文档流(position:absoulute;transform)，浏览器的渲染线程，会优化处理，会减少回流重绘
批量修改元素样式：elem.className
创建多个DOM节点，使用 DocumentFragment 创建完一次性插入 document

水平垂直居中的方法

链接

使用 flex 布局或 grid 网格布局，设置为 align-item:center;justify-content:center
绝对定位设置top:0;right:0;bottom:0;left:0，
- 并设置 margin:auto
绝对定位中固定高度时top:50%;left:50%，
- margin-top值为高度一半的负值
- transform:translate(-50%, -50%)
文本垂直居中设置 line-height 为height值

1rem、1em、1vh、1px各自代表的含义？

1rem 根标签 html 标签的字体大小
1em 相对于父元素的字体大小
1vh 可视区域(视窗)的高度,100vh等于视窗高度
1px 一像素,一般电脑分辨率是1920 * 1024：即1920个像素 * 1024个像素，浏览器的默认字体高为16px

自定义字体的使用场景

宣传/品牌/banner等固定文案
字体图标

@font-face {
    font-family: "思源黑体";
    src: url("./fonts/SourceHanSansCN-Regular-2.ttf");
}

什么是外边距重叠？重叠的结果是什么？

在CSS当中，相邻的两个盒子的外边距可以结合成一个单独外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠计算规则

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

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE

响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式

@media screen and (min-width:400px) and (max-width:800px)

对于低版本的IE，可采用JS获取屏幕宽度，然后通过监听resize事件来实现兼容：

如何实现文件下载？

标签： <a href="logo.jpg" download="网站LOGO" >下载</a>
js实现：

const blob = new Blob([filestream], {type: 'application/vnd.ms-excel'});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 创建下载连接
a.href = href;
a.download = "压缩包.zip";
document.body.appendChild(a);
a.click();
document.body.removeChild(a); // 下载完移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后代

为什么要初始化CSS样式?

因为浏览器兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

用纯CSS创建一个三角形的原理

/* 把上、右、左、三条边隐藏掉（颜色设为 transparent） */
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

画一条 0.5px 的线

采用 meta viewport 的方式

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

采用 transform: scale()的方式