css
Yasuo Man
这个作者很懒,什么都没留下…
展开
-
浏览器的重绘与重排
重排:部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算,表现为重新生成布局,重新排列元素 重绘:由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色之后,屏幕上部分内容需要更新,表现为某些元素的外观被改变 单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后,会重新绘制受到此次重排影响的部分 重排和重绘代价是高昂的,他们会破坏用户体验,并且让UI展示非常迟缓,而相比之下重排的性能影响更大,在两者无法避免的情况下,一般我们都会选择代价最小的重绘 重绘不一定.原创 2021-09-06 14:30:41 · 177 阅读 · 0 评论 -
CSS有几种定位方式
static:正常文档流定位,此时top、right、bottom、left和z-index属性无效,块级元素从上往下纵向排布。 relative:相对定位,此时的“相对”是相对于正常文档流的位置。 absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置。 fixed:指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变,比如那种回到顶部的按钮一般都是用此定位方式。 sticky:粘性定位,特性近似于relative和fixed的合体,其在.原创 2021-03-04 11:03:09 · 152 阅读 · 1 评论 -
块级元素水平居中
margin:0 auto方法 .center { height:200px; width: 200px; margin:0 auto; border: 1px solid red } <div class="center">水平居中</div> flex布局,目前主流方法 .center { display: flex; justify-content: center; } <div class="center"> <div class="flex原创 2021-03-04 10:22:53 · 189 阅读 · 1 评论 -
em\px\rem区别
em\px\rem区别 px:绝对单位,页面按精确像素展示 em:相对单位,基于父节点的字体大小,如果自身定义了font-size按照自身的来计算(浏览器默认是16px),整个页面内1em不是一个固定的值 rem:相对单位,可理解为"root em",相对于html节点的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持 ...原创 2021-03-04 09:49:25 · 108 阅读 · 1 评论 -
css引入方式link和@import的区别
css引入方式link和@import的区别 link属于XHTML标签,而@import是CSS提供的 页面加载时,link会同时加载,而@import引用的css会在页面加载完之后再加载 import只在IE5以上才能识别,而link是XHTML标签,无兼容问题 link方式的样式权重高于@import的权重 使用dom控制样式时的差别。当使用js去操控dom的时候只能是link引入的css样式,而@import引入的css不是dom可以操控的 ...原创 2021-03-03 09:49:28 · 122 阅读 · 0 评论 -
css选择器的优先级是怎样的
css选择器的优先级是怎样的 css选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层面,优先级是A、B、C、D的值来决定的,其中它们的值计算规则如下: A 的值等于1的前提是存在 内联样式,否则A = 0 B 的值等于 ID选择器 出现的次数; C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数 D 的值等于 标签选择器 和 伪元素 出现的总次数 就比如下面的选择器,它不存在内联样式,所以A = 0,不存在ID选择器B = 0,存在一个类原创 2021-02-25 11:52:13 · 476 阅读 · 0 评论