qq_42424368-CSDN博客

原创 grid网格布局

一、是什么Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系这与之前讲到的flex一维布局不相同设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法<div class="container"> <div class="item item-1"> &l.

2022-03-16 10:23:05 700

原创 flexbox（弹性盒布局模型）,以及适用场景

一、是什么Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局采用Flex布局的元素，称为flex容器container它的所有子元素自动成为容器成员，称为flex项目item容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向每根轴都有起点和终点，这对于元素的对齐非常重要二、属性关于flex常用的属性，我们可以划分为容器属性和容器成员属性容器属性有：flex-direc.

2022-03-16 10:21:16 618

原创设备像素、css像素、设备独立像素、dpr、ppi 之间的区别

一、背景在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素这会造成一种错觉，我们会认为css中的像素就是设备的物理像素但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念二、介绍CSS像素CSS像素（css pixe.

2022-03-15 10:28:19 809

原创如果要做优化，CSS提高性能的方法有哪些？

如果要做优化，CSS提高性能的方法有哪些？一、前言每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验因此，在整个产品研发过程中，css性能优化同样需要贯穿全程二、实现方式实现方式有很多种，主要有如下：内联首屏关键CSS异步加载CSS资源压缩合理使用选择器减少使用昂贵的属性不要使用@import内联首屏关键CSS在打开一

2022-03-15 10:24:03 116

原创 CSS3新增了哪些新特性？

CSS3新增了哪些新特性？一、是什么css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3 里都是可以使用的而CSS3 也增加了很多新特性，为开发带来了更佳的开发体验二、选择器css3中新增了一些选择器，主要为如下图所示：三、新样式边框css3新增了三个边框属性，分别是：border-radius：创建圆角边框box-shadow：

2022-03-15 10:19:13 3396

原创元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

元素水平垂直居中的方法有哪些？如果元素不定宽高呢？一、背景在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类：居中元素（子元素）的宽高已知居中元素宽高未知二、实现方式实现元素水平垂直居中的方式：利用定位+margin:auto利用定位+margin:负值利用定位+transformtable布局flex布局

2022-03-14 13:41:42 225

原创盒子模型的理解

盒子模型的理解?一、是什么当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）一个盒子由四个部分组成：content、padding、border、margincontent，即实际内容，显示文本和图像boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负

2022-03-14 13:37:56 93

原创 BFC的理解

对BFC的理解？一、是什么我们在页面布局的时候，经常出现以下情况：这个元素高度怎么没了？这两栏布局怎么没法自适应？这两个元素的间距怎么有点奇怪的样子？…原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：内部的盒子会在垂直方向上一个接一个的放置对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。每个元素的左外

2022-03-14 11:45:21 100

原创 css3动画

面试官：css3动画有哪些？一、是什么CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合css实现动画的方式，有如下几种：transition 实现渐变动画transform 转变动画animation 实现自定义动画二、实现方式transition 实现渐变动画transition的属性如下：

2022-03-14 11:33:54 89

原创 js闭包的理解

什么是闭包？一个普通的函数，如果它可以访问外层作用域的自由变量，那么这个函数就是一个闭包；从广义的角度来说：javascript中的函数都是闭包；从狭义的角度来说：javascript中的一个函数，如果访问了外层作用域的变量，那么他是一个闭包。function createFnArray() {// 这个占据内存为102410244 字节// 大约4M// 在v8引擎中，小的数字为4byte （-2的31次方到2的31次方-1）// 大的数字为8bytevar arr = new

2022-02-28 19:53:29 248

原创 js常用的高阶函数

什么是高阶函数当一个函数接受另一个函数作为参数，或者返回一个函数时，此函数被称为高阶函数。函数和方法的区别函数function：独立的function，那么称之为是一个函数：如：function foo() {}方法method：当一个函数属于某一个对象时，我们称这个函数时这个对象的方法。var obj = { foo: function(){}}高阶函数filter：过滤filter返回一个新的数组，接收函数的返回值类型是Boolean类型

2022-02-28 19:46:39 116

原创事件总线的简单实现

自定义事件总线自定义事件总线属于一种观察者模式，其中包括三个角色：发布者（Publisher）：发出事件（Event）；订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）；事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的；class CWEventBus { constructor() { this.eventBus = {}; } // 监听方法 on(eventName, eventCallba

2022-02-28 19:44:54 388

原创手写深拷贝

function isObject(value) { const type = typeof value; return value !== null && (type === "function" || type === "object");}function deepClone(origin, map = new WeakMap()) { // 5.set 类型 if (origin instanceof Set) { return new Set([...

2022-02-28 19:43:30 63

原创简单深拷贝实现

对象相互赋值的一些关系，分别包括： 1.引入的赋值：指向同一个对象，相互之间会影响； 2.对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响； 3.对象的深拷贝：两个对象不再有任何关系，不会相互影响；利用JSON.parse() 和 JSON.stringify() 实现const s1 = Symbol()const s2 = Symbol()const obj = { name: "why", friend: { name: "kobe" }, f

2022-02-28 19:41:50 328

原创 javaScript代码，在浏览器中是如何被执行的？

当你在浏览器输入一个网址时，比如www.baidu.com,首先会dns解析，得到真实的ip地址，然后会向服务器发送请求，得到一个index.html ，解析这个文件，遇到link标签会下载css文件，遇到script标签会下载js文件。接下来就是渲染这些文件了。认识浏览器内核不同的浏览器有不同的内核组成Gecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；Trident: 微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；Web..

2022-02-28 19:35:23 1541 1

qq_42424368的博客