高端网站开发秦帝,优化大师win7官方免费下载,建筑工程服务有限公司,网站运营成本预算HTML5、CSS3面试题#xff08;二#xff09;
rem 适配方法如何计算 HTML 跟字号及适配方案#xff1f;#xff08;必会#xff09; 通用方案 1、设置根 font-size#xff1a;625%#xff08;或其它自定的值#xff0c;但换算规则 1rem 不能小于 12px#xff09; 2…HTML5、CSS3面试题二
rem 适配方法如何计算 HTML 跟字号及适配方案必会 通用方案 1、设置根 font-size625%或其它自定的值但换算规则 1rem 不能小于 12px 2、通过媒体查询分别设置每个屏幕的根 font-size 3、CSS 直接除以 2 再除以 100 即可换算为 rem 优有一定适用性换算也较为简单 北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com 第 39 页 共 348 页 北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com 第 40 页 共 348 页 劣有兼容性的坑对不同手机适配不是非常精准需要设置多个媒体查询来适应不同 手机单某款手机尺寸不在设置范围之内会导致无法适配 网易方案 1、拿到设计稿除以 100得到宽度 rem 值 2、通过给 html 的 style 设置 font-size把 1 里面得到的宽度 rem 值代入 x document.documentElement.style.fontSize document.documentElement.clientWidth / x ‘px‘; 3、设计稿 px/100 即可换算为 rem 优通过动态根 font-size 来做适配基本无兼容性问题适配较为精准换算简便 劣无 viewport 缩放且针对 iPhone 的 Retina 屏没有做适配导致对一些手机的适 配不是很到位 手淘方案 1、拿到设计稿除以 10得到 font-size 基准值 2、引入 flexible 3、不要设置 meta 的 viewport 缩放值 4、设计稿 px/ font-size 基准值即可换算为 rem 优通过动态根 font-size、viewpor、dpr 来做适配无兼容性问题适配精准。 劣需要根据设计稿进行基准值换算在不使用 sublime text 编辑器插件开发时单 位计算复杂 CSS 中 link 和import 的区别必会 适用范围不同 import 可以在网页页面中使用也可以在 CSS 文件中使用用来将多 个 CSS 文件引入到一个 CSS 文件中而 link 只能将 CSS 文件引入到网页页面中 功能范围不同 link 属于 XHTML 标签而import 是 CSS 提供的一种方式link 标签除 了可以加载 CSS 外还可以定义 RSS定义 rel 连接属性等import 就只能加载 CSS 加载顺序不同 当一个页面被加载的时候link 引用的 CSS 会同时被加载而import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览import 加载 CSS 的页 面时开始会没有样式就是闪烁网速慢的时候还挺明显 兼容性 由于import 是 css2.1 提出的所以老的浏览器不支持import 只有在 IE5 以上的才能识别而 link 标签无此问题 控制样式时的差别 使用 link 方式可以让用户切换 CSS 样式.现代浏览器如 Firefox,Opera,Safari 都支持 rel”alternate stylesheet”属性(即可在浏览器上选择不同 的风格), 当然你还可以使用 Javascript 使得 IE 也支持用户更换样式 权重区别 link 引入的样式权重大于import 引入的样式 22、Displaynone 与 visibilityhidden 的区别 必会 最常用的为 display:none 和 visibility:hidden dispaly:none 设置该属性后该元素下的元素都会隐藏占据的空间消失北京市顺义区京顺路 99 visibility:hidden 设置该元素后元素虽然不可见了但是依然占据空间的位置 区别 1.visibility 具有继承性其子元素也会继承此属性若设置 visibility:visible则子元 素会显示 2.visibility 不会影响计数器的计算虽然隐藏掉了但是计数器依然继续运行着。 3.在 CSS3 的 transition 中支持 visibility 属性但是不支持 display因为 transition 可 以延迟执行因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户 体 验 4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘 Position 的值有哪些分别有哪些作用必会 static默认值 不脱离文档流toprightbottomleft 等属性不生效 绝对定位absolute 绝对定位的关键是找对参照物要成为绝对定位元素的参照物必须满足以下两个条件 1.参照物和绝对定位元素必须是包含与被包含关系 2.该参照物必须具有定位属性 如果找不到满足以上两个条件的父包含块那么相对于浏览器窗口进行定位 注设置了 position:absolute;属性后元素会脱离正常文档流不在占据空间左右 margin 为 auto 将会失效我们通过 left、top、bottom、right 来决定元素位置 相对定位relative 参照物元素偏移前位置 注设置了相对定位左右 margin 为 auto 仍然有效、并且不会脱离文档流。 固定定位fixed 参照物浏览器窗口 注固定定位会脱离文档流 当绝对定位和固定定位参照物都是浏览器窗口时的区别 当出现滚动条时固定定位的元 素不会跟随滚动条滚动绝对定位会跟随滚动条滚动 为什么会出现浮动浮动元素会引起什么问题如何清除浮动必会 浮动定位将元素排除在普通流之外即元素讲脱离文档流不占据空间。浮动元素碰到包 含它的边框或者浮动元素的边框停留 为什么需要清除浮动 1、父元素的高度无法被撑开影响与父元素同级的元素 2、与浮动元素同级的非浮动元素内联元素会跟随其后 北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com 第 42 页 共 348 页 3、若非第一个元素浮动则该元素之前的元素也需要浮动否则会影响页面显示的结构解 决方法 清除浮动的方式 1、使用 CSS 中的 clear:both;放一个空的 div并设置上述 css,属性来清除元素的浮动 可解决 2、3 问题 2、对于问题 1添加如下样式给父元素添加 clearfix 样 式.clearfix:after{content: .;display: block;height: 0;clear: both;visibility: hidden;}.cl earfix{display: inline-block;} /* for IE/Mac */ 3、给父级元素设置双伪元素 HTML5、CSS3面试题四-CSDN博客
