![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
虾十一
热爱前端,热爱生活, 记录一些随笔,欢迎前端的朋友.
展开
-
重排和重绘
重绘(repaint)指某元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。触发条件:1)重排;2)改变元素外观属性,如:color;重排(reflow)当渲染树中的某部分因为元素的规模尺寸,布局等改变而需要重新构建, 这就称为回流。触发条件:1、页面渲染初始化;2、添加或删除可见的DOM元素;3、元素位置的改变,或者使用动画;4、元素实际尺寸的改变;5、浏览器窗口尺寸的变化;6、填充内容的改变(文字或图片等)而引起的计算值宽度和高度的改变;原创 2022-03-25 16:58:20 · 171 阅读 · 0 评论 -
visibility 和 display 、 opacity的差别
display: none; 元素消失,脱离文档流。造成页面重排和重绘。子元素跟随父元素被隐藏,并且无法单独显示绑定的事件也无法触发。opacity: 0; 元素透明度为0;造成页面重绘不重排;子元素 opacity:1 无效,仍不显示;绑定的事件仍旧可以触发。visibility:hidden; 元素不可见;子元素设置 visibility:visible; 后,子元素显示;绑定的事件不能触发;共同点:DOM节点是存在的,仍旧可以用js 操作DOM。...原创 2022-03-22 14:04:17 · 534 阅读 · 0 评论 -
如何创建BFC
一、什么是BFC (Block Formatting Context):“块级格式化上下文”。BFC可以让元素成为隔离独立的容器且容器内的子元素不会影响到外面的布局二、如何创建BFC:1、(子)float:left/right。2、(子)position:absolute/fixed。3、(子)display:inline-block;3、(父)display:flex;4、(父)overflow:hidden/scroll/auto;三、可以干什么?1)解决兄弟和父子之间的margi原创 2022-03-11 14:29:51 · 2438 阅读 · 0 评论 -
css--盒子模型
盒子模型有什么用?在浏览器 渲染页面元素时,为了计算 元素的实际最终尺寸,会根据盒模型标准,将所有元素表示成一个个的矩形盒子,每个盒子包括4大区域。元素的盒子模型包括的4大区域: - content:内容的宽度、高度 - padding:内边距边界 - border:边框边界 - margin:外边距(margin 的尺寸不会被计算入最终容器宽度)W3C标准盒模型和IE盒模型的区别?区别在于box-sizing【元素的最终尺寸计算规则】默认值不同:1. 标准盒模型的box.原创 2022-03-07 14:41:28 · 207 阅读 · 0 评论 -
css--元素水平垂直居中的方法
css水平垂直居中原创 2022-03-03 17:53:15 · 111 阅读 · 0 评论 -
手把手教你用css画网格
用css 画网格原创 2022-02-24 21:46:06 · 2287 阅读 · 0 评论