文章目录盒模型css选择器及权重计算方式可以继承的属性display的属性值及作用隐藏元素的方式和区别伪类和伪元素的区别link和import区别translation和animation的区别对requestAnimationframe的理解为什么使用translate而不是定位?li 与 li 之间有看不见的空白间隔是什么原因引起的如何解决常见的图片格式及使用场景对 CSSSprites 精灵图、雪碧图的理解CSS 优化和提高性能的方法有哪些Sass、Less 是什么为什么要使用他们媒体查询mediaCSS3中的transform有哪些属性相对定位和绝对定位css布局单位两栏布局三栏布局九宫格布局flex布局Grid布局水平垂直居中清除浮动对BFC的理解如何创建BFC画一条0.5px的线设置小于12px的字两个绝对定位的元素是z-index大的在z-index小的前面嘛z-index属性在什么情况下会失效css硬件加速(GPU)写一个函数来检测浏览器可以设置的最小字体是多少(学到了)画一个宽度为父元素宽度一半的正方形打乱一个有序数组移动端H5的触摸事件都有哪些画一个0.5px的线事件css变量一键换色给图片模糊处理小图标css预处理器sass 、lesscss有什么样的缺点 为什么需要sassless什么是css预处理器有了这些功能sass可以SASS 是怎么编译成 CSS的过程。实现文本超出之后打点显示CSS后处理器怎么做样式隔离盒模型盒模型都是由margin border padding content 组成标准盒模型width是content的宽度IE盒模型width是content、padding和border的宽度之和改变盒模型的方法box-sizing : border-box 或 box-sizing : content-box(标准默认)css选择器及权重important修饰的权重最高行内元素 1000id选择器 100类、伪类、属性选择器 10标签选择器 1通配符、相邻、父子 0计算方式叠加就近原则出现样式冲突不重叠以最后书写的样式为准长江后浪推前浪可以继承的属性1字体相关font-size font-family2,文本 text-align text indent3,鼠标的形态 cursor4,列表的布局 list-styledisplay的属性值及作用none:让元素在文档流中移除block:块级元素独占一行可设置宽高有m,pline:行内元素同行显示默认为内容的宽高左右m,p可设置inline-block:行内块在一行显示默认为内容的宽高,宽高左右mp可设置list-item:指定为列表样式table:作为块级表格隐藏元素的方式和区别diaplay:none渲染树不会包含该渲染对象不会在页面中占据位置,不会响应绑定监听事件改变display会引起重排和重绘visibilty:hidden渲染树包含该元素在页面中占据空间只是内容不可见,改变visibilty只会引起重绘不会响应绑定的监听事件transform: scale(0,0)将元素缩放为 0来实现元素的隐藏。这种方法下元素仍在页面中占据位置但是不会响应绑定的监听事件。opacity :0 透明度设置为0 仍在页面中占据空间可以响应绑定监听事件伪类和伪元素的区别区别其实就是是否创建了新的元素伪类将一些效果放在特殊的选择器上 比如div:hover{} focus这些伪元素是创建了虚拟的容器并不存在再文档中 比如用伪元素来清除浮动link和import区别link是html标签除了可以引用css之外还可以链接一个外部的icon用于浏览器的栏目图标和收藏夹小图标而import是css范畴的只能用来引用csslink是在页面载入时同时载入而import是在页面加载完成之后才引入进来的link的样式可以用js控制DOM来改变而import不行translation和animation的区别translation 是过渡需要事件触发他只有一个开始帧和结束帧animation 是动画不需要事件来触发他可以设置多个关键帧来实现对requestAnimationframe的理解window.requestAnimationFrame() 是请求动画帧这个方法需要传递一个参数在下一次浏览器重绘之前调用该方法属于宏任务使用cancelAnimationFrame来取消执行动画优势CPU节能在使用setTimeOut和setInterval的时候虽然页面处于最小化它还是会计时但这是没有意义的。所以使用requestAnimationFrame会在页面不可见的情况下不执行也就对CPU起到了节能的作用为什么使用translate而不是定位?translate是transform的一个属性改变transform不会引起浏览器的重排和重绘而改变定位会引起重排重绘transform会使浏览器为元素创建一个GPU而改变定位会使用到CPU所以translate更高效使用translate元素会占据原来的位置改变定位不会li 与 li 之间有看不见的空白间隔是什么原因引起的如何解决因为浏览器会把内联元素之间的空白字符渲染成一个空格通常我们会将一个li标签放在一行就有了换行所以浏览器会把换行渲染成一个空格解决使用浮动将标签写在同一行但是代码不够美观ul调整字母间距letter-spacing:-8px,然后在li中设置为正常常见的图片格式及使用场景png 无损的会压缩图片的数据使图片有更小的体积jpeg 有损采用直接色图片颜色更丰富但是有损压缩会导致图片模糊gif 无损的支持动画适用于对色彩要求不高的的图片svg 是无损的矢量图放大不会失真所以经常用来存放logo,小图标对 CSSSprites 精灵图、雪碧图的理解精灵图就是把一个页面上用到的所有的图片汇总成一个大图然后通过各种背景操作来让背景处在一个合适的地方优点减少网络请求减少图片存储的大小缺点维护起来比较麻烦开发的时候也麻烦需要对图片进行有序的拼接等操作CSS 优化和提高性能的方法有哪些css压缩尽量减少页面重排、重绘。尽量少的去对标签进行选择而是用classSass、Less 是什么为什么要使用他们都是 CSS 预处理器是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言将 CSS 赋予了动态语言的特性结构清晰便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理 减少无意义的机械劳动。可以轻松实现多重继承。媒体查询media媒体查询可以根据页面不同的大小来改变相应的样式通常在响应式布局中常见CSS3中的transform有哪些属性旋转rotate、缩放scale和移动translate、扭曲skew、矩阵变形matrix相对定位和绝对定位relative相对定位元素仍处于文档流中定位是相对于原本自身的位置若没有设置宽度则宽度为父元素的宽度该元素的大小会影响父元素的大小。absolution绝对定位元素会脱离文档流定位是相对于离它最近的且不是static定位的父元素而言若该元素没有设置宽度则宽度由元素里面的内容决定且宽度不会影响父元素定位为absolution后原来的位置相当于是空的下面的的元素会来占据。css布局单位px像素css像素为开发者提供的一个抽象单位物理像素设备能显示的最小的单位% :相对于父级的百分比em和rem都是相对于字体的倍数em是相对于本身元素字体的倍数适用于做自己元素padding的设置rem是相对于根元素html的字体的倍数做全局布局尺寸vh vw与百分比相似vh相对于视口高度视口高度为100vhvw是相对于窗口的宽度,视口宽度为100vw两栏布局(左侧宽度固定(200px)右侧自适应宽度)使用float浮动左边的元素右边的元素margin-left:200px width:auto(宽度会撑满整个父元素)或者右侧使用overflow:hidden触发BFC这样就不会发生重叠利用flex布局左边宽度设置为200px,右边flex:1利用绝对定位父元素为相对定位子元素为绝对定位左边left:0,width:200px, 右边元素left:200,其余方向为0或者右侧margin-left:200px,width:auto三栏布局左右两栏宽度固定中间自适应的布局flex布局左右width:200px,中间flex:1绝对定位左固定右固定中间的设置对应的margin值float左浮动右浮动中间的设置对应的margin值(中间的元素要在左右两元素后面)grid布局直接display:grid; grid-template-columns:100px auto 200px;九宫格布局九宫格布局flex实现floatgrid 使用grid创建网格布局划分为3x3的等分布局tableflex布局flex弹性布局容器上的属性flex-direction:设置主轴的方向flex-wrap : 设置项目的排列方式是否换行flex-flow:是上面的两个属性的就简写形式justify-content:定义项目在主轴上的对齐方式align-item:项目在交叉轴上的对齐方式align-content:定义多根主轴的对齐方式项目上的属性order:定义项目的排列顺序order越小排列越前flex-grow:项目在分配剩余空间的比例flex-shrink:空间不足时的缩小比例dlex-besis:再分配空间前在主轴方向上的大小flex:是上面三个的缩写,默认0 1 auto。align-self:允许单个元素与其他不同的对齐方式Grid布局display: grid; 声明一个容器grid-template-columns: repeat(3,200px) 声明列的宽度,数字3表示的重复3次即有3列宽度为200pxgrid-template-rows: 100px 200px; 分别表示两行的高度column-gaprow-gapgap//grid-gap: 20px; 声明行间距和列间距grid-auto-flow:row //先行后列repeat的参数1auto-fill有时单元格的大小是固定的但是容器的大小不确定这个属性就会自动填充 grid-template-columns: repeat(auto-fill,100px);2auto表示由浏览器自己决定长度grid-template-columns: 100px auto 100px;.box{display:grid;height:600px;width:100%;grid-template-columns:repeat(3,1fr);//fr网格之间的比例grid-template-rows:repeat(3,1fr);}水平垂直居中给文字水平垂直居中单行text-align:center line-height等于单行文本行高已知宽高子绝父相top:50% left:50% margin-left:子元素宽度一半 margin-top子元素长度一半子绝父相top:0 left:0 right:0 bottom :0 margin:auto子绝父相 top: calc(50% - 子高度一半); left: calc(50% - 宽度一半);未知宽高子绝父相top:50% left:50% transform:translate(-50%,-50%)使用flex布局父元素display:flex justify-content:center align-items:center 来实现子元素的水平垂直居中清除浮动触发父元素的BFCoverflow:hidden给父元素的伪元素加上clear:both给浮动的元素后面加一个空的div,div上设置clearboth(clear属性是在block上才生效伪元素默认是内联元素所以清除浮动时为元素的diaplay:block)对BFC的理解如何创建BFCBFC Block Formatting Context 块级格式化上下文是一个独立的渲染区域里面的元素不受外界影响也不会影响外界BFC的特性属于同一个BFC的两个相邻容器的上下margin会重叠重点计算BFC高度时浮动元素也参于计算重点BFC的区域不会与浮动容器发生重叠重点触发BFCbody 根元素浮动元素float 除 none 以外的值对定位元素position (absolute、fixed)display 为 inline-block、table-cells、flexoverflow 除了 visible 以外的值 (hidden、auto、scroll)使用BFC解决问题解决margin重叠问题两个相邻的元素会有margin重叠的问题给两个元素触发BFCBFC的元素不会影响外界清除浮动解决高度坍塌问题避免浮动的元素遮住后面的元素给后面的元素触发BDFC即可可以用来实现两栏布局画一条0.5px的线使用transform:scale:(0.5,0.5)使用meta viewportmeta nameviewportcontentwidthdevice-width, initial-scale0.5, minimum-scale0.5, maximum-scale0.5/设置小于12px的字使用transform:scale来收缩使用图片如果是内容固定不变情况下使用将小于12px文字内容切出做图片这样不影响兼容也不影响美观。两个绝对定位的元素是z-index大的在z-index小的前面嘛z-index值只决定同一父元素中的同级子元素的堆叠顺序,要是不是同同一父级的情况得看父级的z-index的层叠关系子元素永远在父元素上面z-index属性在什么情况下会失效父元素position为relative时子元素的z-index失效。元素还设置了float属性这是要清除浮动css硬件加速(GPU)就是通过GPU进行渲染解放CPU。 在css中的animation,transform,translation不会自动开启GPU而是会使用浏览器的渲染引擎来实现如果开启GPU就会使渲染加速。可以通过设置3D效果就可以开启GPU了比如transform:translate3d(0),rotate3d(360deg)比如使用 translate3d() rotate3d() scale3d()这几个方法我们就可以使用加速了。但是呢某些情况下我们并不想要对元素应用变换的效果却还想要实现加速这是我们就可以使用简单的属性来“欺骗”浏览器了触发硬件加速。写一个函数来检测浏览器可以设置的最小字体是多少(学到了)constdiv1document.getElementsByClassName(div1)[0]constgetMinFontSize(el){letsize0;for(leti20;i0;i--){el.style.fontSizeipx;consttel.style.fontSize;if(sizet){returnsize}else{sizet}}}console.log(getMinFontSize(div1));画一个宽度为父元素宽度一半的正方形当padding的取值是百分比时他是相对于父元素的宽度。width: 50%;padding-bottom: 50%;打乱一个有序数组生成[min,n、max]的随机数Math.random()*(max-min1)minrandom生成的随机数是伪随机数即使用一套公式来得到随机数种子不同得到的随机数就不同function fn(arr) {return arr.sort(() Math.random() - 0.5)}function fn(arr) {var rd, tfor (let i 0; i arr.length; i) {rd parseInt(Math.random() * (arr.length - 1))t arr[i]arr[i] arr[rd]arr[rd] t}return arr}移动端H5的触摸事件都有哪些touchstart-touchmove-touchend画一个0.5px的线transfor:scale:(1,0.5)box-shadow:0,0.5,0,#000事件event.preventDefault() 取消默认事件event.stopPropagation() 取消冒泡event.cancelBulble()css变量一键换色先用:root声明:root {–blue: #1e90ff;–white: #ffffff;}用的时候用var()函数background-color: var(–white);全局的变量会被局部的样式覆盖掉这时可以在局部也设置变量button {–blue: #0000ff;background-color: var(–white);color: var(–blue);border: 1px solid var(–blue);padding: 5px;}给图片模糊处理filter: blur(10px)10px代表与10px融在一起数值越大越模糊小图标svg iconfont 精灵图 使用base64来编码图片base64编码图片体积会增大可以减少请求base64使用64位可打印的字符来表示二进制可以在HTTP传输中css预处理器sass 、lesscss有什么样的缺点 为什么需要sassless1语法不够强大无法嵌套书写开发中需要重复写很多遍选择器造成代码冗余2样式复用的规则不能mixin难以维护开发效率低什么是css预处理器其基本思想是用一种专门的编程语言为CSS增加了一些编程的特性将CSS作为目标生成文件然后开发者就只要使用这种语言进行编码工作。为css增加了一些编程的特性 函数变量控制语句导入嵌套 等功能有了这些功能sass可以提供变量实现一键切换主题色之类的功能用嵌套写法减少选择器的重复书写用混用功能mixin来解决代码复用问题用函数进行复杂的运算把样式代码模块化减少不同模块的代码间不必要的相互影响提高代码的安全性//mixin:mixinsquare{width:100px;height:100px;}// 应用 .user-avatar{includesquare;}SASS 是怎么编译成 CSS的过程。我们写好的 Sass 代码浏览器是不能识别的Sass 只不过是作为一个预处理工具只有将 Sass 代码编译成 CSS 代码后才能够使用。写好的scss/sass文件会在运行代码后直接编译为同名的css文件webpack: less-loader 、 scss-loaderSass 的编译方法有很多例如命令行编译模式比较简单可以直接在终端中输入 Sass 指令来编译本节我们主要讲命令行编译模式的使用。GUI工具编译有的比较多的看一工具有 Koala、CodeKit、Scout、Compass.app 等这些工具都需要安装。自动化编译可以使用 Grunt 或者 Gulp 来配置 Sass 自动化编译。实现文本超出之后打点显示单行文本溢出隐藏p{text-overflow:ellipsis;//必须white-space:nowrap;//必须overflow:hidden;//必须}上面代码中 text-overflow:定义文本溢出时如何处理有2个有效值 clip当内联内容溢出块容器时将溢出部分裁切掉。 ellipsis当内联内容溢出块容器时将溢出部分替换为...。多行p{overflow:hidden;//必须display:-webkit-box;//必须-webkit-line-clamp:2;//必须-webkit-box-orient:vertical;//必须}上面代码中-webkit-line-clamp设置文本最多显示行数。-webkit-box-orient不设置将不显示省略号...。CSS后处理器CSS后处理器是对CSS进行处理并最终生成CSS的预处理器它属于广义上的CSS预处理器。最典型的例子是CSS压缩工具如clean-css。后处理器例如PostCSS通常被视为在完成的样式表中根据CSS规范处理CSS让其更有效目前最常做的是给CSS属性添加浏览器私有前缀实现跨浏览器兼容性的问题。怎么做样式隔离微前端的概念自从火爆以来对于JS隔离和css的隔离成为了众多开发者的解决的主要方向命名空间 给每个不同模块使用的css规划好命名这样所有的css就都不会出现冲突这种方法虽然很好理解和简单但是编写起来很繁琐维护成本会很高。例如在组件的class上加前缀用scss变量来做css Modules 这其实跟命名空间有点类似vue应该就是使用类似的方法给选择器加上特殊的字符串达到css隔离的效果。vue scope给根节点加上data属性div />
