前言：
现时你们对“css常用面试题”可能比较看重，朋友们都需要知道一些“css常用面试题”的相关资讯。那么小编同时在网摘上汇集了一些有关“css常用面试题””的相关文章，希望我们能喜欢，小伙伴们一起来学习一下吧！1.盒模型宽度计算
2.margin纵向重叠问题
3.margin负值问题
4.bfc理解和应用
5.float布局
6.flex布局：实现一个三点的色子
7.css定位
8.line-height如何继承
9.css响应式
下面依次看下：
1.盒模型宽度计算，下面div的offsetWidth
<style type="text/css"> #div1 { width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; }</style> <div id="div1"> this is div1 </div>offsetWidth = 内容宽度 + 内边距 + 边框。无外边距。
所以 offsetWidth = 100 + 10 * 2 + 1 * 2 = 122px
补充：如果让offsetWidth = 100px ，可以怎么做
答：加上box-sizing: border-box;
2.margin纵向重叠问题：如下代码，AAA和BBB之间的距离是多少?
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>margin 纵向重叠</title> <style type="text/css"> p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; }</style></head><body> <p>AAA</p> <p></p> <p></p> <p></p> <p>BBB</p></body></html>知识点：
1.相邻元素的margin-top和margin-bottom 会发生重叠
2.空白内容的p也会重叠
3.所以答案是：15px
3.margin负值问题
知识点：
1.margin-top和margin-left负值，元素向上，向左移动
2.margin-right负值，右侧元素左移，自身不受影响
3.margin-bottom负值，下方元素上移，自身不受影响
4.bfc理解和应用
概念：
1.块级格式化上下文
2.一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成bfc的常见条件：
1.float不是none
2.position是absolute或fixed
3.overflow不是visible
4.display是flex inline-block等
bfc常见应用：清除浮动
// bfc前<style type="text/css"> .container { background-color: #f1f1f1; } .left { float: left; }</style><div class="container"> <img src="; class="left" style="magin-right: 10px;"/> <p>某一段文字……</p></div>// bfc后：在父元素和p元素上添加bfc<style type="text/css"> .container { background-color: #f1f1f1; } .left { float: left; } .bfc { overflow: hidden; /* 触发元素 BFC */ }</style><div class="container bfc"> <img src="; class="left" style="magin-right: 10px;"/> <p class="bfc">某一段文字……</p></div>5.float布局
知识点：
1.如何实现圣杯布局和双飞翼布局
2.手写clearfix
圣杯布局和双飞翼布局的目的：
1.三栏布局，中间一栏最先加载和渲染
2.两侧内容固定，中间内容随着宽度自适应
圣杯布局和双飞翼布局的目的：
1.使用float布局
2.两侧使用margin负值，以便和中间内容横向重叠
3.防止中间内容被两侧覆盖，一个用padding，一个用margin
圣杯布局：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圣杯布局</title> <style type="text/css"> body { min-width: 550px; } #header { text-align: center; background-color: #f1f1f1; } #container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; } #center { background-color: #ccc; width: 100%; } #left { position: relative; background-color: yellow; width: 200px; margin-left: -100%; right: 200px; } #right { background-color: red; width: 150px; margin-right: -150px; } #footer { text-align: center; background-color: #f1f1f1; } /* 手写 clearfix */ .clearfix:after { content: ''; display: table; clear: both; }</style></head><body> <div id="header">this is header</div> <div id="container" class="clearfix"> <div id="center" class="column">this is center</div> <div id="left" class="column">this is left</div> <div id="right" class="column">this is right</div> </div> <div id="footer">this is footer</div></body></html>双飞翼布局：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双飞翼布局</title> <style type="text/css"> body { min-width: 550px; } .col { float: left; } #main { width: 100%; height: 200px; background-color: #ccc; } #main-wrap { margin: 0 190px 0 190px; } #left { width: 190px; height: 200px; background-color: #0000FF; margin-left: -100%; } #right { width: 190px; height: 200px; background-color: #FF0000; margin-left: -190px; }</style></head><body> <div id="main" class="col"> <div id="main-wrap"> this is main </div> </div> <div id="left" class="col"> this is left </div> <div id="right" class="col"> this is right </div></body></html>6.flex布局：实现一个三点的色子
常用语法：
flex-direction justfy-content align-items flex-wrap align-self
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex 画骰子</title> <style type="text/css"> .box { width: 200px; height: 200px; border: 2px solid #ccc; border-radius: 10px; padding: 20px; display: flex; justify-content: space-between; } .item { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #666; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; }</style></head><body> <div class="box"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div></body></html>7.css定位
absolute和relative定位：
1.relative根据自身定位
2.absolute根据最近一层的定位元素定位,，找不到，就根据body定位
水平居中：
inline元素：text-aligin:center
block元素：margin: auto
absoulte元素：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 不需要知道宽高
水平对齐演示：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平对齐</title> <style type="text/css"> .container { border: 1px solid #ccc; margin: 10px; padding: 10px; } .item { background-color: #ccc; } .container-1 { text-align: center; } .container-2 .item { width: 500px; margin: auto; } .container-3 { position: relative; height: 100px; } .container-3 .item { width: 300px; height: 100px; position: absolute; left: 50%; margin-left: -150px; }</style></head><body> <div class="container container-1"> <span>一段文字</span> </div> <div class="container container-2"> <div class="item"> this is block item </div> </div> <div class="container container-3"> <div class="item"> this is absolute item </div> </div></body></html>垂直对齐演示：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直对齐</title> <style type="text/css"> .container { border: 1px solid #ccc; margin: 10px; padding: 10px; height: 200px; } .item { background-color: #ccc; } .container-1{ text-align: center; line-height: 200px; height: 200px; } .container-2 { position: relative; } .container-2 .item { width: 300px; height: 100px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -50px; } .container-3 { position: relative; } .container-3 .item { width: 200px; height: 80px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) } .container-4 { position: relative; } .container-4 .item { width: 100px; height: 50px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }</style></head><body> <div class="container container-1"> <span>一段文字</span> </div> <div class="container container-2"> <div class="item"> this is item </div> </div> <div class="container container-3"> <div class="item"> this is item </div> </div> <div class="container container-4"> <div class="item"> this is item </div> </div></body></html>8.line-height如何继承? 如下代码：p的行高是多少?
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>line-height 继承问题</title> <style type="text/css"> body { font-size: 20px; line-height: 200%; } p { background-color: #ccc; font-size: 16px; }</style></head><body> <p>这是一行文字</p></body></html>行高是40px。
有三种情况：
// body的line-height直接是数字，则p的line-height直接就是body的line-height,为40px<style type="text/css"> body { font-size: 20px; line-height: 40px; } p { background-color: #ccc; font-size: 16px; }</style>// body的line-height直接是比例，则p的line-height直接就是p的font-size * 比例,为24px<style type="text/css"> body { font-size: 20px; line-height: 1.5; } p { background-color: #ccc; font-size: 16px; }</style>// body的line-height直接是百分比，则p的line-height直接就是body的font-size * body的line-height,为40px<style type="text/css"> body { font-size: 20px; line-height: 200%; } p { background-color: #ccc; font-size: 16px; }</style>9.css响应式
1.rem是什么？
2.响应式布局方案？
rem是什么?
px：绝对长度单位，最常用
em：相对长度单位，相对于父元素，不常用
rem：相对长单位，相对于根元素html的font-size，用于响应式
代码演示：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>rem 演示</title> <style type="text/css"> html { font-size: 100px; // 1rem = 100px } div { background-color: #ccc; margin-top: 10px; font-size: 0.16rem; }</style></head><body> <p style="font-size: 0.1rem">rem 1</p> <p style="font-size: 0.2rem">rem 1</p> <p style="font-size: 0.3rem">rem 1</p> <div style="width: 1rem;"> this is div1 </div> <div style="width: 2rem;"> this is div2 </div> <div style="width: 3rem;"> this is div3 </div></body></html>响应式布局方案?
1.媒体查询
2.rem
3.vw/vh
vw：网页视口宽度的1/100
vh：网页视口高度的1/100
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css常用面试题
