![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 68
大超-无痕
不偷懒,不怕难,勤奋积极,勇往直前!
展开
-
CSS之重绘与回流
当需要对DOM进行大量修改时,最好的做法是使用DocumentFragment或者是clone一个元素,在副本上进行所有操作,然后再把它放回文档中。当元素的大小、位置、隐藏等改变时,浏览器需要重新计算元素的几何信息,并重新渲染页面,这个过程称为回流。当页面中元素样式的改变并不影响它在文档流中的位置时(例如改变颜色、阴影等),浏览器会进行重绘,即重新绘制元素的外观。这段代码改变了盒子的外观而没有改变它的布局,因此仅仅会导致重绘。为了减少回流,可以合并多次改变样式的操作,使用。原创 2024-02-18 12:15:01 · 647 阅读 · 0 评论 -
CSS之margin塌陷
CSS中的外边距塌陷(Margin Collapse)问题是指在垂直方向上,当两个或多个块级元素的边距相遇时,它们之间的距离不是它们各自边距的总和,而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。.ac和.bc有上下margin但是只生效了一个最大值。原创 2024-02-17 15:49:19 · 766 阅读 · 0 评论 -
CSS之BFC
BFC(Block Formatting Context)即块级格式化上下文,是Web页面的可视CSS渲染的一部分。它是一个独立的渲染区域,让其中的元素在布局上与外部的元素互不影响。简单来说,BFC提供了一个环境,允许内部的块级元素在垂直方向上一个接一个地放置,同时,BFC也会影响外部的布局特性,比如防止外边距折叠。给.parent设置overflow: hidden;如果不设置.parent为overflow: hidden;防止从属于同一个BFC的相邻块级盒模型外边距与外部块级盒模型外边距的折叠。原创 2024-02-15 21:07:42 · 758 阅读 · 0 评论 -
CSS之画常见的图形
polygon函数接收一系列的点来定义形状的边界。每对百分比值代表一个顶点的位置相对于元素本身的宽和高的百分比。该形状的顶点顺序是从正五边形的顶点开始,然后沿逆时针方向定义其余顶点。clip-path属性在不同的浏览器中的支持程度可能不同,特别是在一些老旧的浏览器版本中可能无法正常工作。宽高设置为0,border里其中一个方向设置为想要的颜色,其他的设置为完全透明的颜色。0 100%元素的左下角为变换的原点。原理同三角形,使用两个三角形拼接的。和画三角形差不多,不同的是设置宽高。同圆形,宽高值不一样。原创 2024-02-15 13:16:52 · 717 阅读 · 0 评论 -
CSS之选择器、优先级、继承
visibility:元素的可见性(注意:即使父元素设置为visibility: hidden,子元素依然可以通过设置visibility: visible来显示自己)。border:边框设置(包含border-width、border-style、border-color等)。display:元素的显示类型(例如block,inline,flex)。:用于定义元素获得焦点时(如通过tab键选中)的样式,常用于表单控件。:用于选中的单选按钮(radio)或复选框(checkbox)的样式。原创 2024-02-15 11:55:29 · 1534 阅读 · 0 评论 -
CSS之水平垂直居中
【代码】CSS之div水平垂直居中。原创 2024-02-13 17:36:15 · 853 阅读 · 0 评论 -
CSS之flex布局
</div>.item1 {.item2 {.item3 {.item4 {原创 2024-02-13 15:51:35 · 1579 阅读 · 0 评论 -
CSS之盒模型
在这个模型中,元素的总宽度等于左右margin + 左右border + 左右padding + width,总高度等同于上下margin + 上下border + 上下padding + height的和。:在这个模型中,宽度和高度不仅包括内容的尺寸,还包括内边距和边框。这意味着,元素的实际宽度等于width(内容宽度 + 左右内边距 + 左右边框),高度同理。设置为content-box时,元素宽度:100 + 10 *2 + 2 *2 = 124;设置为100就是100宽度。原创 2024-02-12 23:12:22 · 972 阅读 · 0 评论