经常浏览淘宝、京东等一些商城网站，都会看到各种各样的页面交互效果，放大镜交互效果在商城网站中算是比较常见的。...从效果图中可以看出，无非就是操作两张内容相同，但大小不同的图片。通过控制比例来实现放大的效果。但是需要注意的是，两张照片的宽高比必须是成比例的。 原理结构图 ?...大家可以先根据原理图给出的信息先思考一波，然后咱们接着继续。...- (mov.offsetWidth / 2); //获取移动时move块距父级的顶部距离 4.临界值判断，当move的移动距离超出了box的范围时，需要限制其最大移动值与最小移动值。...- mov.offsetHeight; 5.根据move块相对于box的占比与放大区相对于大图的占比进行比例计算，得到显示图片的显示位置。
1.所有的文档元素（标签）都会生成一个矩形框，它描述了一个文档元素在网页布局汇总所占的位置大小。 2.因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。...# 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并...允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。...也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!...important都具有最大优先级。
比如，display: block 块级元素默认高度会霸占父节点 100% 宽度，而高度默认会由子内容决定，类似于 Android 中的 wrap_content。...紧接着，继续处理 div3 元素，因此之前 div2 块级元素已经霸占了第一行了，所以此时是在第二行处理 div3 元素，发现它也是一个浮动元素，便以当前位置将其抽离到另一层面绘制。...继续往下处理，如果发现的还是浮动元素，因为所有的浮动元素都处理同一层面，所有的文档流元素都处于一个层面，所有浮动元素 div4 并不会跟 div3 发生重叠，而是贴着它。...也都是通过 left, top, right, bottom 来根据参考掉调整位置。 releative 相对定位 相对定位并不是相对于父元素，而是相对于该元素原本所应该在的位置作为参考点。...absolute 另外，有点需要注意下，绝对定位的元素，因为其已经从文档流中抽离，因此就不存在什么行内元素、块级元素的限制了。大小就是根据设置的宽高、位置就是根据参考点进行调整后进行布局绘制。
id选择器和类选择器最大的不同在于 使用次数上。 通配符选择器 通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。...例如： p { font-size: 14px; /* 所有的字体是14像素大小*/ } 标签显示模式（display） 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行...也就是说靠近元素的样式具有最大的优先级， 或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重 如何以及样式位置的远近，!...盒子模型（Box Model） 所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。...元素的大小完全取决于定义的大 小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。 总结： 浮动 —> 浮动的目的就是为了让多个块级元素同一行上显示。
优点 页面中的各元素的宽高都会依照百分比进行变化。 ...缺点 计算困难 需要计算相对应的百分比值，最主要的是百分比往往只用于设置狂高， 在设置其他元素时，根据的对象百分比不同，比如我们在设置内外边距的时候，是根据 父级的宽度设置的，更有像border-radius...缺点 没特别大的缺点。 em/rem 使用方法 em设置字体是根据父级字体的大小设置倍数，rem设置字体是根据固定的根元素字体大小设置倍数。...="c">div> div> 对于em单位 是根据父元素的字体大小的倍数设置的，， 父元素设置为32px，子元素设置为1em，那么结果就是32px（父元素修改成了32px...）， 宽高设置也是如此，但还是有些属性不同，比如内边距 设置成1em，他是根据最近的字体大小为依据的，他不用必须是父级，同级对字体的修改，也可以用在边距上。
; } 可以更改整个body的字体，也可以只更改某一行的字体，以及字体的大小。...1.8float（浮动） 在css中任何元素都可以浮动，浮动的特点： 浮动的框可以左右移动，直到碰到网页的边框或者另一个浮动的框，浮动的框可以覆盖固定的框，而且浮动的框会把原来框占有的位置让出来。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...已经定位过指的是这个标签的position不是static状态。 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...class="c1"> div> div class="c2">div> 1.10.4固定定位（fixed） 固定定位实现的功能是比如侧边功能调，不管你怎么滑动网页，它都会固定在某一个位置不变
p { font-size: 14px; } 当前节点所有匹配的 Rule 都放入结果集合之后，先根据优先级从小到大排序，如果有优先级相同的 Rule，则比较它们的位置。...important 的所有声明，之后再添加到结果集合的尾部；因为这个集合是按照优先级从小到大排序好的，所以 !important 的优先级就变成最大的了。...因为有些布局信息需要子节点先计算，之后才能通过子节点的布局信息计算出父节点的位置和大小；例如父节点的高度需要子节点撑起。如果子节点的宽度是父节点高度的 50%，要怎么办呢？...数值类型 所有相对的测量值（rem、em、百分比...）都必须转换成屏幕上的绝对像素。如果是 em 或 rem，则需要根据父节点或根节点计算出像素。如果是百分比，则需要乘以父节点宽或高的最大值。...，滚动条也包含在了盒模型中，但是滚动条的大小并不是所有的浏览器都能修改的。
元素的定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 父级没有定位 父级有定位 子绝父相 定位的扩展 绝对定位的盒子水平/垂直居中 固定定位...绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。 # 父级没有定位 若所有父元素都没有定位，以浏览器为准对齐(document文档)。...因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。 父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 这就是子绝父相的由来。 的盒子也可以水平或者垂直居中，有一个算法。 首先left 50%,top50%父盒子的一半大小。 然后外边距退回自己宽度及高度的一半值就可以了 。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 固定定位的元素跟父亲没有任何关系，只认浏览器。
$(’#id’) 获取指定ID的元素 全选选择器 $(’*"’) 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器...parent() $(“li”).parent(); 查找父级 children(selector) $(“ul”).children("“li”) 相当于$(“ul>li”)，最近一级（亲儿子) find...$('div').hide(); //页面中所有的div都会被隐藏 2.2.3 链式编程 $(this).css('color', 'red').sibling().css('color', '');...如果参数是数字，则修改样式 参数不写单位 4.4.2 jQuery 位置操作 offset()设置获取元素偏移 获取的位置是相对于文档的偏移坐标，与父级没有关系 传入的参数是一个对象 //获取偏移量...$('div').offset() //更改位置 $('div').offset({ top: 200, left: 100 }) position()获取带有定位的偏移 获取的位置是相对于带有定位的父级元素
div> div>1div> div>2div> div>3div> div> 上面代码中，最外层的 div...除了设置绝对值之外，也能设置百分比数（根据父级大小的百分比）等。...父级容器 用多个100px的大小填满宽度*/ grid-template-columns: repeat(auto-fill, 100px); /* fr 是一个相对单位 大家可以理解为所占的份数...grid-auto-flow: column; 这样就变成了列排序 justify-items 属性，align-items 属性，place-items 属性 justify-items 属性设置所有单元格内容的水平位置...，在100px*100px内的方格内水平垂直居中，整个网格 也水平居中在了页面中，如果不设置红色方块大小的话 里面的文字将会水平垂直居中。
也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!...所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。...元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。...注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。 父级没有定位 若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。...; 行高会继承 文字性质的，比如 颜色、文字大小、字体、行高等会继承父级元素 浮动元素、固定定位，绝对定位会模式转换 具有行内块特性，比如一行放多个，有高度和宽度，如果没有指定宽度，则会根据内容多少撑开
contain 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 background-position属性：该属性设置背景图像的起始位置，其默认值是：0% 0% 值 说明 left top...display 属性：display:flex;开启弹性盒，属性设置后子元素默认水平排列 flex-direction属性：flex-direction 属性指定了弹性子元素在父容器中的位置 flex-direction...（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） 子元素上的属性 flex：flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 div class="flex-container...，对布局是不利的，所以我们必须清除副作用 解决方案有很多种： 父元素设置高度 受影响的元素增加clear属性 overflow清除浮动 伪对象方式 overflow清除浮动 如果有父级塌陷，并且同级元素也收到了影响...绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位 固定定位永远都会相对于浏览器窗口进行定位
行内元素 与 块级元素 ❝在 HTML4 中，元素被分为两大类：inline 行内元素 和 block 块级元素 「行内元素」: 一个 行内元素只占据它自身的空间大小。...根据 DOM 树 和 CSSOM 规则树 构建生成 渲染树, 浏览器生成渲染树后，会很根据渲染树进行布局，确定 元素的大小 位置。 布局阶段结束后就是绘制内容显示在页面上。 ❞ 10....页面初始渲染，这是开销最大的一次重排 添加/删除可见的DOM元素 改变元素位置 改变元素尺寸，比如边距、填充、边框、宽度和高度等 改变元素内容，比如文字数量，图片大小等 改变元素字体大小 改变浏览器窗口尺寸...元素的位置在屏幕滚动时不会改变。 ❞ sticky 粘性定位 ❝元素根据正常文档流进行定位，然后相对它的最近滚动祖先 和 最近块级祖先 。...如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸. . em的值并不是固定的； . em会继承父级元素的字体大小。
并且 偏移 不会改变元素自身在文档流中 占据的空间(也就是说，其后的元素的位置 仍是依照 元素进行偏移之前的位置 进行排布)。设置relative 不会使元素 脱离文档流。...absolute元素的参照位置 是参照 距离元素自身 最近的 父级absolute/relative元素 进行定位的....元素 向旁边 紧贴 float元素(或者是 父元素的边) * float元素不影响 其他块级元素的位置 * float元素影响 其他块级元素 的内部文本 * (float元素)对父级元素的影响...3. rem: 使用html{font-size: 20px;}指定rem的单位，然后media根据查询到的设备宽度，给html{font-size: 20px;}字体大小设置不同的值。...间隙原因：字符间距 解决方案：1.消灭空白字符：注释掉 标签之间的空白字符 2.消灭字符间距：把父级元素的字体大小设置为0，再设置元素自身的字体大小。 4.
注意设置 absolute 属性的元素在标准流中不占位置。 **fixed:固定定位。**位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。...对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。...3.3 清除浮动的方法 方法1：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。...，让父级DIV能够获取高度。...（不推荐使用） 方法三：让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。
1,我们还得有个知识点，当后代没有自己的选择器，会继承父级的样式中的某些属性，比如 div{ color: blue; } div>...> 此时div标签下的所有标签前的文本颜色都会继承div标签的文本颜色。...，一般中文到达bold就是最大，并且一般中文没有细体 font-size:值 控制字体大小 值为数字，后面跟上单位px，网页上的默认为16px font-family:值 控制字体 值为所有字体类型...3，absolute（绝对定位） 设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的...，父级没有，就找父级的父级），若都没有，那它的位置相对于body ?
，下面是一个示例： 以上代码通过设置宽度和背景色改变了其 div 的一些属性，但是我们还是可以发现，这个div 即使 更改了其宽度，也是独占一行。...、参考值等进行设置，例如像素值设置方式： p{ font-size: 60px; } 对应的父级字体大小参考值设定如下： ...p{ font-size: 2em; } 以上父级字体大小参考值指的是，例如父级设置一个字体为60px，那么在此处设置为 2em也就是 2*60，也就是一个字体大.../img/img10.jpg" /> div> 其中在css 中 width 表示设置宽度，这里的值是 10%，表示给予当前图片父容器的宽度给予到这个 img 图片，也就是说这个图片的宽度为整行的...，显示如下： 3.1 阴影 设置图片的阴影使用属性 box-shadow，box-shadow有4个需要设置的值，分别是 x 位置/大小、y 位置/大小、阴影发散大小、颜色，例如：box-shadow
3.4 权重相同则就近原则 权重相同时，CSS遵循就近原则，即靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最高。 所有都相同时，声明靠后的优先级最大。 3.5 !...important命令最大优先级 CSS定义了一个!important命令，该命令被赋予最大的优先级，也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。...3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对其显示。 4.浮动根据元素书写的位置来显示相应的浮动。...（5）绝对定位 绝对定位是将元素根据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素进行定位。...当对元素设置为固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
透明背景div> div> 背景图片 background-image: url(...); 比 image 更方便控制位置(图片在盒子中的位置) 注意: url 不要遗漏. url 可以是绝对路径...div> div> 背景位置 background-position: x y; 修改图片的位置....宽度默认是父级元素宽度的 100% (和父元素一样宽) 是一个容器(盒子), 里面可以放行内和块级元素....任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局. flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式....在 Flex 容器中，所有直接子元素都会自动成为 Flex 项目。在一个 Flexbox 布局中，您只需要对容器应用 display: flex;，即可激活 Flexbox 模式。
获取元素节点信息常用属性： 名称 描述 innerHTML 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合...> 答案：parentNode 观察元素结构可知，div元素为span元素的父级的父级，使用parentNode即可返回指定节点的父节点，父级的父级即为 .parentNode.parentNode...（4）获取div内所有p元素和span元素，请补全横线处代码。...一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 resize 窗口大小改变时触发 scroll 元素内发生滚动时触发 （1）实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半...（4）div元素的字体大小为________px，补全代码。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
