随笔分类 - CSS相关
发表于 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-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-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
阅读全文 »
