- 博客(17)
- 收藏
- 关注
RSS订阅原创 margin的传递和折叠
margin的传递和折叠一、margin的上下传递(一般发生在父子元素之间)margin-top传递如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素为什么会产生传递呢？原因很简单：w3c的人设计的时候可能考虑到既然父子是近挨着的，子元素没必要设置外边距，给父元素设置更适合解决方案：1、给父元素设置overflow：auto，触发BFC2、给父元素设置padding-top、padding-bottom3、给父元素设
2022-05-26 16:53:06
687
原创 盒子模型-padding和margin的对比
盒子模型-padding和margin的对比一、如果要设置一个子元素在父元素的左上距离，如何设置第一种方式，给父元素添加padding设置前设置后通过上面可以发现给父元素设置padding，会使父元素变大，宽度就是padding+内容宽度解决方式设置box-sizing，后就盒子宽度就等于padding+内容宽度+border宽度<!DOCTYPE html><html lang="en"><head> <
2022-05-26 15:21:49
144
原创 CSS盒子模型
盒子模型一、认识盒子其实盒子在我们生活中随处可见由上面这个图可以看出一个盒子由内容的宽(width)高(height)、内边距(padding)、边框(border)、外边距(margin)组成二、HTML的每一个元素都是一个盒子其实，我们可以把html的每一个元素都可以看成是一个盒子三、盒子模型(Box Model)HTML的每一个元素都可以看作是一个盒子，可以具备以下4个属性内容（content）元素内容的width/height内边距（padding）
2022-05-26 11:08:10
111
原创 HTML元素的隐藏四种方法
HTML元素的隐藏四种方法一、方法一：display设置为none元素不显示，也不占据任何位置，不占据任何空间（和不存在一样）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
2022-05-18 11:07:00
12624
原创 HTML元素的特性有哪些呢
HTML元素的特性有哪些呢一、HTML的类型我们知道div是块级元素会独占一行，span元素是行内级元素会在同一行显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
2022-05-17 17:47:51
162
原创 css的特性-层叠性
css的特性-层叠性一、css的翻译是层叠样式表，那什么是层叠呢？对于一个元素来说，相同属性我们通过不同的选择器进行多次设置那么这些属性就会一层层的覆盖上去最终只有一个会生效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
2022-05-17 14:22:23
139
原创 css的特性-继承性
css的特性-继承性一、css的某些属性具有继承性(Inherited)：如果一个属性具有继承性，那在该元素设置之后，它的后代元素都可以继承这个属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
2022-05-16 14:46:12
331
原创 常见伪元素的使用before-after
常见伪元素的使用before-after一、为什么有些场景使用伪元素会更好呢？为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)常通过 content 属性来为一个元素添加修饰性的内容。假如我需要在一段文本之前添加一些文字，首先我们可能会想到的是在前面或者后面使用span元素添加<!DOCTYPE html><html lang="e
2022-05-16 11:15:58
518
原创 line-height属性的本质
line-height属性的本质一、line-height的简单理解line-height用于设置文本的行高MDN解释：行高可以简单理解为一行文字所占据的高度二、为什么文本需要行高？第一幅图是有行高的，第二幅图是行高比较小的，这样一对比就分享图一比图二更容易阅读，阅读感更好。三、深入理解行高（line-height）行高的严格定义：两行文字基线（baseline）之间的距离基线（baselin）：与小写字母x最底部的线例子：如设置
2022-05-14 17:13:01
354
原创 谈谈text-align的历史、本质、特性
text-align本质探究text-align：直接翻译过来就是设置文本的对齐方式MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐,不控制块元素自己的对齐，只控制它的行内内容的对齐。常用的值 left：左对齐 right：右对齐 center：正中间显示 justify：两端对齐W3C解释：W3C: 大概意思是这个属性只是对行内级元素起作用，对块级元素不起作用。代码演示：left值：<!DOC
2022-05-14 11:31:58
849
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人