12 2021 档案
发表于 2021-12-29 09:03阅读：154评论：0推荐：0
摘要：行内非替换元素的注意点（padding、margin和border） 1.以下属性对行内非替换元素不生效 width和height； margin-top和margin-bottom（左右margin是可以正常生效的）； 2.以下属性对行内非替换元素的效果比较特殊 padding-top和paddi
阅读全文 »
发表于 2021-12-28 10:29阅读：212评论：0推荐：0
摘要：CSS中不同单位的对比 1.px px（Pixel，像素），相对长度单位，是相对于显示器屏幕分辨率而言的。 px没有什么特别的地方，设置多少px就显示多少px； 2.em em不同于px，它的值并不是固定不变的，不同情况下它设置的值是不一样的。 情况一：给元素文字大小设置em，并且父元素有设置字体大
阅读全文 »
发表于 2021-12-27 19:37阅读：330评论：0推荐：2
摘要：CSS实现水平垂直居中的方式有哪些？ 基本结构样式： .box { width: 400px; height: 400px; background-color: red; } .inner { width: 100px; height: 100px; background-color: blue;
阅读全文 »
发表于 2021-12-26 20:48阅读：453评论：0推荐：0
摘要：深入理解line-height和vertical-align 1.什么是行高（line-height）？ line-height用于设置文本的最小行高，可以简单理解为一行文字所占据的高度。但是行高的严格的定义是：两行文字基线（baseline）之间的距离。 那么什么是基线（baseline）呢？ 基
阅读全文 »
发表于 2021-12-25 16:37阅读：440评论：0推荐：0
摘要：Flex布局的详细总结 1.认识flex布局 flex布局（flexible布局，弹性布局），是目前web开发中使用的最多的布局方案。 两个重要概念： 开启flex布局的元素叫flex container； flex container里面的直接子元素叫做flex items； 设置display属
阅读全文 »
发表于 2021-12-24 17:49阅读：719评论：0推荐：1
摘要：float浮动的详细总结 1.定位方案 在css中，有4种常用的方法对元素进行定位和布局： normal flow：标准流、文档流； position：定位（relative、absolute、fixed）； float：浮动； flex：弹性布局； 其中浮动、定位的absolute和fixed都会
阅读全文 »
发表于 2021-12-23 16:36阅读：505评论：0推荐：0
摘要：Position定位详细总结 1.margin、padding定位 如果没有position，在标准流中，使用margin、padding对元素进行定位是比较常见的，其中margin还可以设置负数； 缺点：设置一个元素的margin或padding，通常会影响到标准流中其它元素的定位效果，不便于实现
阅读全文 »
发表于 2021-12-23 16:30阅读：619评论：0推荐：0
摘要：深入了解标准流以及脱标元素的特点 1.标准流（Normal Flow） 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流）进行排布的。 排布顺序：在浏览器中从左到右，从上到下顺序摆放； 默认情况下，元素互相之间不存在层叠现象； 2.什么情况下元素会脱标？ 脱离标准流（简
阅读全文 »
发表于 2021-12-22 21:46阅读：616评论：11推荐：0
摘要：CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递？ 块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。 示例代码：给inner盒子设置margin-top: 20px;。 .refer
阅读全文 »
发表于 2021-12-22 17:42阅读：647评论：0推荐：0
摘要：HTML行内级元素之间的空格问题 1.为什么元素之间会产生空格？ 在编写**行内级元素（包括inline-block元素）**的代码之间如果有空格（换行），在浏览器上就会显示元素之间有空格。 示例代码如下： .box span { background-color: red; } <div clas
阅读全文 »
发表于 2021-12-22 09:54阅读：295评论：0推荐：0
摘要：HTML元素类型总结 1.块级、行内级元素 根据元素的显示（能不能在同一行显示）类型，HTML元素可以分为块级和行内级两大类。 （1）块级元素（block-level elements）： 特点：独占父元素一行； 例如：div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、
阅读全文 »
发表于 2021-12-20 23:19阅读：508评论：0推荐：0
摘要：CSS的三大特性（继承、层叠和优先级） 1.css属性的继承 CSS中有些属性是可继承的，何为属性的继承？ 一个元素如果没有设置某些属性的值，就会跟随（继承）父元素的属性值。当然，一个元素如果有设置自己的属性值，就会使用自己的。 比如color、font-size等属性是可以继承的，怎样查看某些属性
阅读全文 »
发表于 2021-12-18 23:09阅读：753评论：0推荐：0
摘要：CSS选择器类型总结 1.通用选择器 一般用于给所有元素做一些通用性的样式设置，比如清除内边距、外边距等。但是效率比较低，尽量不要使用。 * { margin: 0; padding: 0; } 2.元素选择器 也叫做“标签选择器”，用于选中一类标签进行样式设置。 div { color: #ff0
阅读全文 »
发表于 2021-12-11 19:04阅读：18492评论：3推荐：5
摘要：JS数组去重的方式 例：将下面数组去除重复元素（以多种数据类型为例） const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN] 1.利用Set()+Array.from(
阅读全文 »
发表于 2021-12-03 22:01阅读：590评论：0推荐：2
摘要：数组扁平化的方式 什么是数组扁平化？ **数组扁平化：**指将一个多维数组转化为一个一维数组。 例：将下面数组扁平化处理。 const arr = [1, [2, 3, [4, 5]]] // > [ 1, 2, 3, 4, 5 ] 1.使用flat() flat() 方法是ES10提出的，它会按照
阅读全文 »
