[阿里航旅的面试题][38] 39.简单说一下 css3 的 all 属性。[39] 40.为什么不建议使用通配符初始化 css 样式。...详细资料可以参考：《简单了解 CSS3 的 all 属性》[85] 40.为什么不建议使用通配符初始化 css 样式。...第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整 个页面的布局都会显示错乱。...第二个视口指的是视觉视口，visual viewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。...第三个视口是理想视口，由于layout viewport一般比visual viewport要大，所以想要看到整个页面必须通过拖动和缩放才 能实现。
class="device tablet">div> div> 视口单位也可以用于grid- *属性，也用于border，border-radius和其他属性。...2.添加 margin-left: -50vw 为了使图像居中，我们需要给它一个负的边距，其宽度为视口宽度的一半。 ?...使用时，间距将基于视口宽度或高度，这对于使布局更具动态性可能很有用。 模态框 对于模态，我们需要将它们从视口顶部推入。 通常，使用top属性进行此操作，并使用百分比或像素值。...10vh; } .page-header h2 { margin-bottom: 1.5vh; } 使用vh单位用于页面标题的 paddding，以及标题下方的边距。...流行的顶部边框 你知道大多数网站使用的顶部边框吗？ 通常，它的颜色与品牌颜色相同，这会赋予一些个性。 ? 我们支持边框的初始值为3px。 如何将固定值转换为视口对象？下面是如何计算它的等效的vw。
Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas 不支持鼠标键盘等事件。 SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。...大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。...四、vh 与 vw 视口 在桌面端，指的是浏览器的可视区域； 在移动端，它涉及 3个 视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport...视口单位中的 “视口”，桌面端指的是浏览器的可视区域；移动端指的就是 Viewport 中的 Layout Viewport。...视口的尺寸 不过由于 vw 和 vh 是 css3 才支持的长度单位，所以在不支持 css3 的浏览器中是无效的。
1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。...sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。...4、可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式。 27、CSS3新特性有哪些？...这种合并外边距的方式称为折叠，因此而结合成的外边距称为折叠外边距。 折叠结果遵循下列计算规则。...自适应的单位有以下几个 百分比：% 相对于视口宽度的单位：ww 相对于视口高度的单位：vh 相对于视口宽度或者高度（取决于哪个小）的单位：Vm 相对于父元素字体大小的单位：em 相对于根元素字体大小的单位
大家好，又见面了，我是你们的朋友全栈君。 一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。...先了解两个概念： 可见视口（visual viewport）：浏览器窗口的可视区域 布局视口（layout viewport）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。 视口（visual viewport）：浏览器窗口的可视区域 布局视口（layout viewport）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。... 在手机上的运行效果： 首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度（布局视口）值为800px，980px，1024px等这些，...总之是大于屏幕宽度（可见视口）的。
二、设置具体的尺寸 CSS 允许我们设置元素的具体尺寸，通过使用固定单位（如像素、点等）来精确控制元素的宽度和高度。这种方法适用于需要精确尺寸控制的场景。 示例 : 使用固定单位设置尺寸 固定尺寸div> .fixed-size-box 的宽度和高度被设置为固定的像素值，这确保了元素在所有屏幕和视口尺寸下保持一致的尺寸...class="container"> div class="box">百分比边距div> div> .box 的内边距设置为其宽度的...vw 表示视口宽度的百分比，vh 表示视口高度的百分比。这种方法非常适合创建全屏背景或响应式布局。 示例 : 使用视口单位 视口单位 div> .full-screen 元素的宽度和高度都设置为视口的 100%。
4. inline-block 使用 inline-block 布局之后元素之间去除边距等因素后，无法完全紧靠的原因：为了方便理解，可以将 inline-block 容器内的元素看成是两个文字，文字与文字之间不可能是连在一起的...initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。 理想视口：文档宽度和屏幕宽度一致。...理想视口宽度 = 移动设备横向分辨率 / DPR 视觉视口 visual viewport：如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小...，此时视觉视口也变小了。 ...BFC是一个独立的容器，内部元素不会影响容器外部的元素。 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。 计算BFC高度时，浮动元素也要参与计算。
一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。...当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移，示例如下： 边距+定位，实现水平垂直居中 具体请参考《CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法》 1.1.4、去除列表最后一个li元素的border-bottom ?...先了解两个概念： 可见视口（visual viewport）：浏览器窗口的可视区域 布局视口（layout viewport）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。 ?...4.8.3、小节 首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度（布局视口）值为800px，980px，1024px等这些，总之是大于屏幕宽度（可见视口）的。
详细资料可以参考： 《简单了解 CSS3 的 all 属性》 40.为什么不建议使用统配符初始化 css 样式。...第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整 个页面的布局都会显示错乱。...第二个视口指的是视觉视口，visualviewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。...第三个视口是理想视口，由于layoutviewport一般比visualviewport要大，所以想要看到整个页面必须通过拖动和缩放才 能实现。...（4）border以及line-height等传统CSS属性并没有小数像素的概念。如果标注的是文字上边距，则向下取整；如果是文字下 边距，则向上取整。
视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...2.2 视觉视口 （visual viewport） 它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 ?...meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。...移动端开发 4.1 开发方案 单独制作 PC 端 和 移动端 响应式界面 4.2 CSS3 盒子模型 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding CSS3...页面才能使用 3.5 less 嵌套 3.6 less 计算 任何数字、颜色或者变量都可以参与运算。
其实MouseEvent.clientX/Y也就是相对于当前视口(浏览器可视区)进行位置计算。...offset MouseEvent.offsetX/offsetY MouseEvent 接口的只读属性 offsetX/Y 规定了事件对象与目标节点的内填充边（padding edge）在 X/Y 轴方向上的偏移量...除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。 width和height是计算元素的大小，其他属性都是相对于视口左上角来说的。...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top 和 left 属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的） 。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值，那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。
详细资料可以参考： 《简单了解 CSS3 的 all 属性》 40.为什么不建议使用统配符初始化 css 样式。...第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。...所以移动端浏览器提供了一个layoutviewport布局视口的概念，使用这个视口来对页面进行布局展示，一般layoutviewport的大小为980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面...第二个视口指的是视觉视口，visualviewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。...第三个视口是理想视口，由于layoutviewport一般比visualviewport要大，所以想要看到整个页面必须通过拖动和缩放才能实现。
5、sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。...2、absolute：它的偏移量是相对于最近一级position不是static的祖先元素的 3、fixed：它的偏移量是相对于视口的。 其实，这里说描述的内容，应该都是需要理解的。...可以看出，对于不同的模型的宽度是不同的。宽度默认的属性值是auto，这个属性值会使得内部元素的长度自动填充满父元素的width。如图： ?...它的特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。 三栏布局可以有4种实现方式，每种实现方式都有各自的优缺点。...1.使用左右两栏使用float属性，中间栏使用margin属性进行撑开，注意的是html的结果 div class="left">左栏div> div class="right">右栏div
而css3硬件加速的原理则是新建合成层，这里我们不展开，之后有机会会写一篇博客） 渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。 生成渲染树 ?...注意：渲染树只包含可见的节点 回流 前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。...div> div> 我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。...而在回流这个阶段，我们就需要根据视口具体的宽度，将其转为实际的像素值。（如下图） ?...页面一开始渲染的时候（这肯定避免不了） 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的） 注意：回流一定会触发重绘，而重绘不一定会回流 根据改变的范围和程度，渲染树中或大或小的部分需要重新计算
页面初始渲染，这是开销最大的一次重排 添加/删除可见的DOM元素 改变元素位置 改变元素尺寸，比如边距、填充、边框、宽度和高度等 改变元素内容，比如文字数量，图片大小等 改变元素字体大小 改变浏览器窗口尺寸...使用图片 base64 优点缺点 ❝base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url 属性。 优点 : 「1....绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 「最佳实践」 ：也是我常用的 技巧布局方式 子绝父相 它基本可以满足你复杂的日常布局需求。...元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。 元素的位置在屏幕滚动时不会改变。...rem rem是CSS3新增的一个相对单位,使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
calc() calc(): CSS3中新增的一个函数, 用于动态计算宽/高, 语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示 使用“+”、“-”、“*...计算值是给定的百分比值乘以元素计算出的字体大小 一个 关键词 normal。 8.rem实现原理及相应的计算方案 rem布局的本质是等比缩放，一般是基于宽度....rem实现适配的原理： 核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。 实现原理：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。...计算方案： 通过dpr设置缩放比，实现布局视口大小 var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport...负边距[22]是这两种布局中的重中之重 不同点：解决“中间栏div内容不被遮挡”的思路不同 圣杯布局 1.三者都设置向左浮动 2.设置middle宽度为100%; 3.设置负边距， left设置负左边距为
而css3硬件加速的原理则是新建合成层，这里我们不展开，之后有机会会写一篇博客） 渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。...注意：渲染树只包含可见的节点 回流 前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。...div> div> 我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。...而在回流这个阶段，我们就需要根据视口具体的宽度，将其转为实际的像素值。...页面一开始渲染的时候（这肯定避免不了） 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的） 注意：回流一定会触发重绘，而重绘不一定会回流 根据改变的范围和程度，渲染树中或大或小的部分需要重新计算
以上是基于 CSS2.1 的层叠上下文介绍。下面要阐述的是在 CSS3 新环境下，层叠上下文的新变化。...2 CSS3 带来的变化 总的来说变化可以归为两点，我们之后一一探讨： CSS3 中许多属性会创建局部层叠上下文 tranform 属性改变绝对定位子元素的包含块 2.1 产生新层叠上下文的情况 以下情况会产生新的层叠上下文...固定定位元素 固定定位元素的包含块由视口创建（如果读者了解视觉格式化模型详述的信息，也就知道这一点：在计算其“静态位置”的时候，则以初始化包含块作为其计算包含块）。... id="transform"> div id="fixed">div> div> 这个时候，以视口为包含块进行定位和大小计算， fixed 将会铺满整个屏幕。...但现在，我们加上如下规则： #transform { transform: scale(1); } 此时，fixed 的包含块不再是视口，而是 transform 的内边距盒的边缘盒了。
--视口设置：视口宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> <meta name="viewport" content="width=device-width, initial-scale...1170px 中屏 ( >=992px) 宽度定为 970px 小屏 ( >=768px) 宽度定为 750px 超小屏 (100%) container-fluid 类: 流式布局容器 百分百宽度 占据全部视口...、移动设备优先的流式栅格系统，随着屏幕或视口 (viewport) 尺寸的增加，系统会自动分为最多12列 栅格选项参数: 超小屏幕 (手机) =768px 中等屏幕...，内容就可以放入这些创建好的布局中 行 (row) 可以去除父容器的15px边距 xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大； 列 (...div> div> 列偏移: 使用 .col-md-offset 类可以将列向右侧偏移，这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距 (margin) div class="row
.wrapper { width: 1170px; } 但是，不建议使用width属性，因为当屏幕尺寸小于1170像素时，会出现水平滚动。 可以max-width 来解决这个问题。...16px的偏移量，即使视口的大小小于最大宽度。...为避免此类混淆，建议在这种情况下使用非简写格式 。 现在让我们来添加页边距。在每个项目中，我都准备了一组用于margin和padding的实用工具类，在必要时使用它们，考虑下图。 ?...在其中，wrapper可防止内容占据视口的整个宽度。 ? 主内容需要添加 wrapper 吗？ 这要看情况。 让我们探讨两种最常用内容区间的设计。 第一个以其内容为中心，并受特定宽度限制。 ?...流动背景，固定内容 Lea Verou 在她的《CSS Secrets》一书中介绍了一种有趣的技巧，该技巧可用于流动背景（占据整个视口宽度）且内部带有wrapper部分。 让我们回顾一下常见的做法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
