css
关注
分享
扫一扫
DaftJayee
这个作者很懒，什么都没留下…
展开
-
前端性能优化：细说浏览器渲染的重排与重绘
https://juejin.im/post/6844903641816514573转载 2020-10-11 21:48:35 · 173 阅读 · 0 评论 -
[CSS]css3的translate会引起重排吗?
不会，因为 GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。绝对布局虽然转载 2020-10-11 21:45:12 · 1934 阅读 · 0 评论 -
[CSS]三种隐藏元素的方法display:none； visibility:hidden； opacity:0；的区别
它们都可以让元素隐藏掉，但是它们之间还是有区别的display:none;隐藏后不占空间而另外两个虽然隐藏了元素，但是还是占据着空间而transition对于display:none;和visibility:hidden;是无效的但是对于opacity:0;是有效的...原创 2020-09-19 16:32:10 · 551 阅读 · 0 评论 -
[CSS]BFC原理
一、BFC 概念BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素（外面也不会影响里面），并且 BFC 具有普通容器所没有的一些特性。二、触发BFC只要元素满足下面任一条件即可触发 BFC 特性：html元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed)display 为转载 2020-09-17 15:17:56 · 187 阅读 · 0 评论 -
[CSS]元素水平垂直居中方法
1）父元素设置display:flex; justify-content:center; align-items:center;2）元素position:absolute；left/top设为50%；margin-left/margin-top设为元素自身宽高一半的负值 或者 transform设为translate(-50%,-50%)ps.margin需要显示设置width和height3）自适应居中。元素position:absolute；left/right/top/bottom设为0；mar原创 2020-09-17 13:49:21 · 310 阅读 · 0 评论 -
[CSS]为什么有些行内元素可以设置宽高
在HTML的角度来讲，标签分为： 文本级标签：p （p是块级元素）, span , a , b , i , u , em 容器级标签：div , h标题系列 , li , dt ,dd p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。从CSS的角度讲，CSS的分类和上面的很像，就p不一样： 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。 块级元素：所有的容器级标签，都是块级元素，以及p标签。一般来说原创 2020-09-17 13:46:13 · 1262 阅读 · 0 评论 -
[CSS]dp和px的区别以及转换公式
dp是虚拟像素，在不同的像素密度的设备上会自动适配，比如：在320x480分辨率，像素密度为160，1dp=1px在480x800分辨率，像素密度为240，1dp=1.5px计算公式：1dp*像素密度/160 = 实际像素数px（像素）：屏幕上的点。...原创 2020-09-13 21:12:15 · 1779 阅读 · 0 评论 -
[CSS]哪些样式可以继承
不可继承的：baidisplay、dumargin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。所有zhi..原创 2020-08-26 17:07:59 · 2857 阅读 · 0 评论 -
[CSS][JavaScript]介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
介绍下重绘和回流（Repaint & Reflow），以及如何进行优化1.浏览器渲染机制浏览器采用流式布局模型（Flow Based Layout）浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外原创 2020-08-25 15:13:57 · 221 阅读 · 0 评论 -
[JavaScript]不属于按钮对象的属性的是
不属于按钮对象的属性的是A.status表示该对象的status属性B.value表示该对象的value属性C.form表示该对象的form属性D.type表示该对象的type属性E.name表示该对象的name属性答案与解析↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓答案：A...原创 2020-08-15 00:29:06 · 864 阅读 · 0 评论 -
[兼容性问题]常见浏览器内核，常见浏览器兼容性问题，原因及解决方法，hack技巧有哪些？
一、常见浏览器内核：内核名称：使用该内核的浏览器Trident:ie/360兼容模式/搜狗Geoko:火狐firefoxPresto:opera(后来改为Webkit又到了Blink内核)Webkit:谷歌(Webkit的分支Blink) safari 360极速模式(Blink)答题的时候如果记不住单词，可以写出四个类别分别代表的浏览器ie 火狐 opera 谷歌二、常见浏览器兼容性问题，原因及解决方法，hack技巧有哪些？面对浏览器诸多的兼容性问题，经常需要通过修改CSS样式来调试原创 2020-08-11 19:31:08 · 589 阅读 · 0 评论 -
[CSS]flex布局的应用场景----圣杯布局
左边固定右边两个自适应缩放一、效果二、代码<body> <div class="container"> <div class="left">左左左左左左</div> <div class="mid">中中中中中中</div> <div class="right">右右右右右右</div> </div></body>原创 2020-08-11 18:04:42 · 333 阅读 · 0 评论 -
[CSS]CSS3有哪些新增的伪类
要求能写出常用的几个就行了，不用全部写element:first-of-type: 父元素中第一个element元素element:last-of-type: 父元素中最后一个element元素element:only-of-type: 父元素中唯一一个element元素element: :nth-of-type(n): 父元素中第n个element类型的elementelement:nth-last-of-type(n): 父元素中倒数第n个element类型的elementele原创 2020-08-10 20:30:53 · 502 阅读 · 0 评论 -
[CSS]CSS选择符有哪些？CSS中哪些属性可以继承？优先级算法如何计算？
一、CSS选择符有哪些？id #class .标签 div p 相邻 ul+div子 ul>li后 ul li通配 *属性 a[href='xxx']伪类 a:after a:hover...二、CSS中哪些属性可以继承？答常见的color 、 font-size即可三、优先级算法如何计算？!important > 行内样式 > id> class > 元素和伪元素>通配选择器*选择原创 2020-08-10 19:36:17 · 726 阅读 · 0 评论 -
[CSS]画图解释一下CSS的盒子模型
原创 2020-08-10 19:14:31 · 614 阅读 · 0 评论 -
[CSS]闭合浮动（清除浮动）clearfix
一、为什么要闭合浮动（清除浮动）一个父元素中有三个子元素（分别为黑粉紫色）父元素有分别为红色和蓝色的上下边框当给子元素加入float:left后由上下边框可以看出此时父元素的高度坍塌标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。代码：<body> <div class="main"> <d原创 2020-08-10 18:03:56 · 274 阅读 · 0 评论 -
[CSS]双飞翼布局
题目要求：1.分为三个部分，左中右，先加载中间2.左右宽为200px，中间自适应答案源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2020-08-10 17:03:34 · 198 阅读 · 0 评论 -
[CSS]垂直水平居中
垂直水平居中两种实现方式：.box{ width:200px; height: 200px; background: red; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }.box{ width:200px; height: 200px; background: blue; position: absolute; top:0原创 2020-08-10 16:10:07 · 144 阅读 · 0 评论 -
CSS position属性基本应用场景
一、子元素相对于父元素做定位给父元素加position:relative给子元素加position:absolute二、垂直水平居中设定position: absolute;然后再调整定位和margin属性实现垂直水平居中，有以下两种方法1..box{ width:200px; height: 200px; background: red; position: absolute; left:50%; top:50%; margin-left:-100px; mar原创 2020-08-10 16:07:17 · 604 阅读 · 0 评论 -
reset.css(添加了html字体大小50px和a标签下划线清除)
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, o..原创 2020-08-01 18:27:43 · 347 阅读 · 0 评论 -
vue样式模块化和样式穿透(样式穿透一般用于在样式模块化(scoped)的情况下想要修改第三方组件)
style1》style模块化 （如果不做模块化，那么当在B组件中引入A组件时，A组件里的样式也会影响到B组件，所以要在styel标签加上scoped使其模块化） <style scoped>2》样式穿透scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。 格式：父元素 >>> 子元原创 2020-07-25 13:47:04 · 431 阅读 · 0 评论 -
[CSS]height:100%和rem存在的误差
一、当父元素height:3.2rem，子元素height:100%可以很明显的看到图片(子元素)下面有黄边(设置的父元素的背景颜色)父元素实际height:子元素实际height:二、当父元素height:3.2rem，子元素height:3.2rem可以看到子元素已经完全覆盖父元素背景颜色部分(下方没有黄边溢出)，但是下面依然留有白边(实际上父元素还是更大，也就是包括下面白色的部分）父元素实际height:子元素实际height:第一次父元素超过子元素3.2px第二次父元原创 2020-07-28 01:21:10 · 1672 阅读 · 0 评论 -
CSS3移动端插件(zepto,iscroll,swiper,echo)
简介：1.zepto.js（相当于手机端的jq库，轻量级，有些功能比如ajax，touch要引入额外的js(zepto官网有)）2.iscroll.js(滚动条)3.swiper.js&swiper.css(滑动)4.echo.js(懒加载)一、zepto（js库）jQuery.js ===>pczepto.js ===>移动端 (轻量级)相同点： api几乎差不多一样不同点： 1》事件不同 2》体积大小******注意:在移动端页面中使原创 2020-07-13 20:02:32 · 384 阅读 · 0 评论 -
CSS3响应式布局(@media)
一、@media 响应式布局（媒体查询）什么是响应式布局：一套代码实现多种设备访问一致性(pc、平板、手机)优点： 一直保持一个url，一套代码缺点： 浏览器支持程度 (ie8和以下就不兼容了)二、@media 使用语法格式： @media only screen and (max-width:700px){ } only : 可以排除不支持媒体查询的浏览器 screen ：设备类型 max-width ：设备特性 设备小于700像素.... @media on原创 2020-07-13 16:15:20 · 2135 阅读 · 0 评论 -
CSS3_自适应布局
一、什么是弹性盒布局（可伸缩的盒子）优势：1》写起来比较简单 2》灵活性、代码优雅缺点：1》不兼容ie和安卓低级版本二、使用容器 (父元素) display:flex : 让容器成员是弹性的项目 flex-direction : 决定主轴是什么方向(项目排序方向) row : 横向 column : 纵向 row-reverse :横向翻转 column-reverse ：纵向翻转 flex-wrap :原创 2020-07-13 15:27:20 · 597 阅读 · 0 评论 -
CSS3动画(transition和animation)
1>animation 使用格式： 关键帧 @keyframes 动画名称{ 0%{ } 30%{ }... 100%{ } } animation-name 规定需要绑定到选择器的 keyframe 名称。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。animation-delay 规定在动画开始之前的延迟。a原创 2020-07-13 14:13:48 · 354 阅读 · 0 评论 -
CSS3的变形处理(transform)
2d》 位移 translate(x,y) 定义 2D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 ****translate(100px,100px)缩放 scale(x,y) 定义 2D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 ****scale(2,2)旋转 rotate(angle原创 2020-07-12 22:30:35 · 189 阅读 · 0 评论 -
CSS3元素选择器
一、属性选择器css2： [属性] ===》选取有这个属性节点 [属性=值] ==》选取这个属性等于这个值的节点 [属性~=值] ==》选取这个属性包含这个值的 [属性|=值] ==》选取这个属性以这个值开头的css3： [属性^=值] ==>这个属性的值以什么开头的 [属性$=值] ==>这个属性的值以什么结尾的 [属性*=值] ==>这个属性含有这个值的二、伪类选择器 1》用户行为(动态) css2 a:link a:hover a原创 2020-07-11 15:13:51 · 428 阅读 · 0 评论