瑕疵在于，当时的 CSS 技术，其实没法判断当前文本内容长度是否超过了其容器宽度，导致即便文本没有没有超长，Hover 上去也会进行一个来回滚动，像是这样： 容器查询 cqw 和 CSS 数学函数 max...容器查询它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度变化，对布局做成调整的能力。...对容器查询想了解更多的，可以戳：新时代布局新特性 -- 容器查询 容器查询带来了很多新的单位，其中有： cqw 容器查询宽度（Container Query Width）占比。...这个是逻辑属性单位，默认情况下等同于 cqw cqb 容器查询块级方向尺寸（Container Query Block-Size）占比。...同上，默认情况下等同于 cqh cqmin 容器查询较小尺寸的（Container Query Min）占比。
放大 现在我们加上meta标签，初始缩放比为1（等于没有缩放），比如iphone6 的初始宽度的物理像素为...缩小 初始缩放比为0.5 如果初始缩放比为1，那么布局的宽度就是和视口viewport的宽度是一样的...，即initial-scale=1等同于width=device-width的效果 缩放比为1--->单方向上，1物理像素用1CSS像素覆盖 缩放比为0.5 --->单方向上，1物理像素用2CSS像素覆盖...所以图片的宽度是200个CSS像素，只覆盖了100个物理像素，高度也是一样。...|| window.innerWidth; 即可获取视口宽度，如果做了视口适配，这个打印出来就是和屏幕宽度一样的值，比如这里的375个CSS像素，如果不做视口适配，这个打印出来就是默认视口宽度(和机型相关
标签，因为 @import 不是 dom 可以控制的 # 为什么要初始化 CSS 样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异...初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化 推荐 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt...E:visited 匹配所有已被点击的链接 E:active 匹配鼠标已经在其上按下、还没有释放的 E 元素 E:hover 匹配鼠标悬停其三的 E 元素 E:focus 匹配获得当前焦点的 E 元素...，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:...'none' 的元素 isolation 属性被设置为 'isolate' 的元素 position：fixed 在 will-change 中指定了任意 CSS 属性，即便没有直接指定这些属性的值
如果我们没有设置 100vh，容器的高度则会遵循项目内容的高度，如下图所示： ? 没有设置容器高度 另一个选项是wrap-reverse，它会反转交叉轴。...作为后者，它的初始值是 stretch和 justify-content，它接受以下选项： flex-start, flex-end, center, space-around, space-between...由于没有空间容纳所需的总宽度 1500px，所以默认的flex shrink factor（弹性收缩系数）的值为1，这样会使每个项目的宽度均匀缩小到196px。 ?...这告诉浏览器：如果在理想状态下，有足够的空间来放置所有的项目，就遵循它们的160px宽度，并且没有正/负可用空间；如果没有足够的空间的话，那么 flex-shrink默认为1，所有项目均匀收缩； 如果有额外的空间...: 0 1 auto auto：flex-items能够根据需要增长/缩小，等同于 flex: 1 1 auto none：固定项目，等同于 flex: 0 0 auto flex: 1：flex-items
flex布局属性图.png 背景 ---- 我本来觉得，我写过许多的CSS样式了，对flex的应用也算娴熟了，起码经常写的布局，我都能不费劲儿的写出来了，flex布局的相关东西我也看了不少，当我看到这段代码时...CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。...每个弹性子元素没有设置宽度，是自由伸展的，那么子元素的宽度就是本身flex item1所占的宽度。如eg.1 !...eg2： 如果其中有一个元素设置了flex-shrink: 0;则其宽度不会收缩，其他部分按比例收缩即可。...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
其对应的类型如下： 1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；...property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化 具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS...这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。...初始默认值为default....默认大小是”0″，也就是变换立即执行，没有延迟。
本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。...需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。另外这里，老姚谢谢各位一如既往的支持。??? 01.【负边距】?负边距的效果。注意左右负边距表现并不一致。...绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度 ? 09.【层叠上下文】?层叠上下文：小辈就是小辈，再厉害也只是个小辈 ? 10.【粘性定位】?...【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度 ? 17.【动画方向】?动画方向可以选择alternate，去回交替进行 ? 18.【线性渐变应用】?...设置宽度为fit-content，可以使block像inline-block那样实现收缩宽度包裹内容的效果 ? 35【自定义属性】?CSS自定义属性的简单使用 ?
这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局；initial-scale=1.0: 设置初始的缩放级别为 1.0。...综合起来，这行代码的作用是告诉浏览器，网页的布局应该以设备的宽度为基准，初始缩放级别为 1.0。这样可以确保在移动设备上获得更好的显示效果，而不会出现不必要的缩放或变形。...{ width: 5rem; /* 相对于根元素，等同于 32px */}p { font-size: 1.5rem; /* 相对于根元素，等同于 24px */}由于在不同设备中的屏幕宽度不同...默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。....--指的是“iphone.css”样式适用于最大设备宽度为480px。这里的 max-device-width 所指的是设备的实际分辨率，也就是指可视面积分辨率。
# 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...缩放比例关系：当前缩放值 = 理想视口宽度 / 视觉视口宽度 用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。 ?...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load 的时候缩放比例...= CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度 单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性 即使设置
device-aspect-ratio:检测设备的宽度和高度的比例。 color:检测颜色的位数。... initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0...:CSS3|系统分类:HTML5/CSS3| CSS3 基础知识, 媒体查询, 长度单位px em rem CSS3 基础知识 1.边框 1.1 圆角 border-radius:5px 0...device-aspect-ratio:检测设备的宽度和高度的比例。 color:检测颜色的位数。... initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0
作者：老姚，《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif 本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。...鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。...绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度 ? 09.【层叠上下文】?层叠上下文：小辈就是小辈，再厉害也只是个小辈 ? 10.【粘性定位】?...【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度 ? 17.【动画方向】?动画方向可以选择alternate，去回交替进行 ? 18.【线性渐变应用】?...设置宽度为fit-content，可以使block像inline-block那样实现收缩宽度包裹内容的效果 ? 35【自定义属性】?CSS自定义属性的简单使用 ?
前面我们已经说了，css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大，这很好理解，因为你分辨率增大了，但屏幕尺寸并没有变大多少...，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。...安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale...根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale...第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。
前言 工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rem\em\css px\device px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC...此时，我们的设备像素仍然没有改变，还是1920*1080，css像素的数量也没有改变，但是css像素大小变了。 假设放大到200%， 那么1个css像素就等于两个设备像素， 以此类推。...通常在没有设置宽度的情况下，所有块级元素都占用其父级宽度的100%。所以body和html元素一样宽。...以下是它的6个属性： key value width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字...、3倍屏(ip6 plus)， 也就是设备像素比的值分别是2和3，即1个css像素等同于4个设备像素或者9个， 如图： ?
之前做移动端开发的时候，都是用rem对DOM元素进行大小设置的。每次用的时候都是去网上搜，然后copy到自己的项目中，没有真正理解网友的代码含义。这次终于认真的学习了一下。...由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中1css像素的大小在不同设备上看上去大小总是差不多。css规范中使用“参考像素”进行换算。...因为分辨率增大了，但是屏幕尺寸并没有增大，必须让1px代表更多的物理像素，才能让1px的东西在屏幕的大小与低分辨率的设备差不多。所以可以说px是一个固定的长度。 em：相对长度单位。...具体意思如下： initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 然后再设置html...，那么html的font-size算出来应该是200*(375/750)=100px；所以若在设计稿中有一个width为200px的box。
vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。...” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的...这些属性，分别表示宽度、高度、初始缩放比例、最大缩放比例、最小缩放比例、是否允许用户缩放 的四种方式： 父级div定义height 额外标签法：在有浮动的父级元素的末尾插入了一个没有内容的块级元素div 并添加样式clear:both。...[16] postcss-cssnext[17] PostCSS 是个什么鬼东西？
页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。 ? 常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。...本文是跟极客大学合作的前端学习讲座的一部分，详见文末说明。 一、空间居中布局 空间居中布局指的是，不管容器的大小，项目总是占据中心点。 ? CSS 代码如下（CodePen 示例）。...这两个属性的值一致时，就可以合并写成一个值。所以，place-items: center;等同于place-items: center center;。 同理，左上角布局可以写成下面这样。...flex: ; flex-basis：项目的初始宽度。 flex-grow：指定如果有多余宽度，项目是否可以扩大。...flex-shrink：指定如果宽度不足，项目是否可以缩小。 flex: 0 1 150px;的意思就是，项目的初始宽度是150px，且不可以扩大，但是当容器宽度不足150px时，项目可以缩小。
flex-grow ：负值无效，默认值为 1（初始值为0），指定了 flex 元素的伸长规则。...更多内容 flex-shrink ：负值无效，默认值为1（初始值为0），指定了 flex 元素的收缩规则。更多内容 flex-basis ：指定了 flex 元素在主轴方向上的初始大小。...flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; --- 3、换行 元素过多，超过flex父元素的宽度时...: wrap; /* 上面写法等同于下面写法 */ flex-flow: row wrap; --- 5、水平、垂直对齐 align-items ：对齐 grid 或 flex 行中的所有元素。... --- 四、参考文档 CSS 的弹性布局(flex)
margin-top：80px；等同于为父元素设置了margin-top：80px；（父元素的margin-top=0，最后的子元素的margin-top=80px，发生了外边距重叠），也等同于他们两个同时设置...（取绝对值大的）： Paste_Image.png 3、理解CSS中的margin auto 首先理解margin atuo的作用机制 ，先看一些事实例子： 1.元素有时候，就算没有设置width或height...因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足margin auto 用来填充剩余空间的条件，因为他根本就没有剩余空间。...，如果没有设置宽度值，我们通过设置margin可以改变它的尺寸： 的宽度设置为计算好的386.66666px，就可以实现没有间隙的两端对齐。主要利用了margin负值增加它的空间。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
