前端面试题整理——HTML/CSS
如何理解语义化:
对应的内容是用相应意思的标签,增加开发者和机器爬虫对代码的可读性。
块状元素和内联元素:
块状元素有:display:block/table;有div h1 h2 table ul ol p等,这些元素特点是独占一行。
内联元素:display:inline/inline-block;有span img input button等,内联元素不会独占一行,会挨着往后排,直到浏览器的边缘换行为止。
盒模型宽度计算:
#div{ width:100px; padding:10px; border:1px solid #000; margin:10px; }
offsetWidth = (内容宽度+内边距+边框),无外边距,因此#div的宽度是122px。
如果让offsetWidth等于100px,该如何做?
加一个:box-sizing:border-box;
margin纵向重叠问题:
p{ font-size:16px; line-height:1; margin-top:10px; margin-bottom:15px; }
相邻元素的margin-top和margin-bottom会发生重叠
空内容的<p></p>也会重叠,会被忽略掉
所以AAA和BBB之间的距离是15px
margin负值问题:
<html lang="en"> <head> <meta charset="UTF-8"> <title>margin负值问题</title> <style> .box1{ width: 500px; height:100px; border:1px solid #000; padding:10px; } .left{ width: 50px; height:50px; float:left; border:1px solid red; margin-left:-10px; margin-right:-20px; } .right{ width: 50px; height:50px; float:left; border:1px solid blue; } .box2{ width: 500px; height:200px; border:1px solid #000; padding:10px; } .top{ width: 50px; height:50px; border:1px solid red; margin-top:-10px; margin-bottom:-20px; } .bottom{ width: 50px; height:50px; border:1px solid blue; } </style> </head> <body> <h2>测试 margin-left、margin-right为负值</h2> <div class="box1"> <div class="left"></div> <div class="right"></div> </div> <h2>测试 margin-top、margin-bottom为负值</h2> <div class="box2"> <div class="top"></div> <div class="bottom"></div> </div> </body> </html>
View Code
margin-top 和 margin-left 负值,元素向上、向左移动
margin-right 负值,右侧元素左移,自身不受影响
margin-bottom 负值,下方元素上移,自身不受影响
BFC理解与应用:
<style> .left{ float:left; } .bfc{ overflow: hidden; } </style> <div class="bfc"> <img class="left" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""> <p class="bfc">文字文字文字文字文字文字文字文字</p> </div>
View Code
什么是BFC?如何应用
BFC全称是 Block format context,块级格式化上下文
BFC是一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件:
float不是none。设置元素为float,该元素就有了BFC
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex、inline-block等
BFC的常见应用:
清除浮动
手写clearfix:
/*手写clearfix*/ .clearfix:after{ content:''; display: block; clear:both; } /* *zoom:1;兼容IE低版本 */
View Code
圣杯布局和双飞翼布局:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float布局</title> <style> .box1{ padding:0; margin:0; } .box1 header,.box1 footer{ height:20px; background:#ccc; text-align:center; } .box1 .main{ padding-left:100px; padding-right:200px; } .box1 .content{ height:50px; background:#666; float:left; width: 100%; margin-right:-100%; } .box1 .left{ height:20px; background:yellow; width: 100px; float:left; margin-left:-100px; } .box1 .right{ width:200px; height:20px; background: aquamarine; float:left; margin-left:100%; } /*手写clearfix*/ .clearfix:after{ content:''; display: block; clear:both; } /* *zoom:1;兼容IE低版本 */ </style> </head> <body> <!--圣杯布局--> <div class="box1"> <header>header</header> <div class="main clearfix"> <div class="content">content</div> <div class="left">left</div> <div class="right">right</div> </div> <footer>footer</footer> </div> <!--双飞翼布局--> <style> .box2{ padding:0; margin:0; } .box2 #main{ width: 100%; height:200px; background:#ccc; } .box2 #main-wrap{ margin:0 200px 0 100px; } .box2 #left{ width:100px; height:100px; background:#0000FF; margin-left:-100%; } .box2 #right{ width:200px; height:100px; background:red; margin-left:-200px; } .col{ float:left; } </style> <div class="box2"> <div id="main" class="col"> <div id="main-wrap">main</div> </div> <div id="left" class="col"> left </div> <div id="right" class="col"> right </div> </div> </body> </html>
View Code
圣杯布局和双飞翼布局的目的
三栏布局,中间一栏优先加载和渲染(内容最重要)
两侧内容固定,中间内容随着宽度自适应
一般用于PC页面
圣杯布局和双飞翼布局的技术总结
使用float布局
两侧使用margin负值,以便和中间内容横向重叠
防止中间内容被两侧覆盖,一个用padding一个用margin
flex布局实现一个三点色子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> .box{ width: 100px; height:100px; border:1px solid #000; display: flex; justify-content: space-around; align-items:flex-start; } .item{ width: 20px; height:20px; background:#000; border-radius:50%; } .item:nth-child(2){ align-self:center; } .item:nth-child(3){ align-self:flex-end; } </style> </head> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>
View Code
常规使用属性:
flex-direction:主轴方向
justify-content:主轴对齐方式
align-items:交叉轴对齐方式
flex-wrap:是否换行
align-self:子元素在交叉轴对齐方式
absolute和relative定位:
relative根据自身定位
absolute依据最近一层的定位元素定位,定位元素有:absolute、relative、fixed、body
居中对齐的实现方式:
水平居中
inline元素:text-align:center
block元素:margin:auto
absolute元素:left:50% 加 margin-left:负值
垂直居中
inline元素:line-height的值等于height值
absolute元素:top:50% 加 margin-top:负值 这个方法需要知道元素的宽高
absolute元素:transform(50%,50%)
absolute元素:top,left,bottom.right都设置为0 加 margin:auto
line-height如何继承:
写具体数值,如30px,则继承该值(比较好理解)如下代码,答案是30px
body{ font-size:20px; line-height:30px; } p{ font-size:16px; }
View Code
写比例,如2或1.5,则继承该比例(比较好理解)如下代码如果是2,答案是32px
body{ font-size:20px; line-height:2; } p{ font-size:16px; }
View Code
写百分比,如200%,则继承计算出来的值(考点)如下代码如果是200%,答案是40px
body{ font-size:20px; line-height:200%; } p{ font-size:16px; }
View Code
网页视口尺寸:
window.screen.height 屏幕高度
window.innerHeight 网页视口高度
document.body.clientHeight body高度
赞 (0)