文章目录
一.盒模型
了解盒模型的概念,包括内容区域、内边距、边框和外边距,并掌握如何通过 CSS 属性来调整盒模型的大小和样式。
两种盒模型以及区别
在CSS中,有两种盒模型:标准盒模型(content-box)和IE盒模型(border-box)。它们在计算元素的尺寸和布局时有一些差异。
- 标准盒模型(content-box):
- 总宽度 = 内容宽度(width) + 左右边框宽度(border) + 左右内边距(padding)
- 总高度 = 内容高度(height) + 上下边框高度(border) + 上下内边距(padding)
- 盒子尺寸不包括边框和内边距的部分
- 默认的盒模型
- IE盒模型(border-box):
- 总宽度 = 内容宽度(width),边框和内边距都包含在内
- 总高度 = 内容高度(height),边框和内边距都包含在内
- 盒子尺寸包括了边框和内边距的部分
- 在IE浏览器中的怪异盒模型,通过设置
box-sizing: border-box;
来使用
主要区别:
- 盒子尺寸计算方式不同:标准盒模型不包括边框和内边距在内,而IE盒模型包括边框和内边距在内。
- 盒子大小设置方式不同:在标准盒模型中,通过设置width和height来设置内容区域的尺寸,而在IE盒模型中,通过设置width和height来设置整个盒子的尺寸。
- 盒子模型的兼容性:标准盒模型是CSS规范定义的,而IE盒模型是IE浏览器独有的模型,在处理盒子尺寸时可能会导致兼容性问题。
更多可以参考:CSS盒模型详解
二.用 CSS 实现一个三角形
要用 CSS 实现一个三角形,可以借助 CSS 的边框和尺寸属性来创建一个没有内容区域的块元素,然后通过设置边框的颜色和宽度来形成三角形的样式。
示例:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
在这个示例中,
.triangle
是一个没有内容区域的块级元素。通过设置width: 0;
和height: 0;
,让元素没有实际的尺寸。
接下来,通过设置 border 属性来创建三角形的形状。border-left
和border-right
设置透明的边框,使两侧的边框不可见,border-bottom
设置实际的边框宽度和颜色,形成三角形的底边。
你可以根据需要调整 border 的宽度和颜色,以及元素的宽度和高度,来创建不同尺寸和样式的三角形。
三.比较 opacity: 0、visibility: hidden、display: none
opacity: 0;
,visibility: hidden;
和display: none;
是CSS中用于隐藏元素的常用属性。它们在实现隐藏效果上有一些区别:
opacity: 0;:
- 元素仍然占据页面布局空间,即保留了原始的盒模型大小和位置。
- 元素在视觉上完全透明,即不可见,但仍然可以交互(例如点击、悬停)。
- 子元素也会继承透明属性。
visibility: hidden;:
- 元素仍然占据页面布局空间,即保留了原始的盒模型大小和位置。
- 元素在视觉上不可见,但仍然会影响布局。
- 元素不可见,但仍然可以接收事件(例如点击、悬停)。
- 子元素也会继承隐藏属性。
display: none;:
- 元素不再占据页面布局空间,即不保留原始的盒模型大小和位置。
- 元素在视觉上完全不可见,不会影响布局。
- 元素不可见,也无法接收事件。
- 子元素也会被隐藏,不会继承该样式。
如果只是需要让元素在视觉上隐藏,但仍然保留布局空间和交互能力,可以使用
opacity: 0;
或visibility: hidden;
。
如果希望完全从页面布局中移除元素,并且不可见且不可交互,可以使用display: none;
。
需要根据具体的需求选择合适的隐藏方式。
四.flex 布局
- Flex布局(也称为弹性布局)是一种用于在容器中进行灵活的、自适应的元素布局的CSS模块。它提供了一组属性,用于定义容器和容器内的元素之间的关系,实现了更直观、简洁和灵活的布局方式。
- Flex布局的核心概念是容器和项目。容器是被设置为
display: flex;
或display: inline-flex;
的元素,它成为了一个Flex容器。容器内的直接子元素称为项目(flex items)。- 使用Flex布局可以简化复杂的布局需求,减少使用浮动、定位和清除浮动等传统布局方法的繁琐性。它适用于各种类型的布局,包括导航菜单、栅格系统、居中对齐、等高列布局等。
- 容器属性(Flex container properties):
display
: 设置为flex或inline-flex,用于创建一个Flex容器。flex-direction
: 定义主轴的方向(水平或垂直)。flex-wrap
: 定义项目是否换行。justify-content
: 定义项目在主轴上的对齐方式。align-items
: 定义项目在交叉轴上的对齐方式。align-content
: 定义多行项目在交叉轴上的对齐方式。
- 项目属性(Flex item properties):
- flex-grow: 定义项目的放大比例。
- flex-shrink: 定义项目的缩小比例。
- flex-basis: 定义项目在主轴上的初始大小。
- flex: 简写形式,包括flex-grow、flex-shrink和flex-basis。
- order: 定义项目的排列顺序。
- align-self: 定义单个项目在交叉轴上的对齐方式。
Flex布局的特点包括:
- 自适应:容器会根据可用空间自动调整项目的大小和位置。
灵活性:通过调整容器和项目的属性,可以实现各种布局需求。
响应式:可以通过媒体查询等技术在不同屏幕尺寸下改变布局。
五.BFC、IFC、GFC 和 FFC
BFC、IFC、GFC 和 FFC 是 CSS 中的布局概念,它们分别代表块级格式化上下文(BFC)、内联格式化上下文(IFC)、网格格式化上下文(GFC)和自适应格式化上下文(FFC)。这些概念帮助我们理解和控制元素在页面布局中的行为。
块级格式化上下文(BFC):
- BFC 是页面上的一个独立的渲染区域,具有一定的布局规则。
- BFC 中的元素在垂直方向上按照一定规则进行布局,不会重叠。
- BFC 中的元素可以包含浮动元素,并且不会被浮动元素覆盖。
- BFC 具有边界折叠特性,可以解决外边距合并的问题。
- 创建 BFC 的方法包括根元素、浮动元素、绝对定位元素、设置 overflow 为除了 visible 之外的值等。
内联格式化上下文(IFC):
- IFC 是一种内联元素的布局规则。
- IFC 中的元素在水平方向上按照一定规则进行布局,不会超出父容器。
- IFC 中的元素会垂直对齐,默认对齐基线(baseline)。
- IFC 中的元素可以通过设置 vertical-align 属性进行垂直对齐调整。
网格格式化上下文(GFC):
- GFC 是 CSS 网格布局的一种布局模型。
- GFC 可以通过使用 display: grid 和相关属性来创建网格布局。
- GFC 可以定义多行多列的网格布局,灵活控制元素在网格中的位置和尺寸。
- GFC 提供了强大的网格布局功能,适用于复杂的页面布局需求。
自适应格式化上下文(FFC):
- FFC 是一种自适应布局的概念。
- FFC 可以通过使用 display: flex 和相关属性来创建弹性布局。
- FFC 中的元素可以按照一定的比例和规则自动伸缩和布局。
- FFC 提供了简单而灵活的布局方式,适用于构建响应式和自适应的界面。
六.重绘与重排
在Web开发中,重排(reflow)和重绘(repaint)是浏览器进行页面布局和渲染的过程。它们的触发可以由多种操作引起,包括修改DOM、改变样式、改变窗口大小等。
如何触发重排和重绘
以下是一些常见的操作,可能会触发重排和重绘:
- 修改DOM结构:
- 添加、删除、替换DOM元素。
- 修改元素的文本内容。
- 改变元素样式:
- 修改元素的尺寸、位置、边距、填充等样式属性。
- 修改元素的背景色、字体颜色等样式属性。
- 修改元素的可见性。
- 通过display: none隐藏一个DOM节点-触发重排和重绘
- 通过visibility: hidden隐藏一个DOM节点-只触发重绘,因为没有几何变化
- 改变窗口大小:
- 当窗口大小改变时,页面的布局需要重新计算,可能导致重排和重绘。
- 操作表单元素:
- 输入框的输入、复选框的选中状态改变等。
如何尽量减少重排和重绘的次数
重排和重绘的开销是比较高的,尤其在大型页面或复杂布局下。因此,合理的优化策略和代码设计是提升性能的关键。
要尽量减少重排和重绘的次数,可以采取以下一些策略:
- 使用CSS3动画或过渡效果,利用GPU加速,避免频繁的重排和重绘。
- 避免使用不必要的复杂CSS选择器,选择器的匹配过程会耗费性能。
- 批量修改样式属性,可以使用
class
来一次性修改多个样式,而不是逐个修改。 - 避免频繁访问布局相关的属性,比如
offsetTop
、offsetLeft
等,会强制浏览器进行重排。 - 使用文档片段(DocumentFragment)进行DOM操作,然后一次性插入文档中,减少重排次数。
- 对于需要频繁修改的DOM元素,可以使用绝对定位(
position: absolute
)脱离文档流,避免对其他元素的影响。
重绘与重排的区别
重绘(Repaint)
是根据元素的样式属性重新绘制元素的外观,不涉及页面布局的改变。
重排(Reflow)
是指浏览器为了计算并确定元素的位置和大小而进行的布局过程,涉及到整个文档树的重新布局。
区别总结
重绘
是重新绘制元素的外观,不会改变布局,而重排
是重新计算并确定元素的位置和大小,会改变布局。重绘
的开销相对较小,因为只涉及像素的绘制,而重排
的开销较大,因为涉及到整个文档树的重新布局。重绘
通常发生在外观样式属性发生变化的情况下,而重排
通常发生在DOM结构变化或尺寸属性变化的情况下。
七.vw、vh 是什么
vw
和vh
是CSS3
中引入的相对单位,用于相对于视口(viewport)的宽度和高度进行尺寸的定义。
vw
表示视口宽度
的百分比,1vw
等于视口宽度
的1%
。vh
表示视口高度
的百分比,1vh
等于视口高度
的1%
。
这两个单位可以用于响应式设计,根据视口的大小来自适应地调整元素的尺寸。它们在移动设备上特别有用,可以根据不同的屏幕尺寸自动调整元素的大小和布局。例如,可以使用50vw表示元素的宽度为视口宽度的50%。
注意,
vw
和vh
单位的兼容性较好,但在某些旧版本
的浏览器中可能存在兼容性问题,需要进行兼容性处理
。
八.清除浮动的方法
清除浮动
是为了解决在父元素中包含浮动元素时
可能出现的高度塌陷
或布局错乱
的问题
-
万能清除法 ::after 伪元素清浮动(现在主流方法,推荐使用)
// 使用`空的clearfix`元素:可以在浮动元素后面添加一个空的div元素,并为其应用清除浮动的样式 .clearfix::after { content: ""; display: table; clear: both; }
-
给父级添加
overflow: hidden;
样式// 创建一个新的块级格式上下文,从而包含浮动元素。 .parent-element { overflow: hidden; }