css知识点汇总

**

CSS重要知识点 (不定期更新)

**

1.display: none;visibility: hidden; 的区别:

联系:它们都能让元素不可⻅

区别:

  • display:none ;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden
    ;不会让元素从渲染树消失,渲染时元素继续占据空间,只是内容不可⻅
  • display: none ;是⾮继承属性,visibility: hidden; 是继承属性 修改常规流中元素的 display
    通常会造成⽂档重排。修改 visibility 属性只会造成本元素的重绘。

2.link 与 @import 的区别:

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

3.什么是FOUC?如何避免:[link]

浏览器渲染原理:浏览器一边解析 HTML,一边构建渲染树,构建一部分,就会把当前已有的元素渲染出来。

Flash Of Unstyled Content :指的是网页渲染时,外部样式还没加载好,就以浏览器默认样式短暂地展示了部分内容,等到外部样式加载完成,又恢复正常的这个页面闪烁的过程。

解决方法:

  • 将 JavaScript 资源尽量放到 <head> 中,只保留最后一个包含主逻辑的脚本在 <body> 中,因为它很可能要往 <body> 上挂载元素。这可以解决上面提到的 <script> 标签导致的多次渲染问题。
  • 第一次渲染,不论是 Vue、React 还是 VanillaJS,一定要同步放到主逻辑中,确保发生在 DCL 之前。
  • 避免对 DOM 进行不必要的读操作,因为他们会带来的额外的绘制。

4.什么是BFC?如何创建?BFC有什么用?[link]

BFC 即 Block Formatting Contexts (块级格式化上下文),它是一个独立的渲染区域,容器里面的元素不会在布局上影响到外面的元素。

创建规则:

  • body 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

作⽤:

  • 可以包含浮动元素(清除浮动)
  • 不被浮动元素覆盖
  • 阻⽌⽗⼦元素的 margin 折叠

5.为什么要清除浮动?清除浮动的几种方式:

本质:清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

清除浮动的几种方式:

  • ⽗级 div 定义 height
  • 结尾处加空 div 标签 clear:both(添加无意义标签,语义化差)
  • ⽗级 div 定义伪类 :after 和 zoom
  • ⽗级 div 定义 overflow:hidden (内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素)

6.为什么要初始化CSS样式? (消除浏览器默认边距)

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

当然,初始化样式会对 SEO 有⼀定的影响,但⻥和熊掌不可兼得,在⼒求影响最⼩的情况下初始化

7.CSS层叠优先级:

  • 优先级就近原则,同权重情况下样式定义最近者为准
  • 载⼊样式以最后载⼊的定位为准
  • 优先级为: !important > id > class > tag ; !important ⽐内联优先级⾼

8.什么是外边距重叠?重叠的结果是什么?

外边距重叠就是margin-collapse。在CSS当中,相邻的两个盒⼦(可能是兄弟关系也可能是祖先关系)的外边距折叠成⼀个单独的外边距。

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

9.px、em和rem的区别:

  • px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
  • em是相对于其父元素来设置字体大小的,一般都是以的“font-size”为基准。
  • rem是相对于根元素,只需要在根元素确定一个参考值。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值