我的面试之旅

方法一：CSS3vwunit.placeholder{width:100%;height:100vw;}优点：简洁方便缺点：浏览器兼容性不好解决方案二：设置垂直方向padding按照规定展开容器，margin和padding的百分比值是相对于宽度计算的父元素。.placeholder{宽度：100%；padding-bottom:100%;}为了防止内容膨胀容器，将容器的高度设置为0.placeholder{height:0;}方法三：使用伪装的margin(padding)-topelement展开container.placeholder{width:100%;溢出：隐藏；}.placeholder：在{内容：''之后；显示：块；保证金顶部：100%；/*边距百分比是相对于父元素的宽度计算的*/}2.什么是替换元素和非替换元素？img属于哪一个？详细参考：https://segmentfault.com/a/11...(1)可替换元素：可替换元素是浏览器根据元素的标签和属性来决定元素的具体显示内容。例如，浏览器会根据标签的src属性的值读取图片信息并显示出来，但是如果查看(x)html代码，则看不到图片的实际内容；又如根据标签的类型属性来判断是否显示输入框、单选按钮等、、、<select>、<object>in(x)html都是替换元素。这些元素通常没有实际内容，即空元素。(2)不可替换元素(x)html的大部分元素都是不可替换元素，即它们的内容直接显示给用户终端（如浏览器）。例如：<p>ContentofParagraph</p>Paragraph<p>是不可替换元素，文本“ContentofParagraph”会完整显示。(3)设置元素的高度对于块级元素：块级元素有height和width属性，可以直接通过它们设置宽高对于可替换元素（内联元素）：替换元素一般有内在尺寸和宽高比（自动），所以它有宽度和高度，可以设置。例如img不指定宽高，则按照其固有尺寸显示，即图片保存时的宽高。对于表单元素，浏览器也有默认的样式，包括宽度和高度。对于不可替换元素（行内元素：），通过line-height属性设置行高。设置宽度width没有效果。设置高度无效。设置边距只对左右边距有效，对上下边距无效。（这就是span的margin-top无效的原因）设置padding只对左右padding有效，top和bottom无效。4）**img是可替换的内联元素，属于内联元素的范畴。它与其他内联元素有何不同？在计算高度/边距/宽度等或绝对定位时，它有一些额外的规则。（CSS2.1第10章）比如设置了width，没有设置height，img的高度会按照比例缩放。**3。BFC和IFC详细参考：http://www.myronliu.com/2016/...FormattingContexts是W3CCSS2.1规范中的一个概念。它是页面中的一个渲染区域，有一套渲染规则，决定了它的子元素将如何定位，以及与其他元素的关系和交互。（1）BFCBFC（BlockFormattingContexts）直译为“块级格式化上下文”。BlockFormattingContexts是页面上一个独立的渲染区域。容器内部的子元素不会影响布局中的外部元素，反之亦然。BFC形成一个块容器，其中float的值不是noneposition，position的值不是static或者relativedisplay属性是inline-boxes，table-cells，table-captions（除非值已经传播到视口），并且溢出不可见块框将为其内容创建一个新的BFC。body元素内的boxesBFC渲染规则（6）会在垂直方向上依次放置。Box的垂直距离由margin决定。属于同一个BFC的两个相邻框的边距将与每个元素的边距框的左侧重叠，接触包含块边框框的左侧（对于从左到右的格式，否则反之亦然）。即使存在浮动也是如此。BFC区域与浮动框不重叠，常用于清除浮动和布局。BFC是页面上一个隔离的独立容器，容器内部的子元素不会影响外部的元素。反之亦然。在计算BFC的高度时，浮动元素也参与计算（2）IFCIFC（InlineFormattingContexts）直译为“内联格式化上下文”。因此（不受垂直填充/边距的影响）IFC渲染规则框将从包含块的顶部开始，一个接一个地水平放置。放置这些盒子时，会考虑到它们在水平方向上的边距、边框和填充所占的空间。在垂直方向上，这些框可能以不同的方式对齐：它们可能与底部或顶部对齐，或者它们可能与其中文本的基线对齐。一个可以完全包含一行上所有框的矩形区域称为该行的行框。水平边距、填充和边框有效，但垂直无效。不能指定宽度和高度。行框的宽度由包含块和浮动的存在决定。IFC'line-height'和'vertical-align'属性计算行框内每个行内级别框的高度。对于置换、内联块和内联表元素，这是边界框的高度，对于内联框，这是“行高”。行内元素根据它们的“vertical-align”属性垂直对齐。在这些框使用“顶部”或“底部”对齐的情况下，用户代理必须对齐这些框以最小化行框的高度。如果盒子足够高，有多种解决方案，CSS2.1没有定义线盒基线的位置。线盒的高度是从最顶层盒的顶边到最底层盒的底边的距离。4、正则表达式中的阿拉伯数字每三位用逗号隔开。例如：11500000->11,500,000"11500000".split("").reverse().join("").replace(/(\d{3})(?=[^$])/g,"$1,").split("").reverse().join("");(1).(?=[^$])将匹配除字符结尾以外的所有位置(2)。/(\d{3})(?=[^$])/会匹配三个连续的数字，并且这三个数字在字符串(3)的末尾不能被替换(/(\d{3})/g,"$1,"),如果字符串长度恰好是三的倍数，则在最后三个字符后添加一个逗号。例如123456789.replace(/(\d{3})/g,"$1,");//123,456,789,</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="white-space属性" href="/webqianduan/207454.html">white-space属性</a> </div> <div class="prev">下一篇：<a title="你能说出exportexportdefault--之间的区别吗model.exports导出(1)" href="/webqianduan/207456.html">你能说出exportexportdefault--之间的区别吗model.exports导出(1)</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>我的面试之旅相关文章</code></div> <ul> <li><a href="/kejifunen/354527.html" target="_blank" title="如果我的瑜伽动作不准确怎么办？来认识一下这套智能瑜伽服">如果我的瑜伽动作不准确怎么办？来认识一下这套智能瑜伽服</a></li> <li><a href="/kejifunen/354480.html" target="_blank" title="带着海信U7看世界杯，开启私人FIFA之旅">带着海信U7看世界杯，开启私人FIFA之旅</a></li> <li><a href="/kejifunen/354175.html" target="_blank" title="特斯拉挖走了OpenAI顶级弟子李飞飞，马斯克说没关系，都是">特斯拉挖走了OpenAI顶级弟子李飞飞，马斯克说没关系，都是</a></li> <li><a href="/kejifunen/353421.html" target="_blank" title="我的第一次公开测试经历！斐讯W1智能运动手环">我的第一次公开测试经历！斐讯W1智能运动手环</a></li> <li><a href="/kejifunen/352757.html" target="_blank" title="索尼全画幅微单相机A7RM3开始探索之旅">索尼全画幅微单相机A7RM3开始探索之旅</a></li> <li><a href="/kejifunen/351368.html" target="_blank" title="【深度评测】终于可以放心我的孩子可以独自出门了360儿童卫士">【深度评测】终于可以放心我的孩子可以独自出门了360儿童卫士</a></li> <li><a href="/kejifunen/350945.html" target="_blank" title="三星能否为其可穿戴之旅感到自豪？ ">三星能否为其可穿戴之旅感到自豪？ </a></li> <li><a href="/kejifunen/350621.html" target="_blank" title="《我的VR男友杨洋》阿里巴巴VR边看电影边买买买">《我的VR男友杨洋》阿里巴巴VR边看电影边买买买</a></li> <li><a href="/kejifunen/350370.html" target="_blank" title="卡西欧挑战苹果！你的手表很糟糕，看看我的手表！ ">卡西欧挑战苹果！你的手表很糟糕，看看我的手表！ </a></li> <li><a href="/kejifunen/349551.html" target="_blank" title="普京试戴智能手环后笑了！你不准测量我的卡路里">普京试戴智能手环后笑了！你不准测量我的卡路里</a></li> <li><a href="/kejifunen/348948.html" target="_blank" title="小米手环2视频版深度评测就在这里，一块屏幕性能提升之旅">小米手环2视频版深度评测就在这里，一块屏幕性能提升之旅</a></li> <li><a href="/kejifunen/346445.html" target="_blank" title="如果我的 Apple Watch Series 2 弄湿了该">如果我的 Apple Watch Series 2 弄湿了该</a></li> <li><a href="/kejifunen/346306.html" target="_blank" title="看完眼睛，你就是下一个参加【爱普生之旅】的人了！ ">看完眼睛，你就是下一个参加【爱普生之旅】的人了！ </a></li> <li><a href="/kejifunen/346073.html" target="_blank" title="尽力完成球迷的心愿《俄勒个去》开启世界杯幸运之旅">尽力完成球迷的心愿《俄勒个去》开启世界杯幸运之旅</a></li> <li><a href="/kejifunen/345892.html" target="_blank" title="让我表达一下我的感受吧！关于电视的自我修养">让我表达一下我的感受吧！关于电视的自我修养</a></li> <li><a href="/kejifunen/345546.html" target="_blank" title="老板：我很想知道是谁在“黑”我的公司">老板：我很想知道是谁在“黑”我的公司</a></li> <li><a href="/kejifunen/344847.html" target="_blank" title="外媒！ Apple Watch 让我的智能手表看起来像垃圾 ">外媒！ Apple Watch 让我的智能手表看起来像垃圾 </a></li> <li><a href="/kejifunen/344816.html" target="_blank" title="神奇之旅！这款为NASA研发的深度学习AI 落“地&">神奇之旅！这款为NASA研发的深度学习AI 落“地&</a></li> <li><a href="/kejifunen/344326.html" target="_blank" title="高清画质索尼全画幅微单A7M3开启你的探索之旅">高清画质索尼全画幅微单A7M3开启你的探索之旅</a></li> <li><a href="/kejifunen/343843.html" target="_blank" title="HUAWEI WATCH举办“永恒我的芯”时尚沙龙">HUAWEI WATCH举办“永恒我的芯”时尚沙龙</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/370653.html" title="记录美丽风景！ vivo X23与雷克萨斯带你踏上探索之旅！" target="_blank">记录美丽风景！ vivo X23与雷克萨斯带你踏上探索之旅！</a></li> <li><em>2</em><a href="/kejifunen/370475.html" title="西藏品质之旅：新日电动车与你挑战川藏线" target="_blank">西藏品质之旅：新日电动车与你挑战川藏线</a></li> <li><em>3</em><a href="/kejifunen/370196.html" title="Vensi智能语音控制系统 开启美妙的语音控制之旅" target="_blank">Vensi智能语音控制系统 开启美妙的语音控制之旅</a></li> <li><em>4</em><a href="/kejifunen/370058.html" title="海尔家电节足球美食嘉年华，智慧厨房的“生鲜之旅”" target="_blank">海尔家电节足球美食嘉年华，智慧厨房的“生鲜之旅”</a></li> <li><em>5</em><a href="/kejifunen/369500.html" title="校车配备VR，上学途中“体验”火星之旅" target="_blank">校车配备VR，上学途中“体验”火星之旅</a></li> <li><em>6</em><a href="/kejifunen/369259.html" title="C位之战，请接受我的飞利浦真空破壁机Pick！ " target="_blank">C位之战，请接受我的飞利浦真空破壁机Pick！ </a></li> <li><em>7</em><a href="/kejifunen/369097.html" title="360李开心向魅族喊话！你的不行就看我的710+6GB" target="_blank">360李开心向魅族喊话！你的不行就看我的710+6GB</a></li> <li><em>8</em><a href="/kejifunen/368775.html" title="内外惊艳，我的平板电脑只需要联想TAB 4 Plus" target="_blank">内外惊艳，我的平板电脑只需要联想TAB 4 Plus</a></li> <li><em>9</em><a href="/kejifunen/368251.html" title="苏宁超级产品日盛大开幕！创维带你踏上一段无法定格的想象之旅" target="_blank">苏宁超级产品日盛大开幕！创维带你踏上一段无法定格的想象之旅</a></li> <li><em>10</em><a href="/kejifunen/368170.html" title="iOS系统搭配Ticwatch使用之旅" target="_blank">iOS系统搭配Ticwatch使用之旅</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/366938.html" title="美拍《嘿!好样的》完美收官，收获之旅才刚刚开始" target="_blank">美拍《嘿!好样的》完美收官，收获之旅才刚刚开始</a></li> <li><em>2</em><a href="/kejifunen/366280.html" title="百度“芯”之旅，李彦宏将用“昆仑”让大家Can AI" target="_blank">百度“芯”之旅，李彦宏将用“昆仑”让大家Can AI</a></li> <li><em>3</em><a href="/kejifunen/365769.html" title="美图手机受邀拜访兰博基尼家族，开启意大利时尚探索之旅" target="_blank">美图手机受邀拜访兰博基尼家族，开启意大利时尚探索之旅</a></li> <li><em>4</em><a href="/kejifunen/365121.html" title="生动的影像观光之旅 智云稳定器亮相2018上海国际影像器材展" target="_blank">生动的影像观光之旅 智云稳定器亮相2018上海国际影像器材展</a></li> <li><em>5</em><a href="/kejifunen/365067.html" title="猜对游戏，赢二人圣彼得堡之旅360机动卫士世界杯活动上线了" target="_blank">猜对游戏，赢二人圣彼得堡之旅360机动卫士世界杯活动上线了</a></li> <li><em>6</em><a href="/kejifunen/363457.html" title="今年校招云米玩新花样！ AI面试官重磅来袭！ " target="_blank">今年校招云米玩新花样！ AI面试官重磅来袭！ </a></li> <li><em>7</em><a href="/kejifunen/362781.html" title="智能手表！请不要低估我的潜力" target="_blank">智能手表！请不要低估我的潜力</a></li> <li><em>8</em><a href="/kejifunen/362747.html" title="阿拉丁神丁，你能帮我实现我的双十一折扣愿望吗？ " target="_blank">阿拉丁神丁，你能帮我实现我的双十一折扣愿望吗？ </a></li> <li><em>9</em><a href="/kejifunen/362303.html" title="说一下我的耳塞之旅，给新人一些建议" target="_blank">说一下我的耳塞之旅，给新人一些建议</a></li> <li><em>10</em><a href="/kejifunen/360921.html" title="云拍照美容平台！首创拾音功能，拾音之旅" target="_blank">云拍照美容平台！首创拾音功能，拾音之旅</a></li> <li><em>11</em><a href="/kejifunen/360585.html" title="对足球和美食的热情？ 6月17日，我们将与名厨一起开启“海尔" target="_blank">对足球和美食的热情？ 6月17日，我们将与名厨一起开启“海尔</a></li> <li><em>12</em><a href="/kejifunen/360257.html" title="MOOC的IT技术面试课程助你拿到心仪的offer" target="_blank">MOOC的IT技术面试课程助你拿到心仪的offer</a></li> <li><em>13</em><a href="/kejifunen/359637.html" title="增强现实版的《我的世界》被指控为假货，微软尚未回应" target="_blank">增强现实版的《我的世界》被指控为假货，微软尚未回应</a></li> <li><em>14</em><a href="/kejifunen/359428.html" title="腾讯儿童管家手环！我可以用微信看我的孩子吗？ " target="_blank">腾讯儿童管家手环！我可以用微信看我的孩子吗？ </a></li> <li><em>15</em><a href="/kejifunen/359172.html" title="你是我的眼睛这款智能穿戴设备可以让盲人“看到”东西" target="_blank">你是我的眼睛这款智能穿戴设备可以让盲人“看到”东西</a></li> <li><em>16</em><a href="/kejifunen/358627.html" title="你接受过机器人面试吗？ " target="_blank">你接受过机器人面试吗？ </a></li> <li><em>17</em><a href="/kejifunen/358457.html" title="极寒挑战索尼全画幅微单A7RM3加拿大之旅" target="_blank">极寒挑战索尼全画幅微单A7RM3加拿大之旅</a></li> <li><em>18</em><a href="/kejifunen/357283.html" title="如何选择净水器？来来来，听听我的白话！ " target="_blank">如何选择净水器？来来来，听听我的白话！ </a></li> <li><em>19</em><a href="/kejifunen/356960.html" title="iExec云计算中国宝藏之旅！区块链开发者研讨会圆满结束" target="_blank">iExec云计算中国宝藏之旅！区块链开发者研讨会圆满结束</a></li> <li><em>20</em><a href="/kejifunen/356407.html" title="Fitbit 充电！ 《驯服》我的手链" target="_blank">Fitbit 充电！ 《驯服》我的手链</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>