CSS边界

作者: 你这个锤子 | 来源:发表于2024-01-04 16:34 被阅读0次

CSS 盒子模型
web学习:02-CSS3边框与圆角
浅析常用属性
CSS3:边框与圆角
cssmargin合并+浮动
css3学习第一天
《vue》关于样式中“scoped”边界问题
前端知识复习（一）
CSS盒子模型与布局
禁止ios滑动回弹效果和安卓炫光效果

BFC 现象

两个div上下排列，都设置 margin 会怎样？
会发生边距重叠，margin 都大于0就取较大值，一正一负就相加，都负取较大绝对值
为什么会这样？就是由于 BFC。

BFC就是块级元素格式化上下文，相当于一个容器，里面的布局不会影响到外面的元素。IFC就是内联元素格式化上下文
BFC渲染规则或特性：

BFC元素垂直方向的边距会发生重叠，由 margin 决定
BFC的区域不会与浮动元素的区域重叠
BFC是一个独立的容器，子元素不会影响外面元素
计算BFC高度的时候，浮动元素也会参与计算

怎么创建BFC或触发BFC：

html 就是一个 BFC
float值不为none,也就是说设置了浮动即可
position的值为absolute或者fixed
display值为inline-block、table-cell、table-caption、flex、inline-flex
overflow为auto或hidden

BFC使用场景：

外边距重叠，如
父子元素都设置了margin-top
兄弟元素margin-bottom和margin-top会重叠
空元素设置了上下margin值不一样
这三种情况没有BFC的话，margin会重叠取margin较大的那个
左边定宽，右边自适应，只需要给右边创建BFC即可
BFC不会向左侧延伸
BFC可以阻止浮动元素的覆盖。
父元素没有设置高度，子元素浮动了，不参与父元素高度计算。当父元素没设置高度或高度为0，而子元素浮动了，就会导致父元素下面的兄弟元素向上顶，与浮动了的子元素重叠，只需给父元素创建BFC即可

清除浮动的几种方法

由于父元素没写高度时，子元素浮动后会导致父元素发生调试塌陷，所以需要清除浮动

给父级设置 overflow: hidden
给父级设置高度
父级也设置成浮动
浮动元素下添加空标签 div 并设置 CSS 样式:{ clear: both;height:0;overflow:hidden }
使用伪元素，如下

.clearfix::after {  
      content: "";  
      display: table;  
      clear: both;  
}

媒体查询

@media only screen and(max-width: 1480px){ ... }
使用 only 主要是为了兼容旧浏览器，而在现代浏览器中两者没有区别。

HTML使用标签定时自动刷新或跳转

<!-- 5秒后刷新并自动跳转到home.html -->
<meta http-equiv="Refresh" content="3; URL=home.html">
<!-- 5秒后自动刷新当前页面 -->
<meta http-equiv="Refresh" content="5">

使用场景：

实现PPT自动播放功能或者自动返回首页
做大屏幕监控的时候用这样的方法来自动刷新

缺点：刷新和跳转是不可取消的，如果需要动态刷新或者手动取消的，还是推荐定时器。

alt和title的作用及区别

共同点：有利于SEO
不同点：alt是图片不能正常显示时出现的提示信息；title是鼠标移到元素上时显示的提示信息，而且大多数标签都支持title属性，但是优先级要低于alt(都在图片上图片不能正常显示时)；title内容可以比alt更长

SEO（搜索引擎优化）

优化网站结构：合理规划网站结构，使得搜索引擎能够更好地理解网站内容。包括扁平化目录结构、清晰导航和面包屑导航等。
语义化书写HTML代码：使用符合语义化的标签，如h1、h2等，并合理使用alt属性，有助于搜索引擎理解网页内容。
优化图片：为图片添加alt属性，并使用描述性的标题和标签，有助于搜索引擎理解图片内容。
提高页面加载速度：通过优化图片、压缩CSS和JavaScript、利用CDN等方式，提高页面加载速度，提高用户体验和搜索引擎的抓取效率。
利用HTTP头部信息：合理设置HTTP头部信息，如Cache-Control、ETag等，可以告诉搜索引擎如何缓存页面，减少不必要的爬取。
避免常见的SEO陷阱：如避免使用JavaScript进行链接跳转、避免重复内容等，以免被搜索引擎惩罚。

link 和 @import

link：是html引入方式；最大限度支持并行下载；优先级高于 @import；可以通过 ref="alternate stylesheet" 指定候选样式
@import：是CSS引入方式，必须写在样式之前；可以嵌套，但过多嵌套会导致串行下载，出现文档样式暂失效；老浏览器不支持

利用标签提升渲染速度

link标签：通过rel属性进行预加载，如

<link rel="dns-prefetch" href="//xx.baidu.com">

rel有几个属性：

dns-prefetch：浏览器会对href中的域名进行DNS解析并缓存，当再次请求该域名资源时，能省去查询IP的过程，从而减少时间损耗
prefetch/preload：都是预先下载并缓存某个资源，不同的是prefetch可能会在浏览器忙时被忽略，而preload则一定会预先下载
preconnect：正式发送http请求前预先执行DNS解析、TCP握手、TLS协商。通过消除往返延迟来节省时间
prerender：浏览器不仅会加载资源，还会解析执行页面，并进行预渲染

script标签：由于浏览器底层运行机制，渲染引擎在解析HTML时遇到script标签引用文件是会暂停解析过程的，同时通过网络线程加载文件，文件加载后切换至js引擎执行相应代码，代码执行完成后再切换回渲染引擎继续渲染页面，在首次渲染过程中可能并不依赖这些js文件，这就延长了页面渲染的时间，为了减少这些时间损耗，可以通过script标签三个属性来实现：

async：立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后再阻塞渲染引擎并执行js先
defer：立即请求文件，但不阻塞渲染引擎，等解析完HTML再执行js
H5标准的type="module"：让浏览器按照ES6标准将文件当模板解析，默认阻塞效果和defer一样，也可以配合async在请求完成后立即执行

样式穿透

>>>、/deep/、:deep()、::v-deep都是深度选择器，或者说样式穿透，用于组件内修改UI组件库默认样式而不影响全局
区别： >>> 只作用于 CSS，在 Less/Sass 中无法识别，所以用 deep 代替，在 Vue3.0之前用 /deep/，Vue3.0之后可能会报错，所以推荐用 :deep(.class)，::v-deep 已弃用。