❞ 两个效果 翻盖效果 一个是屏幕慢慢打开的效果,在屏幕打开的过程中,「电脑图片」 是在屏幕中固定不动的,直到打开完毕或者关闭完毕的时候再让 「电脑图片」 随着滚动条滚动。 ?...缩放图片 开始时是一张全屏的图片,在滚动过程中慢慢变成另一张图片,接着这张图片以屏幕正中间为基准点慢慢缩小,在缩小的过程中,这张图是定在屏幕中央的,缩小到一定值的时候,图片随着滚动条滚动。 ?...当整个蓝色区域在红色区域中的时候,sticky 元素是没有粘性效果的(如图一); 当慢慢的向上滑的时候,蓝色的盒子超过了红色的滚动元素,那么 sticky 元素就会在蓝色的框中向下滑,实现粘性效果(如图二...笔者使用 react Hooks 来完成这两个动画效果,并使用 umi 快速初始化一个项目,具体的初始化步骤可以参考笔者写的 dva理论到实践——帮你扫清dva的知识盲点[10],里面详细介绍了如何使用脚手架快速搭建一个项目...❞ 缩放图片 缩放图片到屏幕这个动画我们可以用两个方式实现,一个是 「滚动视差」 实现,一个是 canvas 在滚动过程中实时渲染图片。 开始之前我们来看一下没有放大的之前图,如下: ?
(内联元素可不像块状元素这么霸道独占一行) 2、浮动模型 (Float) 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动 div{float:left;} div{float:right...绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素的布局就当绝对定位的元素不存在时一样,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。...因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。 浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧,文字内容会围绕在浮动元素周围。...由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响...为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 z-index值较大的元素将叠加在z-index值较小的元素之上。
此时阴影会在边框之内(即使是透明边框)、背景之上、内容之下。若不设置,即为默认投影方式是外阴影。默认阴影在边框外,即阴影向外扩散。...粘性定位sticky 粘性定位sticky是fixed和relative的结合,例如top:0,不为0是为relative,当距离父元素的顶部为0是转换为fixed,存在兼容性问题; div.sticky... 我是粘性定位!...视觉视口的宽度 = 理想视口宽度 / 缩放比例 参考链接:https://blog.csdn.net/leman314/article/details/111936863 13. px px的大小在不同屏幕上是一样的...计算BFC高度时,浮动元素也要参与计算。 41.2 如何创建BFC?
当它正常工作时,元素会"粘"在一定位置,但在滚动的其他部分,它又会停止"粘"住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题的根本原因,所以决定深入研究sticky定位。...这样做的原因是,当一个元素被赋予sticky定位样式时,粘性元素的容器是粘性元素可以粘住的唯一区域。这个元素没有其他元素可以浮动,因为它只能浮动在兄弟元素上,而作为唯一的子元素,它没有兄弟元素。....some-component{ position: sticky; top: 0px; } 粘性容器——是包裹粘性项目的HTML元素。这是粘性项目可以浮动的最大区域。...当你使用 position: sticky 定义一个元素时,自动定义了父元素为粘性容器! 记住这一点非常重要!容器是粘性项目的作用域,项目无法离开其粘性容器。...Absolute 定位 - 在粘附区域的末尾,元素停止并堆叠在另一个元素的顶部,就像绝对定位元素在 position: relative 容器内的行为一样。 贴在底部?
距离上一个元素的距离 或者是 距离父元素的content的距离。...元素 向旁边 紧贴 float元素(或者是 父元素的边) * float元素不影响 其他块级元素的位置 * float元素影响 其他块级元素 的内部文本 * (float元素)对父级元素的影响...留下自适应的空间:和两列布局类似,一列固定宽度 另一列随屏幕自适应。 (类似的思路,在屏幕顶部 给logo固定宽度 logo右侧的纯色背景 可以自适应)。...布局完成之后 针对不同大小的屏幕 给出不同大小的字号,那么其它元素就会跟着缩放。...,而是加一个伪元素 放到浮动元素的后面,从而让父元素 包含浮动元素。
常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流可以很方便的用来做局中,能对不同屏幕大小自适应。 在布局上有了比以前更加灵活的空间。...10、用纯CSS创建一个三角形的原理是什么?...(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)...生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:"."...fixed的元素是相对整个页面固定位置的,你在屏幕上滑动只是在移动这个所谓的viewport, 原来的网页还好好的在那,fixed的内容也没有变过位置, 所以说并不是iOS不支持fixed,只是fixed
对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block div 是一个标准的块级元素。...流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕,但同时也意味着放弃对页面某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间的位置关系都可能变化。...如果随意给元素添加内边距、边框,或者元素本身过大,导致浮动元素的宽度超过包含元素的布局宽度,那浮动元素就可能“躲”到其他元素下方。应该让这些内容元素自动扩展到填满栏的宽度。...就这么简单的几下,布局就显得更专业了。处理栏及其内部div的关键在于,浮动栏并设定栏宽,但不给任何内容元素设定宽度。要让内容元素扩展以填充它们的父元素——内部div。...总结 这篇文章我们介绍了用浮动的有宽度的元素来创建多栏布局、如何让固定布局在页面上居中以及让它们在一定范围内可以伸缩。同时也了解了如何使用内部div在浮动元素中生成间距,而又不会改变布局的总宽度。
设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、...它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。...具有BFC特性的元素可以理解为一个完整的盒子,这个盒子不会产生塌陷,无论内部元素如何变化,其外部元素不受影响 如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性: body 根元素 浮动元素...">我是一个左浮动的元素 我是一个没有设置浮动, 也没有触发 BFC 元素...style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素 <div style="width
我们使用浮动当然是因为一些要求我们的标准流无法完成 我们使用浮动最常见的应用场景就是将多个块级元素div等并排放置 (纵向排列标准流,横向排列找浮动) 初见浮动 那么我们来介绍一下浮动: 浮动的目的是创建浮动框...> 注意点 浮动布局的三个注意点: 浮动和标准流父亲搭配 一个元素浮动了,理论上其他兄弟元素也应该浮动 浮动的盒子只会影响后面的标准流盒子(即一个盒子浮动后..."ermao"> :after伪元素法 我们目前不需要掌握确切代码意思,这种情况相当于在最后创建一个盒子并实现...同理,因为一些要求我们之前学习的标准流和浮动无法完成 定位主要是为了让盒子自由移动并压住盒子或固定于某一位置 定位组成 定位 = 定位模式 + 边偏移 定位模式:指定一个元素在文档的定位方法 定位模式分为四种...:relative;} 它是相对于自己原本的位置进行移动 它在移动之后,在标准流中仍旧占有原本的位置(即移动之后,原本位置仍旧保留,其他标准流无法占用该位置) 它在移动之后,在其他位置时,属于覆盖在其他盒子之上
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。 11、用纯CSS创建一个三角形的原理是什么? 采用的是均分原理,把矩形分为4等份,这4等份其实都是边框。...清除浮动的方式: 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after。 27、你对line-height是如何理解的?...这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。...scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点。
由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...- 设置页面最大缩放值,是一个数字,可以是小数 user-scalable - 是否允许用户进行缩放,值为'yes'或者'no',yes表示可缩放,no表示禁止缩放 minimum-scale - 允许用户缩放的最小值...align-items 定义项目在交叉轴上如何对齐。...flex 布局优点: 可以实现 border-box 的效果。 添加弹性布局之后,元素不需要再使用浮动,清除浮动等。 同行元素设置边框、内外边距均不影响同行排列。...如:px像素,一个像素相当于我们屏幕的一个小点,屏幕实际就是由很多个像素点组成的,不同显示器像素大小不同。还有cm、mm、in等等。 相对单位:根据其参考物决定的,参照物大小改变时,它也会改变。
CSS Position 定位 #1 说明 #1.1 什么是Position塌陷 关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。...flow而存在,分别是 float,absolute ,fixed,但是在IE6中浮动元素也存在于normal flow中。...绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。 生成绝对定位的元素,其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。...---- 因为 content 的父元素 container 没有设置 position,默认为 static,所以找到的第一个父元素是 body(),可以看成是元素(content)相对于 body...#2.4 position: fixed 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。...(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)...(1)响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。...fixed的元素是相对整个页面固定位置的,你在屏幕上滑动只是在移动这个所谓的viewport,原来的网页还好好的在那,fixed的内容也没有变过位置,所以说并不是iOS不支持fixed,只是fixed的元素不是相对手机屏幕固定的...,如果没有,创建一个,然后,calc是css3的计算。
这个还是容易被忽视的,浮动也是一个大坑,有很多细节。 这12个知识点是我个人认为的,下面我们就来看看这12个知识点。 1.怎么让一个不定宽高的 DIV,垂直水平居中?...如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上...块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上 clear属性 clear属性:确保当前元素的左右两侧不会有浮动元素。...(不推荐使用) 方法三:让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。...像素 px 是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算 机系统的数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI。
# 1 前言 设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。...只要调整html标签的font-size,就能让所有使用rem单位的元素跟随着发生变化,而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。...举个实际的例子。设计师交付的设计稿宽度是750px,设计稿上一个div的标注尺寸是375px(宽度是设计稿宽度的一半)。...我们可以 设置html的font-size 为 100*屏幕宽度/设计稿宽度 在写CSS时设置 div 的宽度是 3.75rem (计算时用设计稿标注值除以100),边框宽度为1px 假设用户在逻辑像素宽度是...为什么要用100来乘以屏幕宽度/设计稿宽度?其实100只是随便选取的一个值,我们也可以随便其他任意值比如50。
好处:代码相对优雅,并且符合div+css布局网站的风格 坏处:要设置元素的宽度,控制不好,有可能换行展示,并且要对父元素清除浮动 --> .clearfix{ overflow: hidden...class="panel"> 三、元素宽高等比放大缩小 相信不少同学在移动端网页开发中,都插入过图片吧,试问一下,你的图片比例是否可以跟随屏幕尺寸的变化而不变?...你肯定会说,我只设置宽度为100%,高度不就自动按比例缩放了嘛?如果是非图片元素,又如何实现等比放大缩小? 那还不简单嘛?...我们要想实现等比缩放,只能有一个标准,比如都是宽度为标准的话,是不是就好办了?...看下面的margin, padding的设置 效果:屏幕宽度发生变化时,margin-left, padding-top的大小也在随之改变,这样我们就已经实现了元素的等比缩放了 原理:margin,padding
伪元素的本质是创建了一个可以设置内容和样式的虚拟容器。 可以同时使用多个伪类,但只能使用一个伪元素。 CSS选择器优先级、权重计算 CSS选择器的优先级 选择器的优先级分为两种:1....BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。...浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠 浮动元素的 margin 在垂直方向上也不会发生 margin 折叠,即使和它相邻的子元素也不会...这种现象被称为浮动(溢出)。 工作原理 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象) 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 如何清除浮动 1....当一个元素在不同的浏览器中有不同的默认值时,normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。
领取专属 10元无门槛券
手把手带您无忧上云