简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。...由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...8.前端项目中为什么要初始化CSS样式？ 因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。...link属于HTML标签，而@import是css提供的； 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载； @import只在IE5以上才能识别，而link是...10.说说你对盒子模型的理解 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子
安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，...根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale...为什么需要有理想的viewport呢？...比如一个分辨率为320x480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢...viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。
这个URL的名称并不重要，但通常当您在不同尺寸上有多个相同的图片时，您会希望在名称中加上尺寸信息。 这项内容的第二部分是400w。...对于所有屏幕尺寸，这个过程会一直持续，直到浏览器达到列表中最大的图像。 这很棒，因为现在在小屏幕上，浏览器将下载一个较小的图像，而大屏幕仍将获得高分辨率的图像。...默认情况下，如果您没有将sizes属性添加到img标签中，它会假定尺寸为100vw，这就是为什么上面的图像根据浏览器窗口的完整宽度进行缩放。...在这种情况下，我们使用100vw，这意味着我们希望浏览器根据浏览器窗口的完整宽度选择图像尺寸。 第二个项800px没有媒体查询，而只是一个尺寸。这被视为我们的回退尺寸。...将这两个项组合起来，基本上是在说我们的图像应该根据浏览器的宽度选择，在800像素之前。
CSS（层叠样式表）是一种样式语言，对于 HTML 元素来说足够简单。 它在网页设计中非常流行，其应用在XHTML中也很常见。 问题2：为什么要开发CSS？...设备兼容性 – 由于人们使用不同类型的智能设备访问互联网，因此需要响应式web设计。CSS 在这里的作用是使 web 页面的响应性更好，这样它们就可以在所有设备中以相同的方式显示。...既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？...CSS 和 SCSS 之间的区别如下： CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。...嵌入式样式表的缺点： 无法控制多个文档。 问题 23：列出使用的各种媒体类型。 不同的介质不区分大小写，因此它们具有不同的属性。
我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。而是区分开来做自适应。然后每次用户访问的时候它就根据客户端的类型重定向。 为什么呢？...不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。...设备像素比 ＝ 物理像素 / CSS像素 在不同的屏幕上，CSS 像素所呈现的物理尺寸是一致的，而不同的是 CSS 像素所对应的物理像素具数是不一致的。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。
从上面的例子可以看出，HTML语言只是在描述网页的结构，并没有涉及任何计算，变量，指令，方程。这也就是为什么说HTML是标记语言，而不是编程语言。...但是这两个标签之间的区别可不只是样式不同这么简单哦。区分段落时请用，段落之内换行请用，不要随意乱用。...你可能会想，那么既然表现样式都一样，为什么要用这么多不同的标签去实现呢？ 这里就涉及到 HTML 的语义化概念了。不同的标签具有不同的语义，哪怕它们所表现出的样式都一样，但所代表的意义也都不同。...或者想表示金钱符号： 在上面我使用了两种不同的方式输入同一个特殊符号。 由于特殊字符实在是太多了，大家可以根据需求自己去查找。...标签： 如果你想为视频指定多个视频源的话，可以使用标签，浏览器会根据自己支持的格式去选择。
字体的分类和格式 衬线和无衬线 衬线算是一种辅助性的小细节，笼统的谈，太过于抽象，我们来看两个例子： 这两个字体，是有衬线字体，大家可以看到在边角的位置，会多出一些修饰。...这两个字体，就是无衬线字体，没有边角的修饰，令人看起来很整齐光滑，没有毛刺。比较适合用在网页中，让浏览者获取大量的文字信息而不会疲劳。...关于通用字体系列的更多解释、描述和字体举例，推荐大家查看在 W3school 上的资料。 字体的格式 格式就是指字体表现出来的粗细、宽度和姿态等等特征。...解决这个问题，我们先应该知道为什么要纠结于选择字体这个问题。我个人认为应该存在 实用性 和 创意性 这两个方面的因素。...浏览器解析字体的过程实际上是这样的，当浏览器加载 CSS 后，解析到有关字体的样式，它会在你的系统中查找这个字体，只有找到了相应的字体文件，才会根据那个字体文件对网页中的文字进行渲染，显示出你想要的效果
italic 是斜体，是一种不同的字体，而 oblique 是一种仿斜体，是浏览器通过将普通字体通过变形而成的“斜体”，italic 选择字体族的 italic 变体，如果没有 italic 变体就妥协到...在不同浏览器下有什么区别？ 该属性兼容性各个浏览器并不统一，对于一般的元素，它的表现跟 hidden 是一样的。...的元素）/根元素；如果设置了 absolute 的元素没有设置宽高，则 LRTB 四个属性可以将该元素自适应抻开； fixed：元素默认宽度为内容宽度；脱离文档流；参照物为视窗； * float 会导致原有的...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...； rem：相对于根元素 html 的字体大小； vh vw：其中的 v 表示 viewpoint（视窗），所以这两个大小单位代表相对于当前视窗的大小，1vh vw 相当于百分之1的视窗高度 宽度。
例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。...但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉...安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，...比如一个分辨率为320x480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢...viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。
offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。...同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。...新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器 scrollTop 是“卷”起来的高度值，示例： <div style=”width:100px;height:100px;background-color...1.clientHeight, clientWidth: 这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入 元素中的页边距,边框等. 2.clientLeft...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
我们都知道等宽字体和比例字体的区别，就在于比例字体（Monospaced Font）即每个字母宽度是按一定比例自动调整的，而等宽字体（Proportional font）则是固定宽度，固定间距，字体的每一个字母和字符所占的水平空间都是相同的...它指的是字符宽度相同的一类字体。这里要注意的一点是，中英文宽度应该不是相同而是成整数倍关系——一般来说中文字符在这些字体中的宽度是英文字符的两倍。...大多数浏览器默认会使用等宽字体显示这种文本（Courier字体就是一个等宽字体的例子，每个字母占用相同的宽度 ）。元素最常用于显示计算机源码。...它是以字符0的宽度为基准， 另外一个单位ex是以小写字符x的高度为基准,当font-family改变的时候这两个单位的值也会变化，不同字体表现的样式不一样。...我们可以测试一下这个ch单位，当们把宽度设置为2ch的时候的表现是怎样： ? 总结：不同于比例字体，等宽字体具有相同的宽度字符。这种特点让它更易于阅读，拥有较高的统一性和一致性。
例如，固有宽度为400px的图像在原始的Google Pixel和较新的Pixel 6 Pro上几乎占据整个浏览器视口 - 这两个设备都有一个标准化的412px逻辑像素宽的视口。...与标记候选项具有适当尺寸以适应给定显示密度不同，w 语法描述每个候选源的固有宽度。同样，每个候选项都是相同的，除了它们的尺寸 - 相同的内容，相同的裁剪和相同的纵横比。...在浏览器可以决定渲染哪个源之前，你需要提供更多的信息：一个描述图像在页面上将如何渲染的说明。为此，请使用 sizes 属性。 用 sizes 描述使用情况 在传输图像方面，浏览器表现出极高的性能。...当浏览器可以无缝地缩小它已经拥有的图像源时，为什么要为一个看起来相同的源发出新请求呢？但是，如果用户将其视口缩放到需要新图像才能避免缩放的程度，那么仍将进行该请求，以便一切看起来符合我们的期望。...字符串中添加的复杂性越多，就越有可能出现解析器错误或不同浏览器之间行为意外不同的情况。然而，这里有一个好处：对机器来说更容易阅读的语法对它们来说也更容易编写。
有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。...（3）相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的） (4) 部分浏览器由于字节溢出问题出现的进位表现不做考虑 回答： 判断优先级时，首先我们会判断一条属性声明是否有权重...idealviewport其实就是通过修改layoutviewport的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据idealviewport设计的页面，在不同分辨率的屏幕下，显示应该相同...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE...后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏 览器私有前缀，实现跨浏览器兼容性的问题。
如果不加，那么各个浏览器会根据自己的行为去理解网页。 CSS3增加了box-sizing属性，值包括content-box|border-box|inherit。...由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...Sass变量必须是$开始，而Less变量必须使用@符号开始。为什么要使用它们？结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。...特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。CSS 引入方式？外部样式表。引入一个外部CSS文件；内部样式表。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE
我们在浏览器页面使用F12，进入开发者工具主流的实现方案有两种：通过 rem、vw/vh 等单位，实现在不同设备上显示相同比例进而实现适配。...综合起来，这行代码的作用是告诉浏览器，网页的布局应该以设备的宽度为基准，初始缩放级别为 1.0。这样可以确保在移动设备上获得更好的显示效果，而不会出现不必要的缩放或变形。...只要我们在不同的设备上设置一个合适的初始值，当设备发生变化 font-size 就会自动等比适配大小，从而在不同的设备上表现统一。比如，下面这个例子。...所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略。...*/@media only screen and (max-width:1000px){...}根据不同的媒体使用不同的样式表<link rel="stylesheet" media="screen and
offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。...新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器 scrollTop 是“卷”起来的高度值，示例： <div style=”width:100px;height:100px;overflow...1.clientHeight, clientWidth: 这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入 元素中的页边距,边框等. 2.clientLeft...，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？ 7. 为什么利用多个域名来存储网站资源会更有效？...这也是为什么将js脚本放在底部而不是头部。...屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音....各自的浏览器只会识别自己独有的hack字符，也会优先解析自己的hack而进行渲染页面 答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。...由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异 但是初始化CSS会对搜索引擎优化造成小影响 34. BFC是什么?
（3）相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的） 回答： 判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。...-因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。...idealviewport其实就是通过修改layoutviewport的大小，让它等于设备的宽度，这个 宽度可以理解为是设备独立像素，因此根据idealviewport设计的页面，在不同分辨率的屏幕下，...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式 表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE...后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏 览器私有前缀，实现跨浏览器兼容性的问题。
如果不加这个标签，移动浏览器会假定网页不是响应式的，并且会尝试模拟桌面浏览器，那之前的移动端设计就白做了。...首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次当页面加载时，它使用 initial-scale 将缩放比设置为 100%。...在各大主流浏览器中，当用户缩放页面或者改变默认的字号时，只有 em 单位表现一致。以 px 或者 rem 单位为断点在 Safari 浏览器里不太可靠。...浏览器会根据自身需要决定加载哪一个图片。...不支持的浏览器会根据 src 属性加载相应的 URL。这种方式允许针对不同的屏幕尺寸优化图片。更棒的是，浏览器会针对高分辨率的屏幕做出调整。 图片作为流式布局的一部分，请始终确保它不会超过容器的宽度。
云服务器
ICP备案
对象存储
实时音视频
云直播
