文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

CSS_Flex 那些鲜为人知的内幕

「如果大家对这些概念熟悉，可以直接忽略」 同时，由于阅读我文章的群体有很多，所以有些知识点可能「我视之若珍宝，尔视只如草芥，弃之如敝履」。以下知识点，请「酌情使用」。...其中四种被使用最多。流动、定位、flex和grid。 流动布局(Flow Layout) 默认情况下，CSS 使用所谓的流动布局算法(也称Normal flow)。...还有一点需要注意，根据我们使用的值的不同，我们可能需要「考虑元素的父级」。例如，在绝对定位元素中，该元素相对于其最近的定位布局祖先定位。...这意味着 CSS 将查找 HTML 树并找到最近的一个祖先，「该祖先也使用了这些值之一」。如果找不到，则绝对定位元素将相对于视口定位。...为什么它们不共享相同的选项呢？我们将很快揭开这个谜团，但首先，我需要分享另一个对齐属性：align-self。

4.1K10

css笔记

样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。...绝对定位的盒子水平/垂直居中 普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了 定位的盒子也可以水平或者垂直居中，有一个算法。...跟绝对定位的盒子居中对齐原理差不多。...使用相当简单，如下图所示 并且可以通过附加属性可以更友好控制音频的播放，如： autoplay 自动播放 controls 是否显不默认播放控件 loop 循环播放 如果这个属性不写 默认播放一次 loop...3、justify-content调整主轴对齐（水平对齐） 子盒子如何在父盒子里面水平对齐 值 描述 白话文 flex-start 默认值。

9.4K50
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS入门？一篇就够了！

    text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。...样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。...盒子模型布局稳定性 开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？ 答案是： 其实他们大部分情况下是可以混用的。...父级没有定位 若所有父元素都没有定位，以浏览器为准对齐(document文档)。 父级有定位 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。...绝对定位的盒子水平/垂直居中 普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了 定位的盒子也可以水平或者垂直居中，有一个算法。

    6.4K20

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    = 浏览器可视窗口 + 边偏移 | 代码示例 ) 【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 ) 【CSS...: fixed 5、静态定位 CSS 中的 静态定位 是 默认的定位方式 , 就是无定位 , 设置该定位方式 , 定位盒子不生效 ; 为盒子模型 设置 静态定位 模式 , 该 盒子模型 就会按照标准流的方式..., 与 右侧的 三个按钮 , 就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 10、绝对定位元素设置 水平...auto; 样式的方式 令盒子水平居中 ; 举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点...的容器需要居中对齐 ; 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素 水平 / 垂直 居中 ; 2、

    2.9K10

    前端基础篇之CSS世界

    我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。...这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。...左边缘可能是content box的左边缘（非绝对定位如position: absolute），也可能是padding box的左边缘（如position: absolute）。...无依赖绝对定位 大多数用到绝对定位的时候，都是存在包含块和left/top等方向属性的。...当绝对定位元素的水平方向(left/right)或垂直方向(top/bottom)的两个定位属性同时存在的时候，绝对元素在该方向上便具有了流体特性。

    2.7K50

    CSS基础（二）

    伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...定位使用步骤： 设置定位方式 属性名：position 属性值： 定位方式 属性值 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed...特点： 脱标，不占位 改变标签的显示模式特点（ 变为行内块） 绝对定位的盒子不能使用左右margin ： auto居中...z-index: 整数；//默认情况下，数值为0 装饰： 一、对齐 基线： 浏览器文字类型元素排版用于对齐的线（baseline） 浏览器遇到行内和行内标签当作文字处理...，默认文字是按照基线对齐的。

    2.5K20

    深入理解视觉格式化模型

    这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。 实践与现象 绝对定位是一种常用的定位方式，也经常会看到一些使用技巧，轻松搞定一些不太容易实现的效果。...现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。...同样，由于触发按钮的高度是可能变化的，那么下拉列表与触发按钮顶端的绝对距离是不固定的，使用单位px是无法达到自适应的，通常的技巧是设置top:100%，其实利用我们上面提到的技巧，对top和bottom...绝对定位结合margin实现垂直居中 很多设计都可以抽象为“一个元素相对于父级（或包含块）在垂直方向或水平方向上居中对齐”的模式，根据实际情况又可分为该元素的尺寸未知和已知两种情况。...一般为了水平居中会在水平方向上设置auto，为什么这种情况下，在垂直方向上设置auto，会导致垂直居中的效果呢？

    1.1K90

    深入理解视觉格式化模型（ VISUAL FORMATTING MODEL）

    这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。 实践与现象 绝对定位是一种常用的定位方式，也经常会看到一些使用技巧，轻松搞定一些不太容易实现的效果。...现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。...同样，由于触发按钮的高度是可能变化的，那么下拉列表与触发按钮顶端的绝对距离是不固定的，使用单位px是无法达到自适应的，通常的技巧是设置top:100%，其实利用我们上面提到的技巧，对top和bottom...绝对定位结合margin实现垂直居中 很多设计都可以抽象为“一个元素相对于父级（或包含块）在垂直方向或水平方向上居中对齐”的模式，根据实际情况又可分为该元素的尺寸未知和已知两种情况。...一般为了水平居中会在水平方向上设置auto，为什么这种情况下，在垂直方向上设置auto，会导致垂直居中的效果呢？

    83730

    「学习笔记」CSS基础

    「2.text-align」 text-align属性用于设置文本内容的水平对齐方式，相当于html中的align对齐属性。...CSS外观属性总结」 属性 表示 注意点 color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff line-height 行高 控制行与行之间的距离 text-align 水平对齐 可以设定文字水平的对齐方式...样式不冲突，不会层叠。 「2. CSS 继承性」 -概念： 子标签会继承父标签的某些样式，如文本颜色和字号。 想要设置一个可继承的属性，只需将它应用于父元素即可。...定位(position)的扩展 绝对定位的盒子居中 绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法： left : 50%...不能 基本单独使用 绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，

    4.2K30

    【云+社区年度征文】2020一网打尽CSS世界

    利用inline-block的包裹特性即可实现（内容过多会自动沾满整行，且分行展示（ 水平对齐：内联元素使用text-align；块级元素使用margin。...CSS中很多场景或属性会出现这种不影响其他元素布局而出现层叠效果的现象。如，relative定位元素、盒阴影box-shadow以及outline等。...CSS中默认流方向为水平方向，margin只能改变元素水平方向（内部）尺寸；但对于绝对定位元素，则水平和垂直都可以！ margin 为块级元素左中右对齐而设计的！...margin合并的情况下 绝对定位元素非定位方向的margin值无效 img { top: 10%; left: 30%; /* 非定位方向，无效 */ margin-right...border-color 没有指定时，会使用当前元素的 color计算值 border 与透明边框 场景一：距离右下方50px background默认是相对于左上角，在宽度不固定的情况下，我们可以通过

    5.7K11

    网页元素居中的n种方法

    场景分析 一个元素，它有可能有背景，那我要它的背景居中对齐 一个元素，它还有可能有个父级元素，那我要它居中于其父级元素 一个元素，它也有可能还带有一些子内容，我要让它的子内容居中 场景建模 根据场景分析提出的一些假设...“父级元素相对定位，子级元素绝对定位”这句话浓缩后的叫法。...父相子绝 + margin: auto 父元素相对定位子元素绝对定位后，设置其top、right、bottom、left都为0，之后我们将其的margin设置为auto。...有兴趣的童鞋可以看下我实现的一个低配版的css样式库：https://ataola.github.io/show/box/assets/taolaui/flex.css 新版flex的写法 在不改变轴方向的情况下...，多个子元素的情况下水平均分。

    1.3K40

    CSS基础知识点整理笔记

    元素文本流保留在原位置不变（可通过z-index改变层级）、不影响元素属性 absolute 绝对定位，相对与static定位以外的第一个父级元素进行定位，元素脱离文本流 （改变z-index层级）、会使得内联元素支持宽高设置...clear:both 父元素增肌伪类 ::after，设置{content:"",clear:both} css实现水平垂直居中 答案解析： 块级元素未知宽高情况下 利用弹性布局 .parent{...diplay:flex; justify-content: center; //实现横轴 align-items:center; } 复制代码 使用绝对定位 .child{ position...使用line-height与height相同、以及text-align:center 使用绝对定位+margin负值偏移 css3的动画属性 答案解析 animation animation :animation-name...文本系列属性 text-indent:文本缩进 text-align:文本水平对齐 line-height:行高 元素可见性 visibility:控制元素的显示隐藏 列表布局属性 list-style

    1.8K20

    Selenium自动登录淘宝，我无意间发现了登录漏洞！

    ，主要说一下滑块的定位。...利用浏览器定位的话，会定位到 span这个结点，但经过我模仿单击按住，拖拽后滑块一动不动，参数也没有任何改变。于是我尝试了一下它的父节点div还是按住后拖拽，这次成功了。...经过反复实验，大概是因为滑动的轨迹不是基本水平导致的，就是说朝着斜下方滑动，虽然也能到达最右端，但会给出这个错误。我的程序是让它水平方向滑动300，竖直方向坐标为0。...正常情况下，输入完信息后点击登录，就该进入淘宝页面了，但是这个登录按钮不管怎么点，页面都是无动于衷。 定位一下，可以发现： ? 这个按钮的链接是javascript:void(0)，假链接！！！...然而就在我快放弃的时候，按了下F5刷新，奇迹出现了！ ? 检测到已登录的微博账号，快速登录？？？原来虽然我没有进入淘宝，但是浏览器左下角一直在显示如：等待**相应，正在解析主机等信息。

    2.5K10

    多个CSS 居中方案，你可能还不知道！水平居中垂直居中水平垂直居中

    上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。...水平居中 内联元素 要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。...： image.png CSS Grid 使用网格容器时，图中的盘子将根据其网格区域居中。...CSS定位 通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。...块元素 绝对定位 通过绝对定位元素，可以使用 CSS transform将元素垂直居中： .plate { position: absolute; top: 50%; transform

    3.8K40
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券