但是 padding、border、margin 等属性的情况又不一样 1、子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的...left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。...2、子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。...border-radius 为百分比，则是相对于自身的宽度 缺点： 计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。...四、vw、vh 响应式布局 vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。
常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%； 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...高度塌陷 原因 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签，设clear:both 父级添加overflow:hidden 使用...;右边margin-left（定位+margin） 父元素display:flex；右边元素flex:1（flex） 三栏布局 左元素左浮 右元素右浮，中间设置margin-left和margin-right...vw和vh：都是针对当前浏览器窗口大小而言，1vw就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。
父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。 代码实现 <!...= parseInt(pageWidth/columns); //得到item的宽度 $(".item").width(itemWidth); //设置到item的宽度...height+30;//设置30的距离 } }); } //clientWidth 处理兼容性 function getClient()...然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度，来容纳子元素。...，可以使用 column 多栏布局和 flex 弹性布局。
设置宽或高 100% 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。...所以往往我们会在项目中使用第 3 种方式，即设置高度或者宽度。它会保持原有比例进行缩放。 ?...对于超出容器的图片我们可以使用 overflow: hidden把超出部分隐藏。图片得到了好的展示效果。但相应的我们也损失了图片的一部分可视区域。...看到上面你实现的思路是什么？可以思考几秒，接下来一起来看这些实现方式中有没有和你一思路一样的。 思路1. JS 计算列数 关键思路： 首先设置列宽度，然后计算能够展示的列数。 向每一列中添加图片。...Flex布局 首先给图片一个固定高度，然后利用flex-grow的比例分配的特性 给图片设定object-fit属性让其保持比例充满容器 <div class="waterfall-<em>height</em>-css
设置宽或高 100% 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。...所以往往我们会在项目中使用第 3 种方式，即设置高度或者宽度。它会保持原有比例进行缩放。 ?...对于超出容器的图片我们可以使用 overflow: hidden 把超出部分隐藏。图片得到了好的展示效果。但相应的我们也损失了图片的一部分可视区域。...看到上面你实现的思路是什么？可以思考几秒，接下来一起来看这些实现方式中有没有和你一思路一样的。 思路1. JS 计算列数 关键思路： 首先设置列宽度，然后计算能够展示的列数。 向每一列中添加图片。...JS计算缩放 首先给定一个基准高度 图片获取基准高度下的宽度，然后计算每一行能够放入多少张 此时每一行图片肯定会小于容器宽度，然后这一行进行缩放到容器大小。在重新计算放大后的高度。
当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解，如何创建 BFC？...解决高度塌陷问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置overflow:hidden。 3....创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 9. 如何设置小于 12px 的字体？...相对于父元素，rem相对于子元素 • vw/vh: 视图窗口单位，vw 宽度，vh 高度，还有 vmin 和 vmax 两个相关单位 20. px，em, rem 的区别以及使用场景？...父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边
文档声明中，内联元素的所有解析和渲染表现就，如同每个「行框盒子」的前面有一个空白节点一样，这个空白节点「永远透明，不占据任何宽度」。...padding 和 border 值 IE 怪异盒子模型 盒子总宽度 = width + margin; 盒子总高度 = height + margin; 也就是，width/height 包含了...padding 和 border 值 更改盒模型 CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的「总宽度和总高度」 box-sizing: content-box|border-box...结合使用，用来限制在一个块元素显示的文本的行数(n) -webkit-box-orient: vertical：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 overflow: hidden...flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩 flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别 当设置为
设置“null”为透明 canvas null 现有的“画布”元素用来作为绘图的基础 foreignObjectRendering false 如果浏览器支持的话是否使用ForeignObject渲染...useCORS false 是否尝试使用CORS从服务器加载图像 width Element width 画布的宽度 height Element height “画布”的高度 x Element x-offset...，这可能会影响媒体查询等事情 windowHeight Window.innerHeight 渲染“元素”时使用的窗口高度，这可能会影响媒体查询等事情 如果你希望排除某些元素被渲染，你可以添加data-html2canvas-ignore...原理就是讲canvas画布的width和height放大两倍。...支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放 canvas.height = height * scale; //定义canvas高度 *缩放
但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的，这点表现的是相对性 em是一个相对长度单位，具体的大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为...参考回答： vw 和 vh 是 CSS3 新单位，即 view width 可视窗口宽度 和 view height 可视窗口高度。...1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。 3....触发 BFC 的方式有很多，常见的有： 设置浮动 overflow 设置为 auto、scroll、hidden positon 设置为 absolute、fixed 常见的 BFC 应用有： 解决浮动元素令父元素高度坍塌的问题...清除浮动的方法 参考回答： clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式：{clear:both;height:0;overflow:hidden;} 给浮动元素父级设置高度
默认宽度为内容宽度，不可设置宽高，同行显示 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示 list-item 像块类型元素一样显示，并添加样式列表标记 table 此元素会作为块级表格来显示...块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制...内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...# 关于媒体查询 是什么 媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成，例如宽度、高度和颜色 媒体查询在 CSS3 中出现，允许内容的呈现针对一个特定范围的输出设备而进行裁剪...+ content + padding-right + border-right） 现代浏览器默认使用 W3C 的标准和模型，可以在 CSS3 中使用 box-sizing 自定义 box-sizing
Element.scrollWidth 这也是一个元素内容宽度的只读属性，包含由于溢出导致视图中不可以见的内容。 原理上和scrollHeight是同理的，只不过这里是宽度而非高度。...如果存在了滚动条，client只会计算出当前元素展示出来的高度/宽度，而scroll不仅仅会计算当前元素展示出的，还会包含当前元素的滚动条隐藏内容的高度/宽度。...clientWidth/height + [滚动条被隐藏内容宽度/高度] = scrollWidth/Height Element.scrollLeft/scrollTop Element.scrollTop...scrollLeft/Top在日常工作中是比较频繁使用关于操作滚动条的相关api，他们是一个可以设置的值。根据不同的值对应可以控制滚动条的位置。...element.getBoundingClientRect()返回的 height 和 width 是针对元素可见区域的宽和高(具体尺寸根据 box-sizing 决定)，并不包含滚动条被隐藏的内容。
hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。...box-sizing属性 box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit content-box：宽度和高度分别应用到元素的内容框...，在宽度和高度之外绘制元素的内边距和边框。...【标准盒子模型】 border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】 inherit：继承父元素的 box-sizing 值。...（4）flex布局使用justify-content:center 垂直居中 利用 line-height 实现居中，这种方法适合纯文字类 通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过
自己当前元素脱离文档流后，不再能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的子元素。...子元素设置固定高度时，与flex-start效果一样。 align-content:stretch;属性是多行子元素默认值，在不设置固定高度的时候，侧轴方向高度自动平分父容器。...子元素设置固定高度时，与flex-start效果一样。 border边框使用 box-sizing设置 content-box： padding不被包含在定义的width和height之内。...border-box设置 padding和border被包含在定义的width和height之内。...对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 拉伸和压缩 响应式布局
为了方便浏览器自动计算某些样式，需全局设置box-sizing:border-box，编码前请引入笔者整理的reset.css。 主体布局 「主体布局」指在大部分情况下通用且具备统一特征的占位布局。...display:flex默认会令子节点横向排列，需声明flex-direction:column改变子节点排列方向为纵向排列；顶部和底部高度固定，所以主体需声明flex:1让高度自适应。...相同 中间列放首位且声明其宽高占满父节点 被挤出的左右列使用float和margin负值将其拉回与中间列处在同一水平线上 不同 圣杯布局：父节点声明padding为左右列留出空位，将左右列固定在空位上...节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。...1vw表示1%视窗宽度 1vh表示1%视窗高度 1vmin表示1%视窗宽度和1%视窗高度里最小者 1vmax表示1%视窗宽度和1%视窗高度里最大者 视窗宽高在JS里分别对应window.innerWdith
div，div内可以任意设置文本样式和图片，借助userSelect禁止用户选中文本水印； const addDivWaterMark = (el, text) => { const { clientWidth...可以像shadow DOM写入style样式和水印节点（可以使用背景或者div形式） shadow DOM内部实现的样式隔离不用担心写入的style影响页面其他元素样式，这个特性在微前端的实现中也被广泛使用...opacity 设置很低时，视觉上基本无法看到水印内容，但是通过修改画布的 rgba 值，可以使水印内容显示出来。...用画布和水印后的画布绘制的像素进行ArrayBuffer对比，在存在水印像素的位置（水印画布透明度不为0）修改图片画布的奇偶，这样通过上面指定色值和奇偶去解码时，修改的文本像素就会被显示出来； const...（变换域）中隐藏信息要比在空间域（上面得到的像素颜色的ArrayBuffer）中隐藏信息具有更好的防攻击性。
CSS布局相关及Flex详解，提及到使用Flex来完成一侧固定大小，另一随浏览器大小自动缩放。今天开发中，有这样一个需求，在两块内容中间增加一条线，然后拖拽线，可以自动调整两侧区域。...Element属性 说明 实例值 clientHeight、clientWidth （只读）该元素它内部的宽度、宽度 300（border-box） clientTop、clientLeft （只读）该元素距离它左边界的宽度...、宽度 0 scrollHeight、scrollWidth （只读，整数）包括由于溢出导致的视图中不可见内容 300 scrollLeft、scrollTop 读取或设置元素滚动条到元素左边、顶部的距离...0（内部无滚动条） - clientHeight：可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 - scrollHeight：返回整数，如果需要小数使用...HTMLElement属性 说明 实例值 offsetHeight、offsetWidth （只读，整数）该元素自身可视高度、宽度加上上下border的宽度 300 offsetLeft、offsetTop
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。... 这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。...宽度为20px, margin宽度为30px 5.DOM属性之 OffsetWidth / ClientWidth / ScrollWidth 6.边距重叠 什么是边距重叠 如下图，父元素没有设置margin-top...，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距。...,table-cell,table-caption,flex,inine-flex display: inline-block; 方法三 添加一个父元素包裹，并设置overflow为scroll/hidden
3.如何让元素支持height:100%效果 知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box 方法如下： * 1.设置显示的高度值 *...2.使用绝对定位 复制代码 4.任意高度元素的展开收起动画(max-height/min-height) 1.min-height/min-width的初始尺寸为auto, max-height/max-width...要想实现如上图所示的展开收起动画，就可以使用max-height/min-height： .nav > .sub-nav{ max-height: 0; overflow: hidden...对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局...父元素设置border-top/bottom值 父元素设置padding-top/bottom值 父元素设置高度 复制代码 空块级元素margin合并
>= clientHeight； offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的border box顶部的距离。...offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的border box顶部的距离。 IE7 注意：IE7中，滚动条的宽度是17个像素。...offsetLeft = 元素border box左上角到父容器（不是offsetParent）的border box左上角的距离。...offsetLeft = 元素border box左上角到父容器（不是offsetParent）的border box左上角的距离。...同理 clientWidth、offsetWidth 和scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
1 2列布局 2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。...属性 通过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。...例如我们可以添加如下样式： .content{ min-height:calc(100vh-footer的高度); box-sizing:border-box; } 从而这个问题就解决了，但是如果页面的...每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。 使用flex布局 这种方法就是利用flex布局对视窗高度进行分割。...粘性布局（sticky） 粘性布局是什么呢？我们先来看看效果演示 没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 吸附效果。 标题行设置了背景色。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
