是因为给行级元素设置line-height是没有效果的，所以我们给span加上display:inline-block才能使line-height生效。 4.png 果然，成为内联元素生效了。...但是在内联盒中，有一个渲染规则，就是没个内联元素后面都会由一个空白节点，而且此空白节点拥有该元素的line-height和font-size属性。 strut空白节点 我们继续来看个例子 效果如下： 为什么图片下面会有缝隙呢？...大家记住，img标签不用设置line-block，img自身就是一个内联元素。 为了更直观的让大家看到这个空白节点，我在后面放一个span标签，让大家看看是如何产生这条缝隙的。...image.png 大家应该清楚是如何产生的吧，浏览器默认的line-height大概是1.32左右，加上默认的对齐方式都是基线对齐： vertical-align: baseline。
元素类型 HTML 的元素可以分为两种： 块级元素（block level element） 内联元素（inline element 有的人也叫它行内元素） 两者的区别在于以下三点： 块级元素会独占一行...---- HTML 代码是顺序执行的，一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列，遇到内联元素则从左到右排列。...position position 这个属性决定了元素将如何定位。它的值大概有以下五种： position 值 如何定位 static position的默认值。...元素将定位到它的正常位置（上文提到过），其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。...正在上传…重新上传取消图片来自网络 position 设置为 relative 的时候，元素依然在普通流中，位置是正常位置，你可以通过 left right 等移动元素。会影响其他元素的位置。
选择器的优先级 下面罗列的选择器，选择器的优先级是递增的： 1、类型选择器(例如：h1)和伪元素选择器(例如：::after) 2、类选择器(例如: .example)，属性选择器(例如：[type=...关于选择器是如何计算的，可以通过下面这张图来简单易懂的理解： ? image !important 的规则 !...important 覆盖内联样式 在团队协作中，有他人的代码使用了内联样式，而需要去覆盖的时候。或者在使用一些库或者框架的代码时，有一些样式写在了内联样式中。...这是内联样式的HTML代码: What color am I?...p { color: blue; } p.awesome { color: red; } 在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？
这里面我发现了一个很有趣的事儿，可替换元素，所以它们都是通过 value/src 之类的属性来控制内容显示，可能正是因为它们 无法添加后代元素（或者必须添加特定子元素） 的特性所以才不算是块容器盒的。...但是只有 inline 元素生成的盒才叫做内联盒，它区别于 inline-block 元素的内联级块盒。...行盒： 内联格式化上下文中，包含来自同一行的盒的矩形区域叫做行盒 可替换元素： 浏览器根据元素的标签和它的属性来决定元素的具体显示内容。...匿名块盒 我们来看看CSS会如何对待这段代码： html 我是span内的文字 我是p内的文字 我是没有任何标签包含的文字 大家好，...其实呢，多个内联元素在一起，匿名块盒会把相邻的内联盒“打包”，一起包裹起来。 匿名内联盒 任何被直接包含在一个块容器元素中（不在一个内联元素里面）的文本，必须视为一个匿名内联元素。
CSS 选择器 这一块可以说是很基础了，只有用选择器选中元素，才能使样式生效 元素选择器(标签选择器) 直接选中原生 html 标签名，该选择器可以说是优先级最低的了，在没有其它类型选择器时才会考虑它...div { width: 100px; height: 50px; } id选择器 选中标签定义的 id 名字，该选择器高于类选择器但是低于内联样式 #great { width...可以根据元素的状态来进行样式的改变 伪元素 :first-line 匹配元素的第一行 :first-letter 匹配元素的第一个字母 :before 在元素之前插入生成的内容...:after 在元素之后插入生成的内容 常见伪类 :first-child 父元素下第一个孩子 :link 未被点击的链接 :visited 已被点击的链接 :active 鼠标按在上面但是没有释放...n 个子元素 选择器优先级算法 众多类型的选择器方式，还可以组合使用，那么如何区分呢 优先级由 A，B，C，D 四个值确定，计算规则如下 存在内联样式，A = 1，否则 A = 0 B 的值等于
一、前言 CSS 选择器对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效的问题，这个就和选择器优先级相关了。....div1::after { content: 'div1 的 after'; margin-left: 10px; color: #ef4f4f } /* ::before 在选中元素的第一个位置添加一个子元素...一个选择器中只能使用一个伪元素 CSS3 中伪元素应该用双冒号，以便区分伪元素和伪类。但是旧版的规范未做明确区分，所以大多数浏览器中支持部分伪元素使用单双冒号两种写法。...四、CSS 选择器优先级 基本选择器的优先级是：!important > 内联 > ID 选择器 > 类选择器 > 标签选择器 > 通用选择器。那么它如何计算的呢？...https://www.html.cn/qa/css3/13447.html?fileGuid=YyjgWGpdPtQkxxYD 优先级是如何计算的？
浮动可以内联排列 浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。 ?...父元素高度坍塌 那怎么办呢？那就需要我们清除浮动，来解决高度坍塌问题！ 清除浮动主要有两种方式，分别是clear清除浮动和BFC清除浮动，其他的你也不用去了解了。 clear如何清除浮动？...不要在浮动元素上清除浮动 诶？给第三个元素加上clear:both之后，第三个元素的左右都没有挨着浮动元素，但是为什么高度还是坍塌了呢？...机智的你可能发现了，由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。 clear清除浮动最佳实践 那么clear清除浮动的最佳实践是什么呢？...浮动更适合实现自适应多列布局，比如左侧固定宽度，右侧根据父元素宽度自适应。 ? 页面布局 多个元素内联排列 如果前文提到的，浮动可以实现类似inline-block的排列，比如菜单多个元素内联排列。
不过，有没有办法不用SFC Playground，在本地单个HTML文件或者CodePen和JSBin这样的平台使用Vue-SFC呢？...办法是有的，我先放一个例子： 这是一个在CodePen中写的Vue组件 这是怎么做到的呢？ 其实要分成三个步骤。 第一步 嵌入SFC内容 首先是要在普通的HTML文件中内联嵌入Vue-SFC组件。...这里的麻烦之处在于，SFC中包含有HTML标签，而且还有标签，因此，将它放在页面中内联，浏览器就会解析这些标签。...那有同学就动脑筋想了，我们是否可以把SFC的内容放到一个不解析HTML内容的元素中，比如标签。...最终，实现的效果就是，我们可以以下面示例代码的样子来直接内联的方式在一个独立的HTML页面中很方便地书写Vue-SFC了： <noscript type="vue-sfc" component="MyComponent
元素类型 HTML 的元素可以分为两种： 块级元素（block level element） 内联元素（inline element 有的人也叫它行内元素） 两者的区别在于以下三点： 块级元素会独占一行...块级元素可以设置 width、height 属性，而内联元素设置无效。 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。...HTML 代码是顺序执行的，一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列，遇到内联元素则从左到右排列。...position position 这个属性决定了元素将如何定位。它的值大概有以下五种： position 值 如何定位 static position的默认值。...元素将定位到它的正常位置（上文提到过），其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。
③@import只有在IE5以上才能识别，link所有都可以 ④js控制dom修改样式只能使用link标签 ⑤@import可以在css中再次引入其它的样式表 ---- 8. css选择符（w3school...： .clearfix:after { content:""; display:inline-block; clear:both; } ⑽相邻兄弟选择符(只能选择两个相邻兄弟的第二个元素)： h1 +...、cursor ②内联元素可继承（14个）：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size...②表示层：由CSS负责创建，对“如何显示有关内容”的问题作出了解答。 ③行为层：javascript语言和DOM主宰的领域，负责回答“内容应如何对事件作出反应”。...:both } 优点：简单、代码少、浏览器支持好、不容易出现怪问题 缺点：如果页面浮动多，则需要增加很多空的div标签 ③父级div定义伪类：after和zoom ———————.div1: after
：鼠标指针浮动在上面的元素 伪元素选择器 有连续两个冒号(::)的选择器 ::before : 选择器在被选元素的内容前面插入内容 ::after : 选择器在被选元素的内容后面插入内容 关系选择器...≈ display:inline-inline ❝「块级盒子负责结构,内联盒子负责内容」 ❞ 内联元素 如何区分内联元素 从「定义」上：内联元素的内联特指外在盒子 从「表现」上：可以和文字在一行显示...根本原因就是：元素一旦成为「定位元素」，其z-index就会自动生效,其z-index就是默认的auto....，称为flex容器Container 它的所有子元素自动成为容器成员，称为flex项目Item 容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis 容器的属性 （6个）...浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。 当你获取布局信息的操作的时候，会「强制队列刷新」，例如offsetTop等方法都会返回最新的数据。
其实它是 CSS 中的核心特性之一，用于合并来自多个源的属性值的算法。比如说针对某个 HTML 标签，有许多的 CSS 声明都能作用到的时候，那最后谁应该起作用呢？层叠性说的大概就是这个。...； 如何脱离文档流呢？...所以如果让 2 个元素不在同一个 BFC 中即可阻止垂直 margin 合并。那如何让 2 个相邻的兄弟元素不在同一个 BFC 中呢？...，经过计算 html 的 font-size 会是 100px，这样有什么好处呢？...父元素高度一旦坍塌将对后面的元素布局造成影响，为了解决这个问题，所以需要清除浮动，让父元素恢复高度，那该如何做呢？ 这里介绍两种方法：通过 BFC 来清除、通过 clear 来清除。
3.如何让元素支持height:100%效果 知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box 方法如下： * 1.设置显示的高度值 *...常见的内联元素有：display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域：可以理解为文本选中的背景色区域(重点) 内联盒子：内联标签或者纯文本...行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子 包含盒子：由行框盒子组成的盒子 幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。...2.对于img元素，如果有css尺寸，则最终尺寸由css尺寸决定(css尺寸 > html尺寸 > 固有尺寸) 3.当图片的src属性缺省时，图片不会有任何请求，是最高效的实现方式，如下展示的是使用此方式的图片占位代码...: 1em; } 3.padding的实际应用（具体实现可自行思考） 1.增加链接或按钮的点击区域的大小 2.利用内联元素的padding实现高度可控的分割线 3.用内联元素实现瞄点定位距离 4.利用padding
3.如何让元素支持height:100%效果 知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box 方法如下： * 1.设置显示的高度值 *...常见的内联元素有：display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域：可以理解为文本选中的背景色区域(重点) 内联盒子：内联标签或者纯文本...行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子 包含盒子：由行框盒子组成的盒子 幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。...2.对于img元素，如果有css尺寸，则最终尺寸由css尺寸决定(css尺寸 > html尺寸 > 固有尺寸) 3.当图片的src属性缺省时，图片不会有任何请求，是最高效的实现方式，如下展示的是使用此方式的图片占位代码...内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的vertical-align来调整对齐的 复制代码 七.BFC–块级格式化上下文 表现: 元素内部的布局变化不会影响外部的元素.所以不会出现
伪类：以冒号为前缀，被添加到一个选择器末尾的关键字，样式在特定状态下才被呈现到指定的元素 CSS 2.1 E:first-child 匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接...匹配 E 元素的第一个字母 E:before 在 E 元素之前插入生成的内容 E:after 在 E 元素之后插入生成的内容 # display 有哪些值 值 说明 block 块类型。...内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...如何产生 根元素（HTML） z-index 值不为 'auto' 的 绝对/相对 定位 一个 z-index 值不为 'auto' 的 flex item，即父元素 display: flex |...，并有一套渲染规则，决定其子元素将如何定位，以及和其他元素的关系和相互作用 即，它是一块独立的区域，让处于 BFC 内的元素与外部元素相互隔离 如何形成 根元素 position：fixed/absolute
目前最常见的开关是这种圆形风格的：（若干年后就不一定了） 网上也有很多用CSS和HTML实现的例子，但都不完美，因为往往需要多个html元素配合才能实现这种开关，如何用一个最传统的元素实现呢？...最近终于找到了方法：使用CSS的伪元素 :before 和 :after 来作为额外的元素，用纯CSS实现一个最简洁又好看、一个元素搞定的开关。...，总共逻辑上有３个元素，分别是开关的底座、把柄、文字。...： 引入这个行内联元素只需要一个html元素即可，语义性很好同时能利用自身的checked属性： <input type="checkbox" onchange="alert(this.checked
词法分析（标记化） HTML 结构不算太复杂，大部分情况下识别的标记会有开始标记、内容标记和结束标记，对应一个 HTML 元素。...（二） —— HTML语言的语法解析 50 行代码的 HTML 编译器 AST解析基础: 如何写一个简单的html语法分析库 WebKit中的HTML词法分析 HTML文档解析和DOM树的构建 从Chrome...为什么需要阻塞 JavaScript 的运行呢？...为什么需要从右向左匹配呢？...内联样式优先级 authorStyleSheet 的 Rule 处理完毕，才会设置内联样式；内联样式在构建 DOM Tree 的时候就已经处理完成并存放到节点的 style 属性上了。
两种语言都有不同的用途随着浏览器版本特性和属性的增加，CSS正成为一种功能强大的语言，能够处理我们以前依赖JavaScript实现的功能。...[屏幕录制2021-07-17 下午10.38.14.gif] 完整代码 表单验证 html5 丰富了表单元素，提供了类似 required , email , tel 等表单元素属性。...-07-18 上午9.15.50.gif] 利用 CSS 的 content 属性 attr 抓取资料 想必大家都想到了伪元素 after ，但是文字怎么获得呢，又不能用 JavaScript 。...，例如导航的菜单： [image.png] 一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素，才方便用css控制，例如上面的菜单，是把menu当作导航的一个相邻元素： 的代码就不管用了，因为内联样式的优先级会高于外链的。
.clear:after { content: ''; display: table; /* block,list-item */ clear: both; } 内联元素 图片和文字就是典型的内联元素...>helloworld 包含块：如上述标签 幽灵空白节点：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”，同时具有该元素的字体和行高属性的...: contain 保持比例，尽可能利用HTML尺寸 如果将img的src去掉，其和普通的内联元素一样，且不会发送请求 使用content属性，可以让普通元素变为替换元素...margin与元素的内部尺寸 只有元素是“充分利用可用空间”时，margin才可以改变元素的可视尺寸。...即，设置了clear属性的元素自身如何如何，而不是让float元素如何如何。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
