scss八大特性
前言 众所周知css并不能算是一门真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言 就应运而生了。 sass是最早的css预处理语言，有比less更为...
CSS3新增了哪些新特性？
二、选择器 中新增了一些选择器，主要为如下图所示： <img width="740" height="445" src="../../ resources/e368cf20 9b5e 11eb 85f6 6fac77c0 d0230dc57a934e12b.png" class="jop noMdConv" 三、新样式 边框 新增了三个边框属性，分别是： border radius：创建圆角边框 box shadow：为元素添加阴影 b...
关于offsetTop的理解
1\. offsetTop ：元素到offsetParent顶部的距离 2\. offsetParent ：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。 3\. 注意：只有元素show（渲染完成）才会计算...
div居中方法
水平居中 1.行级元素 ：为该行级元素的父元素设置text align:center配合line height样式 2. 块级元素 ：为其自身设置 :auto样式 垂直居中 方法一： display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符. display:table cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>） 方法二： 利用f...
介绍一下 CSS 的盒子模型
1\. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border) 2\. 类型： IE 盒子模型、标准 W3C 盒子模型； 3\. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content) 4\. 而IE盒模型的宽高是指content+padding+border。 5.设置盒模型的方式是：设置box sizing box sizing:content box 标准盒模型 bo...
前端性能优化-CSS性能优化
一、内联首屏关键CSS 渲染的大概流程： 加载HTML资源 解析HTML 加载CSS资源，同时构建DOM树 解析CSS，同时渲染DOM树 当CSS文件过大，就会停留在第3步，网速慢时，打开网站的时候经常遇到没有样式的情况。 所以我们需要先加载部分CSS（首屏需要用到的CSS），其他优先级比较低的CSS就以异步的方式加载。 将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的...
CSS选择器有哪些
1、标签选择器 以标签名开头，选择所有div元素 2、类选择器 给标签取class名，以点（.）加class名开头，选择所有该class名的元素 3、id选择器 给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘wrap’”的元素 4、子选择器 以 隔开父子级元素，(模块名 模块名，修饰 前模块内的子模块) 5、包含选择器 以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块) 6、兄弟选择器 以 隔开兄弟...
什么是BFC ？如何创建 BFC ？BFC 有什么用
一、什么是BFC （Block Formatting Context）： BFC（块级格式化上下文）是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域指对块级元素起作用。 BFC可以让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局。 二、BFC 有什么用： 1）防止外边距重叠 BFC导致的属于同一个BFC中的子元素的margin重叠。(Box垂直方向的距离由margin决定...
CSS 中 position 有哪些值
position：允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 ：静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。 ：与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 如果不设置 top,right,bottom,left，则基本与stat...