设置子标签样式： :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"> 快来围绕我吧 环绕文本太长已省略...
在上面 object-fit 的展示中，我们发现可替换元素的对齐方式都是自动的。 比如 object-fit: fill; 的左上角和父容器的左上角对齐。...参考的基准为父元素有多宽多高。 类似子元素的 div 撑满父元素的宽，fill-available 不仅可以撑满宽还能撑满高。...;background-color: burlywood;" >这是子元素的内容 给 span 上设置 fill-available 时的不同表现 ?...max-content 它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个长度最长(按照文字不换行时计算)的元素即可。 参考的基准为子元素有多宽多高。...min-content 它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个“最小宽度值”最大的元素即可，剩余超长的要么换行，要么溢出 参考的基准为子元素“最小宽度值”有多宽多高。
二、核心解决的问题 文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。 footer 3.1.4 After添加最后一个子元素 利用css的:after
（1）在abc的外层加上一层父元素，并设定高度 为什么要设置父元素呢，子元素不是设置了大小，不是应该被子元素撑开吗？？...因为abc三个子元素设置了浮动，相当于浮起来了，不占据空间，所以撑不开，所以设置高度是一种解决这个问题的方法。...auto:自动调整的意思 意思是对于超出父元素的元素，父元素自动调整高度，就不会影响后面的布局 .outer{ overflow: auto; }
比如，display: block 块级元素默认高度会霸占父节点 100% 宽度，而高度默认会由子内容决定，类似于 Android 中的 wrap_content。...但这里需要注意一点，虽然浮动元素会造成重叠的现象，但这只是正常的文档流的元素盒子被浮动元素压住了，但文档流元素的文本内容会自动围绕在浮动元素周围，就像上图中块级元素四个字并没有被覆盖住。...浮动清除 由于浮动最初设计是为了让文字可以围绕在图片周围，因此，浮动元素后面的非浮动元素会自动围绕着浮动元素进行包装。...也都是通过 left, top, right, bottom 来根据参考掉调整位置。 releative 相对定位 相对定位并不是相对于父元素，而是相对于该元素原本所应该在的位置作为参考点。...也就是说在父类元素中，不管是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。 但通常都是使用子绝父相的模式，其他模式并没有什么意义。
float子元素，且父元素高度为0，这种现象就是**float坍塌**。...，但不包括创建了新BFC的子元素的内部元素。...直到它的外边缘遇到包含框或者另一个浮动框的边缘； 浮动框脱离了文档的常规流，文档的常规流会忽略浮动框的存在； 浮动框不会影响到块级框的布局，但影响内联框的排列 ； 当浮动框高度超过包含框的时候，包含框不会自动伸缩来闭合浮动框...简单地说，就是浮动会脱离普通流（属于一种比较‘特殊’的脱离，其他内容还会围绕在浮动元素周围），并且创建了新的BFC，而父元素不具备产生 BFC 的条件，这时候父元素无法感知到它的存在，所以它的高度为0。...float坍塌的解决方案 BFC会把它包含的浮动元素高度也算在里面，也就是闭合浮动，大部分解决方案都是围绕着这个特性来实现的。 1).
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：溢出内容将会被裁剪不会显示
那么我们延伸一下，子组件怎么向父组件传值？...父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。...另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。 2....让float属性不影响其它div及组件 在写页面的时候我们经常会使用float属性来调整样式，但是有一个问题会让下属的所有页面当前float的影响 如何解决，在使用了float的div下面再写一个空div，加入属性clear:both <div style="width:55px;height:1px
class="father"> 父级 子级 ②效果图：父级的样式继承给了子级图片 2、布局样式默认不会继承①代码例子 父级 子级 父级 子级 ②效果图：父级所有样式都继承给了子级图片二、盒子模型概念：CSS假定每⼀个标签都是⼀个矩阵，围绕着这个矩阵，从内到外展开⼀系列的属性来描述它，这⼀系列就被称为【盒⼦模型】组成：content、padding
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"> 此情况下，给p（子元素）标记进行设置外边距则
2.若是内联元素，则会尽可能围绕浮动元素。 另外，浮动的元素脱离了普通流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高，这样就会造成高度塌陷。 ?...清除浮动 父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 ? 给内部两个盒子加上float属性的时候 ?...顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 总结一下： 1.当父元素不给高度的时候， 2.内部元素不浮动时会撑开 3.而浮动的时候，父元素变成一条线 4...如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。 优点：通俗易懂，方便 缺点：添加无意义标签，语义化差 不建议使用。...deeppink; overflow: hidden; } 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 不推荐使用 3.使用after伪元素清除浮动
它决定了其子元素如何定位，以及其它元素的关系和相互作用。...如何使英文单词发生词内断行 word-wrap:break-word。 13. div水平垂直居中的几种方式。...绝对定位(子绝父相) 这里是父容器 这里是子容器 .father {...flex，子：margin：auto，0 不定高：父：flex，align-items: center 水平垂直居中 子元素为块级元素：父：flex，子：margin：auto 子元素未知：display...：flex；justify-content: center；align-items: center 子元素用绝对定位，上下左右为0，margin：auto，父：relative， 17.如何实现小于
本文将介绍如何通过自定义组件实现v-model，让我们在非表单元素上也能享受到便捷的双向数据绑定效果。...实现自定义组件的v-model功能可以按照以下步骤进行： 在自定义组件中定义一个value属性：这个属性用于接收父组件传递给子组件的值，并在子组件内部进行使用。...在父组件中使用子组件时，使用v-bind指令将父组件中的数据属性绑定到子组件的value属性上。 在父组件中监听子组件的自定义事件，并更新父组件中的数据属性。...-- 子组件 MyCounter.vue --> + {{ value...使用v-on指令监听MyCounter组件的update:value事件，并更新父组件中的count属性，实现了数据的反向绑定。父组件中的p标签展示了计数器的值，数据的变化会自动反映在页面上。
（RWD） 是指网页可以自动根据用户行为及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的对布局和行为进行相应的响应和调整。...用于标识移动网站的Viewport Meta标签 viewport meta标签为浏览器如何调整页面以适应每个设备的宽度做出了依据。...如何创建自适应网格布局？Flexbox。 我们如何实现全球和平？Flexbox。...我们设置main标签设置为flex-wrap: wrap，这个设置为允许其内部子节点在父节点中换行， flex-basis: 100% 是指我们的div节点的宽度是相对于父节点宽度的100％（图1）。...最后，宽度和高度为100％会使子级iframe元素成为其父级的100％。父级.videoWrapper完全控制建立此宽高比布局。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
