前言 我们经常使用CSS，但是却不怎么了解CSS，本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结，从本文中，你将了解到以下内容： vertical-align...内联元素垂直居中对齐 开发中会遇到用字幕x代替关闭icon，用...显示溢出或者加载中。但是会发现字母x、省略号并没有与文本垂直方向居中对齐，这是因为文本默认是基线对齐，x、省略号默认底部在基线处。...利用BFC的特性，我们可以实现以下功能： 清除浮动 防止垂直方向margin合并 实现多栏弹性布局 BFC的生效条件 以下CSS属性会触发元素生成BFC结界: 根元素（） 浮动元素（元素的...这是因为在高度计算过程中，元素的内部尺寸优先级大于外部尺寸，width/height影响的是元素内部尺寸，绝对定位影响的是外部尺寸，当元素绝对定位四个方向都设置值，此时外部尺寸会被内部尺寸覆盖，导致实际元素宽度是...上述demo，box-item之所以能够垂直居中，得益于top/bottom设置了值，使元素产生高度100%的外部尺寸，而width/height固定元素的内部尺寸，使得 外部尺寸高度-内部尺寸高度=元素剩余可用空间高度
CSS样式表的插入方法有四种： 内联样式表，即写在标签内部，慎用； 内部样式表，使用标签在HTML的head内定义样式表，用于文档内的特殊样式； 外部样式表，使用<link rel=""...（利用优先级来过滤） 优先级-- 内联样式表>内部样式表>外部样式表>浏览器默认设置 同级中的由高到低（含有!...:nth-last-child(n)--同上，从最后一个子元素开始计数。...:nth-last-of-type(n)---同上，但是从最后一个子元素开始计数。...另外，:hover还可以用于选中所有的其它标签，比如div：hover，当鼠标悬停到div区域上时，会产生一个效果，可以用来设置动画。
将样式内容定义在网页的 中 3、外部样式表 将样式内容定义在外部的 CSS 文件中(***.css) 在HTML页面中引入 ***...>静夜思 设置 div 的文本颜色为 红色(red)，背景颜色为 黄色(yellow)，文字大小为 24px 2、内部样式表 将样式内容定义在...、层叠性 允许为一个元素定义多个样式规则，如果样式规则中的样式属性不冲突的时候，他们则都可以被应用到元素上 3、优先级 在层叠性基础上，如果样式属性声明冲突时，会按照不同使用方式的优先级来应用样式...低 ：浏览器默认设置 中 ：内部样式表 和 外部样式表 就近原则 - 后定义者优先 高 ：内联样式 4、!...1、什么是溢出 使用尺寸属性设置元素大小时，如果内容所需要的空间大于元素空间大小时，则会产生溢出的效果 2、溢出处理属性
普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略 white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow...从流程我们可以看出来: DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。...通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...border box）的左边相接触（从右向左的格式的话，则相反），即使存在浮动 浮动盒的区域不会和 BFC 重叠 计算 BFC 的高度时，浮动元素也会参与计算 应用 自适应两列布局 防止外边距（margin...所以如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。
我们常用的div、h、p等标签都属于块级元素 可以看到，对于一个普通的div标签而言，其内部元素是可以超出其限定高度进行显示，有与外界内容重叠的情况 ``` 就上述代码而言可以看到#content中的内容会跟div2中的内容重叠，同时也可以看到div2是直接换行，紧贴着其父元素的左侧往下排列，这就是普通文档流的排列规则...当然如果上面的代码没有写word-wrap属性，文本内容会向右延伸，超出其边界。...用通俗的话来讲，BFC就是一个容器，这个容器内存放任何内容都不会影响到外部容器。当然，他并不是像我们说的标签的那种，而是一种特征，具备了某些属性，就不会影响到外部标签的属性。...这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。)、防止margin重叠等场景
从名字中可以看到一些当初设计的初衷。 找出问题是关键 问自己三个问题： 第一 浮动会造成什么影响？ 第二，如何解决这些因为浮动而造成的影响？ 第三，bfc原理？...解决外部矛盾 触发 bfc 第一个是触发bfc，为什么呢，因为触发bfc后，高度会包括浮动元素的高度。...不出意外，从上图可以看到，外部矛盾被解决了。这只是开始，大家眼睛盯好，继续看下面截图： ---- ? 从图中标注可以看出，为什么伪元素要设置display:block，继续看下一个截图。...所以这个子容器不能有高度和内容，不然会影响父元素的布局。 写到这，外部矛盾的解决方式和各自的原理已经说的很清楚了。那么内部矛盾怎么解决呢？...给内部元素设置clear:both;清除浮动后，会直接解决内部矛盾和外部矛盾。
从上面的代码来看，可以看到里面的四个div都有margin-top和margin-bottom，所以两个div加起来按照道理应该是40px，但是由于外边距的这个特性，margin-top会和margin-bottom...margin-top 塌陷 在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下： 1、外部盒子设置一个边框 2、外部盒子设置...按照道理，给内部的绿色div设置一个与外部div顶部的margin-top为76px，那么绿色 的div应该就会移动下来的了。 给绿色的div设置margin-top为76px ?...可以用上面介绍的三种方法： 1、外部盒子设置一个边框 2、外部盒子设置 overflow:hidden 3、使用伪元素类： .clearfix:before{ content: '';...这种方法挺好的，但是缺点就是 overflow:hidden 是本来用来遮掩溢出的元素的。用来修复这个bug的确不合适。 下面来看看另一种方法。 使用伪元素类，其实就是相当于创建一个外边框 ?
我想像它是一个盒子，它可以防止里面的东西溢出，同时又允许它外面的东西进入，就像一个半透水的盒子。但是溢出到哪里呢？...考虑到每个函数可以在其中包含许多其他函数，因此闭包是函数使用其外部信息的能力，同时保持其内部的信息不会“泄漏”或由外部函数使用。...状态是盒子中一个特殊的、独立的部分；prop 是从外面来的 状态遵循一个简单的规则：只要被更改，状态就会重新渲染组件及其子级。...在每个渲染中，都会创建组件内部的所有内容，包括变量和函数，这就是为什么我们可以使用变量来存储计算结果的原因，因为它们将在每个渲染中重新计算。...这就是为什么盒子是“回收重利用的”而不是每次都创建全新的。在内部 React 会跟踪每个盒子并确保其状态始终保持一致。这就是 React 怎样知道何时去更新组件的方式。 ?
CSS 1.1 CSS 编写的位置 使用CSS来修改元素的样式 第一种方式：内联样式/行内样式 第二种方式：内部样式表 第三种方式：外部样式表(最佳实践) 1.1.1 内联样式 在标签内部通过...样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件，外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用，...width：设置内容区的宽度 height：设置内容区的高度 边框 边框(border)： 边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小...所以我们经常利用这个特点来使一个元素 在其父元素中水平居中 元素的垂直方向布局 子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出 使用overflow...（可以-x或-y） 属性来设置父元素如何处理溢出的子元素 可选值: visible：默认值子元素会从父元素中溢出，在父元素外部的位置显示 hidden：溢出内容将会被裁剪不会显示
疑问 为什么会margin边距重叠？...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？...为什么display:table也能清除浮动，原理是什么？...它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。...BFC布局规则： 1、内部的Box会在垂直方向，按照从上到下的方式逐个排列。 2、Box垂直方向的距离由margin决定。
在初学阶段，我们会很自然的认为，当我们使用 useState 在函数内部定义了一个状态时，那么这个状态一定是保存在这个函数内部的 function Demo() { const [count, setCount...函数组件中的所有的 hook 都是从外部传入的 2、state 其实是参数 我们再来看一下这个公式。...UI = f(state) 这个时候我们会恍然发现，虽然 state 在函数内部定义/获取了，但是很明显，React 是期望大家把他当成外部传入的参数来理解的。...当然是因为参数太多了写不下了呀，因此 React 把传参的行为，下放到了函数内部，通过 hook 的方式来实现 3、重新审视 hook 如果 state 是外部传入的参数，那么此时我们就要重新审视一下为什么不能把...当我们调用 setState 时，表示入参正在发生变化，函数自然也会重新执行。 4、总结 hook 存放在函数外部，因此不属于函数内部的状态。
但是，很多人对这个属性是存在着一定的误解的，网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。...overflow:hidden并不隐藏所有溢出的子元素 对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁...事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，具体来说，需要同时满足以下条件： 拥有overflow:hidden样式的块元素不具有position:relative...和position:absolute样式； 内部溢出的元素是通过position:absolute绝对定位； 如果你只关心结论，那么记住这两点就够了。...这样万一某一天你看到overflow:hidden里面的东东居然被显示出来了，你才知道是为什么。
如果不使用v-if，那么如果没有插槽，就会得到一个空的不必要的div。根据div的样式，这可能会打乱我们的布局，让界面看起来很奇怪。 那么，为什么我们希望能够有条件地渲染插槽呢？...这通常是为了自动处理边缘情况，否则处理起来会很烦人。 一个 Popup 或 Tooltip 应该重新定位，以便它不会溢出页面。...检测元素外部(或内部)的单击 有时我需要检测一个点击是发生在一个特定元素el的内部还是外部。这就是我通常使用的方法。.../LiveUsersWidget.vue'; const { columns } = LiveUsersWidget; 我们也可以通过特殊的$options属性从组件内部访问元数据。...从组件外部调用一个方法 我们可以从一个组件的外部通过给它一个 ref 用来调用一个方法。 <!
主讲：hector 示例： 2、CSS应用方式 也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式 2.1 内部样式 也称为内嵌样式...-- 需求：修饰div内部的p标签 --> div内部的p标签 div内部的h3标签 ...div内部的h3内部的p标签 div内部的p div内部的h3 <p class="ddd...3.2 内<em>外部</em>样式加载顺 就近原则 原因：按照书写顺序依次加载，在同优先级的前提下，后加载的<em>会</em>覆盖先加载的同名样式，所以离的越近 越优先 3.3 !
❞ 闭包的特性 ❝ 函数嵌套函数 函数内部可以引用外部的参数和变量 参数和变量不会被垃圾回收机制回收 ❞ 闭包的优缺点 ❝优点： ❝可以设计私有的方法和变量 ❞ 「缺点」 ❝常驻内存，会增大内存使用量，...❞ 函数作用域 ❝函数作用域：在函数内部可以访问到函数外部变量，而在函数外部的变量不可以访问函数内部的变量。 为什么呢？...现在无论点击哪个 div ,它 弹出的 都是 4 。 为什么呢？ 「因为 div 点击事件 是被 异步触发的，当事件被触发的时候，循环已经执行完，此时的 i 的 变量值 为 4。」...前面也说到了，当函数执行完，局部变量也跟着销毁了，那为什么会 输出 2 呢 ？...闭包会在父函数外部，改变父函数内部变量的值。
闭包的特性 函数嵌套函数 函数内部可以引用外部的参数和变量 参数和变量不会被垃圾回收机制回收 闭包的优缺点 优点： 可以设计私有的方法和变量 缺点 常驻内存，会增大内存使用量，使用不当很容易造成内存泄露...函数作用域 函数作用域： 在函数内部可以访问到函数外部变量，而在函数外部的变量不可以访问函数内部的变量。 为什么呢？...现在无论点击哪个 div ,它 弹出的 都是 4 。 为什么呢？ 因为 div 点击事件 是被 异步触发的，当事件被触发的时候，循环已经执行完，此时的 i 的 变量值 为 4。...前面也说到了，当函数执行完，局部变量也跟着销毁了，那为什么会 输出 2 呢 ？...闭包会在父函数外部，改变父函数内部变量的值。
外部 div 元素的 margin-bottom 为 40 像素，标签 p 的顶部和底部 margin 都是 20 像素。...div 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 div 的顶部和底部齐平。...这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。...即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?...最安全的做法应该是创建一个 BFC 时并不会带来任何副作用，它内部的元素都安全的呆在这个迷你布局中，这种方法不会引起任何意想不到的问题，也可以理解开发者的意图。
• link: 链接外部资源的标签，此标签决定了文档与外部资源的关系，常用于链接样式表(css)，网页站点图标(favicon)。...BFC 是独立的容器，容器内部的元素不会影响外部元素 6. 每个元素的 margin-left 值和容器的 border-left 相接触 • BFC 的作用： 1....解决 margin 重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。 2....单行/多行文本溢出？ /* 多行文本溢出 */ display: -webkit-box; /*作为弹性伸缩盒子模型显示。...为什么要使用他们？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
