每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。
面试官:给定一个元素,如何实现水平垂直居中?
定位:因为这个元素不确定是不是块级元素 (块级元素是否有宽高) 还是行内元素,所以需要使用 transform 属性来做负的 50%移动(基于当前元素宽高)。
<style> html,body{ margin: 0; padding: 0; height: 100%; position: relative; } .item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <body> <div class="item" style="width: 100px; height: 100px; background: #999;"> 块状元素 </div> <div class="item" style="color: red;">不定高宽的块状元素</div> <span class="item" style="color: green;">行内元素</span> </body>
登录后复制
flex布局:不仅支持块状元素,而且支持行内元素,对固定高宽与不固定高宽皆可使用。【相关推荐:web前端开发】
<style> html,body{ margin: 0; padding: 0; width: 100%; height: 100%; display: flex; } .item{ margin: auto; } </style> <body> <div class="item" style="width: 100px; height: 100px; background: #999;"> 块状元素 </div> <!-- <div class="item" style="color: red;">不定高宽的块状元素</div> <span class="item" style="color: green;">行内元素</span> --> </body>
登录后复制
grid布局: 不仅支持块状元素,而且支持行内元素,对固定高宽与不固定高宽皆可使用。
<style> html,body{ margin: 0; padding: 0; width: 100%; height: 100%; display: grid; place-content: center; } </style> <body> <div class="item" style="width: 100px; height: 100px; background: #999;"> 块状元素 </div> <!-- <div class="item" style="color: red;">不定高宽的块状元素</div> <span class="item" style="color: green;">行内元素</span> --> </body>
登录后复制
面试官:padding与margin有什么不同?
面试官:vw和百分比有什么区别?
<style> body{ width: 50%; } .p1{ width: 100vw; height: 50px; background-color: #f00; } .p2{ width: 100%; height: 50px; background-color: #0f0; } </style> <body> <div class="p1">vw</div> <div class="p2">百分比</div> </body>
登录后复制
面试官:行内元素与块级元素有什么区别?
面试官:HTML标签中有哪些是行内元素?
面试官:如何让谷歌浏览器支持小字体?
面试官:HTML中有哪些是语义化标签?
面试官:什么是HTML的实体编码?
面试官:textarea 如何禁止拉伸?
面试官:谈谈 + 与 ~ 选择器有什么不同?
<style> div+p { /* 第一个兄弟元素p标签变红色了 */ color: red; } div~p { /* div后面的兄弟元素p标签都变成红色了 */ color:red; } </style> <body> <div>我是div</div> <p>我是p</p> <p>我是p</p> <div>我是div</div> <p>我是p</p> <div> <p>我是div下面的p</p> <p>我是div下面的p</p> </div> <span>我是span</span> </body>
登录后复制
以上就是看看这些前端面试题,带你搞定高频知识点(一)的详细内容,更多请关注Work网其它相关文章!