当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： ? 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。...如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： ?...，导致被浮动元素覆盖，除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行。...顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 总结一下： 1.当父元素不给高度的时候， 2.内部元素不浮动时会撑开 3.而浮动的时候，父元素变成一条线 4....浮动的元素自己会有一套排列规则，相当于在页面上面浮动着一层新的页面 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） <!
这里不贴代码了，主要说说原理是怎么实现的。 标线 在页面上创建 6 条线，分别是三横三竖。这 6 条线的作用是对齐，它们什么时候会出现呢？...上下方向的两个组件左边、中间、右边对齐时会出现竖线 左右方向的两个组件上边、中间、下边对齐时会出现横线 具体的计算公式主要是根据每个组件的 xy 坐标和宽度高度进行计算的。...这时需要手动将 b 组件的 y 坐标值设为 100，这样就将 ab 组件吸附在一起了。 ? 优化 在拖拽时如果 6 条标线都显示出来会不太美观。...所以我们可以做一下优化，在纵横方向上最多只同时显示一条线。实现原理如下： a 组件在左边不动，我们拖着 b 组件往 a 组件靠近。...这时它们最先对齐的是 a 的右边和 b 的左边，所以只需要一条线就够了。 如果 ab 组件已经靠近，并且 b 组件继续往左边移动，这时就要判断它们俩的中间是否对齐。
在下面的演示中，我们可以看到，在有足够空间的情况下，带有"auto"文本的 div 将在max-content时达到最大宽度，而 1fr div 则共享剩余空间。...在宽屏幕浏览器上，五列的间距均为 1fr。在较窄的设备上，列会越来越窄。一旦达到 60px 和 8vw 之间的较低值，就会停止缩小。...我们还可以在 repeat() 函数中使用命名线： article { grid-template-columns: repeat(5, [yin] 1fr [yang]); } 这意味着，现在我们的每一列左边都有一条线称为...image.png 如果每一行都有相同的名称，似乎会增加工作难度，但我们仍然可以将它们分别作为目标。...同样的情况也会反过来发生：当我们缩小浏览器时，一旦没有至少 200px 的空间可以容纳，行中的最后一个 div 就会进入下一行。一旦该 div 掉下去，其余的 div 就会展开以填满该行。
什么时候块级元素和行内元素 块级元素转行内元素 我们都知道 div是块级元素 是独占一行 可以设置宽高的 并且是独占一行的 那么我们看看 给它转换成行内元素的效果吧！...转换成行内元素 可以清楚的看到 他们俩成为相亲相爱的好兄弟 在同一条线上了！ 接下来就看看 行内元素转块级元素吧！...行内元素转块级元素 众所周知 行内元素是好兄弟 他们都是在一条线上的 可以看到 我们设置了宽高 他们还是不离不弃 生死相依！ 那么 接下来 我们就让他 兄弟反目吧 ！...兄弟反目 可以看到 当我们设置为块级元素之后 他俩翻脸速度比翻书还快 直接另起一行 各奔东西的 转换成行内块级元素 可以看到 图中 b标签是行内元素 而p标签则是块级元素 我想给俩弄成相亲相爱的俩兄弟...结果 可以看到 当我们给这俩个标签设置成行内块级元素的时候 变成了 可设置宽高 不是独占一行的行内块级元素
定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。...right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
元素右边到视窗左边的距离; rectObject.bottom：元素下边到视窗上边的距离; rectObject.left：元素左边到视窗左边的距离; 3....这也实现了内容区标题栏始终在顶部的效果。关于粘性定位更多的可以看这里 2. 按钮缓慢弹出 当我们点击添加按钮的时候其他的内容会缓慢弹出，这个是靠css的动画实现的。...因为如果用户连续点击添加可能会出现小球不够的情况，所以需要多个小球。 时将一个小球的位置设置为被点击元素的位置，且获取目的地位置（购物车位置），当小球抛出时使其运动方式按照贝塞尔曲线过渡。...上面的DOM操作可以改成使用vue的动画组件 transition 进行优化，感觉会更好，我在项目中使用了transition组件进行优化，代码更加简洁。
当我们看到一个图像时，我们的大脑会直观地分辨出图表中的模式。 你可能已经知道，印度有超过50%的人口在25岁以下，65%以上的人口在35岁以下。...尾巴在右边的概率分布是正偏态分布，尾巴在左边的概率分布是负偏态分布。如果你觉得上面的数字令人困惑，没关系。我们稍后会更详细地了解这一点。...因为我们的数据在这里是正偏度的，这意味着它有更多的低值数据点，也就是说，马力较小的汽车。 因此，当我们根据这些数据训练我们的模型时，它将在预测低马力汽车的mpg方面表现得比那些高马力的汽车更好。...好吧，答案是，分布的尾巴在右边；它导致平均值大于中值，平均值最终向右移动。此外，众数出现在分布的最高频率，即中位数的左侧。因此，「众数<中位数<平均值」。 ?...以下是一些可以转换倾斜数据的方法： 幂变换 log变换 指数变换 「注」：转换的选择取决于数据的统计特性。 结尾 在本文中，我们讨论了偏度的概念、它的类型以及它在数据科学领域中的重要性。
懒加载 lazyload懒加载：又叫延迟加载、按需加载，当我们打开一个网页，优先展示的首屏图片就先加载，而其他的图片，等到需要去展示的时候再去请求图片资源。...属性存放真正需要显示的图片的路径，当页面滚动直到图片出现在可视区域时，将data-src中的图片地址值赋值给src属性值。...：元素左边到视窗左边的距离;rect.right：元素右边到视窗左边的距离;window.innerHeight：视窗高度window.innerWidth： 视窗宽度图片实现效果利用开发者工具我们可以看到如下截图...：最初打开页面：只显示前两张图片，后面三张图片还没有出现在当前页面图片图片 由于后面三张还没有出现，那么就保持loading.gif，这样就节省了加载的时间，当我们继续滚动直到出现页面底部，通过开发者工具看到如下的截图...当使用到已经预加载好的图片时，会直接使用缓存好的图片资源，而不需要向服务器发送请求。<!
块级元素（block-level elements）：块级元素以块的形式显示在页面上，它们会独占一行，宽度默认是 100%。...，CSS 渲染绘制时屏幕上盒子实际宽度和高度会加上设置的边框和内边距值，所以在实现响应式布局事会非常烦人，需要时刻注意到这个元素的边框和内边距。...> 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。 > 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。...例如，当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。 示例，在下面的code中，两个相邻的div>元素之间存在20px的外边距。... div> outline-轮廓 描述: 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用, 在 CSS 中使用 outline 属性来规定元素轮廓的样式
旧版的 IE 浏览器与其它浏览器解析盒子模型会出现差异，例如 IE 会把 border 边框 和 padding 内边距计算在盒子的 width / height 宽度里面，而其它浏览器则是相反，不包含...但是在实际开发中，前者是相对更加灵活的，但是 W3C 规范中规定了它们不能被包含在其中，为了解决这个问题，在新的 css3 标准中新增了 box-sizing 属性，用于切换两种盒子模型。...; 时，浏览器会按照 W3C 标准进行解析，将 border 和 padding 不计算在 width 或 height 其中。...width = content height = content 怪异盒模型（IE 盒模型） border-box 当我们设置 box-sizing: content-box; 时，浏览器会按照旧版的...">contentdiv> div class="border-box">borderdiv> CSS3 新特性 注意 目前只大致列举 CSS3 新特性，后续的文章会详细介绍
垂直对齐的方式也略有复杂。然后，包含形成一条线的框的矩形区域称为线盒（line box）。 线盒（line box）的宽度：由浮动情况跟它所在的包含块决定。..."> div class="头部">div> div class="左边">div> div class="右边">div> div class="底部">的部分就是布局了，虽然W3C本身提供了很多的属性以及规范来处理这些布局问题的，但是涉及到了现实的项目，更多时候是错综复杂的，但是随着 CSS 逻辑属性的变化，以及各类新布局系统的出现...，相信以后的布局会简单得多。...如果你有兴趣，请添加鱼头微信（krisChans95），添加时注明 “加群”，Mmmm，最后，如果觉得我的文章还不错，请加个关注跟点个“在看”呗！
以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。...2.2 实例 在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth...scrollLeft的概念是返回元素左边缘与视图之间的距离，我们一步一步的理解，首先，如上图所示，当我们没有滑动水平滚动条时，元素与它的内容默认是左上角顶点重合的，所以他们之间是没有距离的，此刻的 scrollLeft...当我们拉动水平滚动条时，元素与视图就不再是左上角顶点重合了，水平之间是存在距离的（按左上角顶点重合计算),可以看到现在的scrollLef有了数值，因为没有移动垂直滚动条，因此垂直方向仍然是没有距离的。...当我将水平，垂直滚动条都拉到底部时，scrollLeft 和 scrollTop 都 分别为116.8 和156.8 ，我设置的元素宽高分别为：200 180 ，视图（子元素）宽高分别为：300 320
行内块元素（inline-block） 在行内元素中有几个特殊的标签——、、， 可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。...样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。.../* 清除外边距 */ } 外边距合并 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。...普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。...他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！
边框(border)会在内边距外侧增加一条线框，可以是实线、虚线或点划线。 外边框(margin)在边框的外侧，是围绕在盒子可见部分之外的透明区域，用于控制元素之间的距离。...如下，我们在模拟的边框上加一个虚线的轮廓，其只是在外围包括了一层轮廓，并不影响布局。 ? 轮廓不影响布局 最后，内边距、边框和外边距都不是必需的，因此它们的默认值都是 0。...这时，元素盒子的位置，由在 HTML 中的位置决定。 块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由他们的上、下外边距决定。 行内盒子是沿文本流水平排列的，也会随文本换行而换行。...如果包含块太窄无法容纳所有浮动元素水平排列，后面的元素会向下移动如下图左侧。如果浮动元素高度不同，后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素左侧，如下图右侧。 ?...块级格式化上下文规定页面必须自动包含浮动的元素，且所有块级元素的左边界默认与包含块的左边界对齐。
属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下： 属性 作用 normal 默认值，浏览器会显示标准的字体样式 font-style: normal; italic 浏览器会显示斜体的字体样式...字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 2....定义标准的文本。 取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。...（不用） line-through 定义穿过文本下的一条线。...左边是HTML元素结构 右边是CSS样式。 右边CSS样式可以改动数值和颜色查看更改后效果。
body { background-color: #000; /* 防止出现左右的滚动条...// 线的颜色，鼠标进入导航区域，星星会连成一条线 lineColor: "#fff", // 线的高度 lineHeight: "3px", // 星星连成线的时间 changeTime...，开始在元素wrapper 区域内，生成规定数量的 星星， for (var i = 0; i < that.starNum; i++) { // 星星的 top值，0 ~ 元素wrapper...是触发事件的当前节点对象，就是鼠标进入时候的 a元素 // 当前a元素的宽度 / 星星数 = 最后连成线时，星星的宽度 var width = this.offsetWidth...left 值就是，当前a元素的距离左边界的值 + 第i个星星 * 星星的宽度 var left = this.offsetLeft + i * width //
行内块元素(inline-block)」 在行内元素中有几个特殊的标签—— 、、 ，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。...CSS 优先级(CSS特殊性)」 -概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时， 选择器相同，则执行层叠性 选择器不同，就会出现优先级的问题。...」时，可能会出现外边距的合并。...堆叠顺序（z-index） 在使用「定位」布局时，可能会「出现盒子重叠的情况」。 加了定位的盒子，默认「后来者居上」， 后面的盒子会压住前面的盒子。...---- CSS高级技巧 元素的显示与隐藏 **目的:**让一个元素在页面中消失或者显示出来 **场景:**类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子...2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 总结一下： 当父元素不给高度的时候，内部元素不浮动时会撑开...，而浮动的时候，父元素变成一条线，这时候很多人会想到新建标签clear：both和float 方法，但是这两种方法并不推荐使用！...什么是clear:both clear:both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 清除浮动的方法（最常用的4种） 1.额外标签法（在最后一个浮动标签后，新加一个标签，...> div class="small">smalldiv> div> div class="footer">div> 此时的效果为 优点
我们原来的 CSS逻辑属性是按照物理逻辑，从上(top)、右(right)、下(bottom)、左(left)划分的。 那么按着这个规则去修改文本属性时，就会出现上述这种不符合语法规则的状态。...= padding-top 这就意味着旧的逻辑属性，在某些国家里会变得不合常理。...将 文档(doucment) 中的元素转换一个个盒子的实际算法。...在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。...定位规则 一旦形成了盒子，CSS引擎就需要定位它们来完成布局。 定位所使用的规则如下： 普通流 在普通流中，盒子会依次放置。
，如设置斜体、倾斜或正常字体，其可用属性值如下： 属性 作用 normal 默认值，浏览器会显示标准的字体样式 font-style: normal; italic 浏览器会显示斜体的字体样式。...定义标准的文本。 取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。...（不用） line-through 定义穿过文本下的一条线。... 在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。...然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
