一、应用场景 文字环绕：通过将图片等元素设置为浮动，可以实现文字围绕该元素排列的效果，增强页面的排版美感和可读性。例如，在一篇文章中，将图片左浮动，文字就会自动环绕在图片周围。...（二）包含块 浮动元素的包含块和常规流一样，是父元素的内容盒。这决定了浮动元素在页面中的位置范围。如果父元素的尺寸发生变化，浮动元素的位置也会相应地调整。...即浮动元素的高度会根据其内部的内容自动调整。 margin为auto时，为 0。这意味着如果不明确设置边距，浮动元素的边距会自动设置为 0。 边框、内边距和百分比设置与常规流一致。...行盒中的文字等内容会自动调整位置，以避免与浮动盒子重叠。如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒称为匿名行盒。...这就导致当父元素内部包含浮动元素时，父元素的高度可能无法正确地根据子元素的内容进行调整，从而出现高度坍塌的问题。
设置子标签样式： :last-child 设置父标签最后一个子标签的样式，例如：div p:last-child，设置div标签里最后一个p标签的样式 :first-child 则是相反，设置父标签最第一个子标签的样式...，例如：div p:first-child，设置div标签里第一个p标签的样式 代码示例： ?...:nth-of-type(n)，设置父标签从第一个开始数的第n个子标签的样式，例如：div p:nth-of-type(2)，就是设置div标签里第二p标签的样式 :nth-last-of-type(n...)，设置父标签从倒数第一个开始数的第n个子标签的样式，例如：div p:nth-of-type(1)，就是设置div标签里倒数第一个p标签的样式 代码示例： ?...图片边框：border-image 使用此属性可以将图片设置到边框上，末尾可以使用round或stretch来定义图片围绕或是拉伸效果。 代码示例： ? 运行结果： ? 代码示例： ? 运行结果： ?
原因是浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。...父元素高度塌陷 父元素的高度默认是由子元素的高度撑起来的，所以我们的父元素 float-container 的高度应该是五个box的高度加起来，也就是 320px 。...原因是当子元素脱离标准文档流以后，父元素的高度就没有了，从而造成父元素高度塌陷现象。 影响了兄弟元素 因为浮动元素脱离了标准文档流，所以其他元素就会占据浮动元素原来的位置，影响布局。...影响了叔叔元素 因为父元素的高度塌陷了，所以叔叔元素的布局也会受到影响。 如何清除浮动 父级元素也浮动 我们给浮动元素的父元素也设置个浮动。...class="container"> div class="box1">快来围绕我吧div> div class="box2">环绕文本太长已省略...
在上面 object-fit 的展示中，我们发现可替换元素的对齐方式都是自动的。 比如 object-fit: fill; 的左上角和父容器的左上角对齐。...参考的基准为父元素有多宽多高。 类似子元素的 div 撑满父元素的宽，fill-available 不仅可以撑满宽还能撑满高。...;background-color: burlywood;" >这是子元素的内容 div> 给 span 上设置 fill-available 时的不同表现 ?...max-content 它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个长度最长(按照文字不换行时计算)的元素即可。 参考的基准为子元素有多宽多高。...min-content 它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个“最小宽度值”最大的元素即可，剩余超长的要么换行，要么溢出 参考的基准为子元素“最小宽度值”有多宽多高。
设置 display: flex; 将父元素设置为display: flex;后，子元素将自动按照水平（默认）或垂直方向排列，并且能够灵活调整大小以适应容器。...: lightcoral;">Item 3div> div> 上面的代码展示了如何通过justify-content和align-items控制子元素的排列方式。...子元素将自动填充这些网格单元。 2. 在网格内放置元素 你可以通过grid-column和grid-row属性来指定元素在网格中的位置。...>这是一个浮动示例，图片将浮动到左侧，文本将围绕在图片周围。...clear）技术： .clearfix::after { content: ""; display: table; clear: both; } 使用.clearfix类可以确保父容器包裹住浮动的子元素
二、核心解决的问题 文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。 围绕001显示。...1.BFC(块级格式化上下文） 他是一个独立渲染的区域，规定区域内部如何布局，且与外部毫不相干，主要规则如下： 1.1 内部的box会垂直方向，一个接一个地放置 1.2 Box垂直方向的距离由margin...> div class="footer">footerdiv> 3.1.3 最后一个子元素clear:both 利用clear:both触发父容器重新计算高度的原理实现，示例代码如下： .wrap...div class="clear">div> div> div class="footer">footerdiv> 3.1.4 After添加最后一个子元素 利用css的:after
（1）在abc的外层加上一层父元素，并设定高度 div class="b">div> div class="c">div> div> div class="d">div> 为什么要设置父元素呢，子元素不是设置了大小，不是应该被子元素撑开吗？？...因为abc三个子元素设置了浮动，相当于浮起来了，不占据空间，所以撑不开，所以设置高度是一种解决这个问题的方法。...auto:自动调整的意思 意思是对于超出父元素的元素，父元素自动调整高度，就不会影响后面的布局 .outer{ overflow: auto; }
float子元素，且父元素高度为0，这种现象就是**float坍塌**。...，但不包括创建了新BFC的子元素的内部元素。...直到它的外边缘遇到包含框或者另一个浮动框的边缘； 浮动框脱离了文档的常规流，文档的常规流会忽略浮动框的存在； 浮动框不会影响到块级框的布局，但影响内联框的排列 ； 当浮动框高度超过包含框的时候，包含框不会自动伸缩来闭合浮动框...简单地说，就是浮动会脱离普通流（属于一种比较‘特殊’的脱离，其他内容还会围绕在浮动元素周围），并且创建了新的BFC，而父元素不具备产生 BFC 的条件，这时候父元素无法感知到它的存在，所以它的高度为0。...float坍塌的解决方案 BFC会把它包含的浮动元素高度也算在里面，也就是闭合浮动，大部分解决方案都是围绕着这个特性来实现的。 1).
比如，display: block 块级元素默认高度会霸占父节点 100% 宽度，而高度默认会由子内容决定，类似于 Android 中的 wrap_content。...但这里需要注意一点，虽然浮动元素会造成重叠的现象，但这只是正常的文档流的元素盒子被浮动元素压住了，但文档流元素的文本内容会自动围绕在浮动元素周围，就像上图中块级元素四个字并没有被覆盖住。...浮动清除 由于浮动最初设计是为了让文字可以围绕在图片周围，因此，浮动元素后面的非浮动元素会自动围绕着浮动元素进行包装。...也都是通过 left, top, right, bottom 来根据参考掉调整位置。 releative 相对定位 相对定位并不是相对于父元素，而是相对于该元素原本所应该在的位置作为参考点。...也就是说在父类元素中，不管是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。 但通常都是使用子绝父相的模式，其他模式并没有什么意义。
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素如果没有设置尺寸...可以从上图看到，里面的两个div是挨在一起的，那么如何设置两个div左右两边对齐呢？ 此时就需要使用float:left和float:right分别设置一下了。 ?...成功啦，下面调整一下间距，好看一下，如下： ? 再来看看这个怎么实现 父级盒子不给高度，子集盒子浮动，父级盒子需要清除浮动 ? 问题如下图： ?...可以从上图看出，父元素div并没有因为子元素的数量增多而增加，那么这种问题怎么处理呢？ 这就是经典的问题清除浮动。 为什么叫做清楚浮动呢？因为子元素只要不设置float，父元素是可以自动扩展的。 ?...清除浮动 ：子元素设置为浮动，父元素无法被撑开的这种情况 父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐） 使用成熟的清浮动样式类
： (1)CSS2.1规范中的一个概念 (2)它是指页面中的一块渲染区域，并拥有一套渲染规则，它决定了其子元素将如何定位，以及与其他元素的关系和相互作用。...(3)生成BFC元素的子元素中，每一个子元素的margin与包含块的左边界border相接触（对于从左到右的格式化，否则相反），即使存在浮动也是如此； (4)BFC的区域不会与float元素区域重叠 可应用到两栏布局中...(6)计算BFC的高度时，浮动元素也参与计算 可应用到解决浮动元素的父元素高度塌陷问题中： 如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷（height:0）。...如果把父容器的container的宽度，设为一个小于左盒子的宽度+右边盒子的宽度值（200px+300px），如400px时，就会看到这样的效果： 两栏.png 说明左右两个盒子并不会自动调整宽度来自适应的布局... 效果： 浮动高度塌陷.png 如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。
支持设置布局中的列数 (column-count)、内容应如何列之间的流动规则、列之间的间距 (column-gap) 以及列分割线（column-rule）的样式。...属性将图像的效果调整（模糊、对比度、灰度、色调等）应用于元素。...filter 通常用于调整图像、背景和边框的渲染。...conic-gradient() 函数创建一个图像，该图像由渐变色组成，颜色围绕中心点旋转过渡（而不是从中心辐射）。...浏览器的默认行为是：当子元素滚动到边界后继续滚动鼠标，会触发父元素的滚动。该行为被称作 scroll chaining。
元素的定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 父级没有定位 父级有定位 子绝父相 定位的扩展 绝对定位的盒子水平/垂直居中 固定定位...# 子绝父相 这个“子绝父相”太重要了，是我们学习定位的口诀。 子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。...换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。...父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 这就是子绝父相的由来。 如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 固定定位的元素跟父亲没有任何关系，只认浏览器。
--CSS：--> div,.one,.two{ font -size: 30px; } 1.2.3 关系选择器 父元素：直接包含子元素的元素叫做父元素 子元素：直接被父元素包含的元素是子元素...兄弟元素：拥有相同父元素的元素是兄弟元素 1.2.3.1 子类选择器 子元素选择器 作用：选中指定父元素的指定子元 语法：父元素>子元素 调整的情况: ->如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足，这七个值中有三个值和设置为auto：width、margin-left、maring-right...->如果某个值为auto,则会自动调整为auto的那个值以使等式成立 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大，设置为auto的外边距会自动为0。 ...（可以-x或-y） 属性来设置父元素如何处理溢出的子元素 可选值: visible：默认值子元素会从父元素中溢出，在父元素外部的位置显示 hidden：溢出内容将会被裁剪不会显示
class="father"> 父级 div class="son"> 子级 div> div>②效果图：父级的样式继承给了子级图片 2、布局样式默认不会继承①代码例子 父级 div class="son"> 子级 div> div> 父级 div class="son"> 子级 div> div>②效果图：父级所有样式都继承给了子级图片二、盒子模型概念：CSS假定每⼀个标签都是⼀个矩阵，围绕着这个矩阵，从内到外展开⼀系列的属性来描述它，这⼀系列就被称为【盒⼦模型】组成：content、padding
那么我们延伸一下，子组件怎么向父组件传值？...父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。...另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。 2....让float属性不影响其它div及组件 在写页面的时候我们经常会使用float属性来调整样式，但是有一个问题会让下属的所有页面当前float的影响 div style="width:55px;height...:1px;float:left">div> 如何解决，在使用了float的div下面再写一个空div，加入属性clear:both div style="width:55px;height:1px
Walke 基于 FaxJS 的经验创造了 React 2013 年：React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架 2014 年：生态大爆发，各种围绕...Instagram、Discord、Oculus 桌面应用开发：结合 Electron 3D 开发：react-thre-fiber # React 的设计思路 # UI 编程痛点 状态更新时，UI 不会自动更新...# 组件化 组件要么是组件的组合，要么是原子组件 组件拥有内部状态，外部不可见 父组件可将状态传入子组件 # 状态归属 当两个组件都要使用同一个状态时，应该把状态上移到其公共父组件，即状态提升 但是如果这种状态提升过多...，组件的复用性难免会降低，这个问题的解决则需要使用 Redux 这种状态管理框架 React 其实是单向数据流，永远是父组件给子组件传递状态，子组件只能调用函数更改状态 # 组件设计 前提： 组件声明了状态和...> ); } # React 的实现 # Problems JSX 语法不符合 JS 标准语法： 需要将 JSX 文件转义为 JS 文件 返回的 JSX 发生改变时，如何更新 DOM：
auto 自动 4. ... 当两个垂直外边距相遇时，会合并成一个外边距 合并后的外边距高度是两个外边距中最大的那个值 2.外边距溢出 子债父还... 在特定情况下,给子元素设置边距时， 效果会作用到父元素身上 特定情况 ...1.上下外边距 会产生溢出 2.父元素没有设置边框，并且设置 第一个子元素的上外边距 ... id="d1">div> div id="d2">div> div id="d3"> div> 此情况下，给p（子元素）标记进行设置外边距则
2.若是内联元素，则会尽可能围绕浮动元素。 另外，浮动的元素脱离了普通流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高，这样就会造成高度塌陷。 ?...清除浮动 父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 ? 给内部两个盒子加上float属性的时候 ?...顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 总结一下： 1.当父元素不给高度的时候， 2.内部元素不浮动时会撑开 3.而浮动的时候，父元素变成一条线 4...如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。 优点：通俗易懂，方便 缺点：添加无意义标签，语义化差 不建议使用。...deeppink; overflow: hidden; } 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 不推荐使用 3.使用after伪元素清除浮动
> ); } } 在 App 组件中，Counter 子组件使用 ref 获取其实例对象，父组件用 counterIntance 属性接收。...回调形式的函数）传递给子组件，父组件中的 iptElm 就可以接收到 DOM 元素了。...（HOC），可以利用 forwardRef 实现父组件获取子组件 DOM 元素。...Example 组件中就可以接收到函数组件传递来的 forwardRef 属性，然后 WrapperComponent 相当于父组件，我们自己写的子组件需要使用 forwardRef 包一层。...再看一个例子，实现一个下面动图这样的功能，输入框输入的数字相当于计时器的毫秒延迟，当输入框数值变化时计时器会做相应的调整。如何实现？ ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
