第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。 13 常见的兼容性问题？...hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。...float 的元素区域重叠 计算 BFC 的高度时，浮动子元素也参与计算 文字层不会被浮动层覆盖，环绕于周围 应用: 阻止margin重叠 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 ---- 页面导入样式时，使用 link 和 @import 有什么区别 ？...父级 div 定义 overflow: hidden， 原理：必须定义 width 或 zoom: 1，同时不能定义 height，使用 overflow: hidden 时，浏览器会自动检查浮动区域的高度...;/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/ } .header{ height:50%...---- 有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度 ？...外层 div 使用 position：relative； 高度要求自适应的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0 ----
对父元素 css_demo 设置 overflow: scroll， 当元素内容超出页面时滚动。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。...结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。 如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏， 因此屏幕底部被切断。...更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部， 因此用户体验是很糟糕的。...当页面加载时，将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。 如果地址栏是可见的，那么 window.innerHeight 是全屏的高度。
当然，不止是省了一些切图的花费，也是一种很有效的前端开发方法，尤其是针对那些设计花哨，使用HTML和Css还原度较难，并且实际上也并没有那么多可操作元素的设计。 ...来框选图片中的input或者按钮区域，所以为了保持原有图片的样式，就需要把实际上的input或者button的区域的display设置为none。...当然要使用Javascript设置，当input和按钮区域获得焦点时，显示input和button了。...其实操作方法也是一样的，只要注意调整好空的div的位置和宽高度与图片中的设计相吻合即可。 可能有人要问了，为什么要使用百分比来作为位置和宽高度的大小度量呢？这当然是一种响应式的设计。...如果使用像素的话，那么只能适用于一种屏幕宽高比和分辨率之下，使用百分比的话就可以在较多种类的屏幕特点之下仍然保持与设计的高还原度。
视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...屏中被放大为 100 *100 时就不会模糊了。...-- 单位：长度、百分比、cover、contain cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（不考虑图片是否有超出部分） contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域...使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...注意他们要加小括号 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 为了防止混乱
:silver; position:absolute; top:-5px;”>测试top 上面是一个段落P包含在一个DIV内，可以看到P的top设置为-5px后，它的上边距超过了容器...> container.scrollTop = 12; 这一段文本在这个100*100的DIV内无法完全显示，所以设置了overflow为auto，它会出现一个上下方向的滑动框...因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以...==> 页面对象高度（即BODY对象高度加上Margin高） Opera为： document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上...clientHeight:都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
length 使用 px、cm 等单位定义高度。 % 基于其包含块的百分比高度。 注意： 设置html,body {height: 100%;}，其高度为浏览器可视高度。...元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高起作用...设置html的height:100%，就是浏览器的可视高度！ 注意： body为100*100，div1为70*70，继承的是父级元素内容高度，不包括border和padding！...回头，容器高度变化了，里面的绝对定位元素依然高度自适应。这是很赞的特性，因为如果页面很复杂，避免使用position: relative会让你少去很多z-index混乱层级覆盖的麻烦。...').scrollHeight为350px； 如果子元素高度大于元素设置高度，实际高度则会被撑开！
我们通常将line-height设置为1，使其文字上下不存在行间距，便于控制高度！ 行高决定内联盒子高度；行间距墙头草，可大可小(设置负值)，保证高度正好等同于行高。...; width: 100%; } 块元素默认占据一行，无需设置width: 100%，设置后反而会失去流动性（margin/border/padding和content内容区域自动分配水平空间的机制...class="ao"> 最大宽度 最大宽度实际等同于包裹性元素设置white-space:nowrap;声明后的宽度。...【PS：脱离文档流的方式：float浮动；absolute或fixed定位】 div { height: 100%; position: absolute; } 注意：绝对定位的高度百分比计算是相对于...BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。如果一个元素具有了BFC，内部子元素再怎么翻江倒海，都不会影响外部的元素。
vw： 相对于视窗的宽度，视窗宽度是 100vw； vh： 相对于视窗的高度，视窗高度是 100vh； vmin： vw 和 vh 中的较小值； vmax： vw 和 vh 中的较大值； vw 和百分比的区别是...减少使用 @import，建议使用 link，因为 link 在页面加载时一起加载，import 是页面加载完成之后再加载。...尽量减少页面重排、重绘。 属性值为 0 时，不加单位。 不使用 @import 前缀，它会影响 css 的加载速度。 可维护性： 抽离 css, 提高可复用性。 样式与内容分离, 提高可维护性。...--清除浮动--> 父级添加overflow属性，或者设置高度 父级添加伪元素::after来清除浮动 .parent:...而当页面滚动超出目标区域时，它以固定定位呈现，否则以相对定位呈现。
每个导航菜单项都是一个链接，使用display:inline-block进行横向排列，宽度为 100px，高度为 60px。链接的文本颜色为白色，当鼠标悬停时，背景颜色会变为橙色。...该类将元素的宽度设置为 1300px，高度设置为 700px，并使用margin: 0 auto;实现水平居中。...然后，在 HTML 部分，我们创建了一个使用.header类的元素，作为页面头部元素。请将"background-image-url"替换为你实际的背景图像 URL。...然后，我们使用两个div元素创建了两层，每层包含三个card元素。每个card元素代表一张卡片，它的宽度为 380px，高度为 500px，并使用margin和padding设置了上下边距。...footer 元素设置了宽度、高度、背景颜色和文本颜色，并使用绝对定位将其放置在主要内容下方 30px 处，且水平居中。请确保将 "image-url.jpg" 替换为你实际的背景图片路径。
，比如文字块 百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。...1、利用百分比实现填充全屏 为了让元素设置height：100%生效，并且正好为窗口高度，则需要给html和body元素以及它所有的父元素都设置高度100%。...100%; width:100%"> 填充全屏啦 在使用height: 100%;时需要注意的一些事项 Margins 和...让我们缕缕，用height百分比显然不行，height百分比是以父元素高度为基准的，而我们需要以宽度为基准来设置高度。...因此使用这种方法时，应将JS代码放入head头部中并且在CSS引入之前。
important 比内联优先级高 4 CSS优先级算法如何计算？ 元素选择符： 1 class选择符： 10 id选择符：100 元素标签：1000 !...第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。 13 常见的兼容性问题？...BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
可以使用CSS的box-sizing属性来改变盒子模型的计算方式。将box-sizing设置为border-box可以将内边距、边框和外边距的宽度和高度计算到盒子的总宽度和高度中。...可以将盒子的高度设置为0，然后使用padding-top或者padding-bottom属性来占据高度，从而实现一个固定宽度，自适应高度的盒子。...可以使用CSS的margin属性来实现盒子在其容器中水平居中。将盒子的左右外边距设置为auto，就可以使盒子在容器中水平居中。...CSS盒子模型计算盒子宽度和高度时，默认情况下是包括了所有这些部分的大小。可以通过box-sizing属性来改变盒子的盒模型，让它只包括内容区域和内边距的大小，或者只包括内容区域的大小。...可以使用CSS的@media查询和相对单位（如百分比和em）来实现一个响应式的布局。
使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给 scroll-view 添加 white-space: nowrap; 样式。...微信小程序文档中 scroll-view 说明可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。...，然后中间部分在 scroll-view 标签外面再套一个div，这个div 的 flex 设为 1 自动设置高度，然后 scroll-view 的 height 设为 100%。...一般用在弹窗中比较多，设置一个固定高度确实可以实现，但是内容较少时会出现大量留白，用纯 css 我是没找到实现方式，因为需要动态获取到内容的高度才知道要给 scroll-view 设置多高。...() { // 实际弹窗中应该是在弹窗显示时去计算高度，此处仅作示例，获取不到节点信息可以放到 $nextTick 中去获取 this.calcHeight() }, methods:
背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？...box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。... ③在游览器上模拟的320px,375px和414px尺寸下，显示的效果图： 二、盒模型的其他属性 （1）margin，padding设置为百分比形式...（6）框的高度 框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px或者em）,它会比在页面上默认是100%高度更实用。 ...： 这类情况通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式。
box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。...时，那么content会随着实际的宽度进行自动缩放；) （3）来看看实际的例子： ①设计稿如下所示： ②实际代码： 本例子中，采用的是flex...:center; } ③在游览器上模拟的320px,375px和414px尺寸下，显示的效果图： 二、盒模型的其他属性 （1）margin，padding设置为百分比形式...（6）框的高度 框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px或者em）,它会比在页面上默认是100%高度更实用。...： 这类情况通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式。
每个导航菜单项都是一个链接，使用display:inline-block进行横向排列，宽度为 100px，高度为 60px。链接的文本颜色为白色，当鼠标悬停时，背景颜色会变为橙色。...该类将元素的宽度设置为 1300px，高度设置为 700px，并使用margin: 0 auto;实现水平居中。...然后，在 HTML 部分，我们创建了一个使用.header类的元素，作为页面头部元素。 请将"background-image-url"替换为你实际的背景图像 URL。...然后，我们使用两个div元素创建了两层，每层包含三个card元素。每个card元素代表一张卡片，它的宽度为 380px，高度为 500px，并使用margin和padding设置了上下边距。....footer 元素设置了宽度、高度、背景颜色和文本颜色，并使用绝对定位将其放置在主要内容下方 30px 处，且水平居中。 请确保将 "image-url.jpg" 替换为你实际的背景图片路径。
加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性：link 是 html 标签，没有兼容问题。...• 定义： • Box: CSS 布局的对象和基本单位，一个页面由很多个 box 组成，这个 Box 就是我们常说的盒模型 • Formatting context: 块级格式化上下文，页面中的一个渲染区域...计算 BFC 的高度时，需要计算浮动元素的高度 4. BFC 区域不会与浮动的容器发生重叠 5. BFC 是独立的容器，容器内部的元素不会影响外部元素 6....使用关键的选择器，不要逐层进行选择 • 渲染性能 1. 慎重使用浮动和定位 2. 尽量减少重绘和回流的发生 3. 删除空规则,也就是预留样式->{} 4. 属性值为浮点值时，省略前面的 0 5....，任何设备的物理像素都是固定的 • 像素px: 页面布局基础，分为css 像素和物理像素 • 百分比%: 实现响应式效果 • em和rem: 相对于 px 更具灵活性，它们都是相对长度单位，区别为，em
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
