1.盒模型css
/*以下代码,请问div1的offsetWidth是多大?*/ <style> #div1{ width:100px; padding:10px; border:1px solid #ccc; margin:10px; } </style> <div id="div1"></div> /*答案:offsetWidth=width+padding+border=122px:*/
/*扩展:若是让offsetWidth=100px,该如何作?*/ <style> #div1{ width:100px; padding:10px; border:1px solid #ccc; margin:10px; box-sizing:border-box; /*设置盒模型*/ } </style> <div id="div1"></div>
2.margin纵向重叠问题这个之前知道会重叠可是不知道空标签也会重叠
html
/*以下代码,AAA和BBB之间的距离是多少?*/ <style> p{ font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } </style> <p>AAA</p> <p></p> <p></p> <p></p> <p>BBB</p> /* 答案:15px。 解释:相邻的margin-top和margin-bottom会发生重叠; 空白的<p></p>也会重叠。 */
3.margin负值问题布局
- margin-top和margin-left负值,元素向上、向左移动; - margin-right负值,右侧元素移动,自身不受影响; - margin-bottom负值,下方元素移动,自身不受影响。
4.BFC的理解和应用学习
什么是BFC?如何应用? BFC: block format context 块级格式化上下文 一块独立渲染区域,内部元素的渲染不会影响边界之外的元素 造成BFC的常见条件: float:不是none position:absolute/fixed overflow:部位visible display:inline-block,flex等 BFC常见应用 清除浮动
5.如何实现圣杯布局和双飞翼布局flex
圣杯布局和双飞翼布局的目的 三栏布局,中间一栏最早加载和渲染(内容最重要) 两侧内容固定,中间内容随着宽度自适应 通常用于PC网页 圣杯布局和双飞翼布局的技术总结 使用float布局 两侧使用margin负值,以便和中间内容横向重叠 防止中间内容被两侧覆盖,一个用padding一个用margin
圣杯布局 <!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <style> .header{ width: 100%; height: 50px; background: red; } /* 2.padding两边留白 */ .content{ padding: 0 200px 0 200px; background: yellow; } /* 1.浮动布局 */ .content .col{ float: left; } .content .main{ width: 100%; height: 50px; background: blue; } /* 3.左 margin-left: -100%;*/ .content .left{ width: 200px; height: 50px; background: #eee; margin-left: -100%; position: relative; right: 200px; } /* 4.右 margin-right: -200px; */ .content .right{ width: 200px; height: 50px; background: peru; margin-right: -200px; } .footer{ width: 100%; height: 50px; background: green; } /* 手写clearfix */ .clearfix:after{ content: ''; display: table; clear: both; } .clearfix{ *zoom:1; } </style> <div class="header">header</div> <div class="content clearfix"> <div class="main col">center</div> <div class="left col">left</div> <div class="right col">right</div> </div> <div class="footer">footer</div> </body> </html>
双飞翼布局 <!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <style> .header{ width: 100%; height: 50px; background: red; } .content{ width: 100%; background: yellow; } /* 1.浮动布局 */ .content .col{ float: left; } .content .main{ width: 100%; height: 50px; background: blue; } /* 2.margin留白 */ .content .main-wrap{ margin: 0 200px 0 200px; } /* 3.左 margin-left: -100%;*/ .content .left{ width: 200px; height: 50px; background: #eee; margin-left: -100%; } /* 4.右 margin-left: -200px; */ .content .right{ width: 200px; height: 50px; background: peru; margin-left: -200px; } .footer{ width: 100%; height: 50px; background: green; } /* 手写clearfix */ .clearfix:after{ content: ''; display: table; clear: both; } .clearfix{ *zoom:1; } </style> <div class="header">header</div> <div class="content clearfix"> <div class="main col"> <div class="main-wrap">center</div> </div> <div class="left col">left</div> <div class="right col">right</div> </div> <div class="footer">footer</div> </body> </html>
6.手写clearfixui
/* 手写clearfix */ .clearfix:after{ content: ''; display: table; clear: both; } .clearfix{ *zoom:1; }
7.flex实现一个三点的色子spa
flex经常使用语法回顾: flex-direction:方向 justify-content:元素在主轴的对齐方式 align-items:元素在交叉轴的对齐方式 flex-wrap:换行 align-self:子元素在交叉轴的对齐方式
align-self这个其实我一直没仔细看啥意思,如今学习回顾了是怼子元素起做用的
code
<!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <style> .box{ width: 200px; height: 200px; border: 1px solid #333; /* flex布局 */ display: flex; justify-content: space-between; } .point{ width: 50px; height: 50px; background-color: #666; border-radius: 50%; } .point:nth-child(2){ align-self: center; } .point:nth-child(3){ align-self: flex-end; } </style> <div class="box"> <div class="point"></div> <div class="point"></div> <div class="point"></div> </div> </body> </html>
1.absolute和relative分别依据什么定位?orm
relative依据自身定位 absolute依据最近一层的定位元素定位 定位元素:absolute,relative,fixed body
2.居中对齐有哪些实现方式?htm
水平居中 1. inline元素:text-align:center 2. block元素:margin:auto 3. absolute元素:left50%+margin-left负值 4. flex元素:display: flex; jusitity-content: center; 垂直居中 1. inline元素:line-height的值等于height的值 2. absolute元素1:top50%+margin-top负值 3. absolute元素2:transform:translate(-50%,-50%) 4. absolute元素3:top,bottom,left,right=0+margin:auto 能够实现元素水平垂直居中,既保证兼容性又没必要知道子元素的长度。 5. flex元素:display: flex; align-items: center;
<!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <h1>水平居中</h1> <style> .shuiping{ border:1px solid #333; padding: 20px; } .shuiping .container { background: #666; margin-bottom: 10px; height: 50px; } .shuiping .inline{ text-align: center; } .shuiping .inline .content{ background: green; } .shuiping .block{ } .shuiping .block .content{ width: 300px; margin: 10px auto; background: green; } .shuiping .absolute{ position: relative; } .shuiping .absolute .content{ width: 200px; height: 40px; position: absolute; background: green; left: 50%; margin-left: -100px; } .shuiping .flex{ display: flex; justify-content: center; } .shuiping .flex .content{ background: green; } </style> <div class="shuiping"> <div class="container inline"><span class="content">inline元素</span></div> <div class="container block"> <div class="content">block元素</div> </div> <div class="container absolute"> <div class="content">absolute</div> </div> <div class="container flex"> <div class="content">flex元素</div> </div> </div> <h1>垂直居中</h1> <style> .cz{ border:1px solid #333; padding: 20px; } .cz .container { background: #666; margin-bottom: 10px; height: 50px; } .cz .inline{ } .cz .inline .content{ line-height: 50px; background: green; } .cz .absolute{ position: relative; } .cz .absolute .content{ width: 200px; height: 40px; position: absolute; background: green; left: 50%; margin-left: -100px; top: 50%; margin-top: -20px; } .cz .absolute2{ position: relative; } .cz .absolute2 .content{ width: 200px; height: 40px; position: absolute; background: green; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .cz .transform{ position: relative; } .cz .transform .content{ background: green; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) } .cz .flex{ display: flex; justify-content: center; align-items: center } .cz .flex .content{ background: green; } </style> <div class="cz"> <div class="container inline"><span class="content">inline元素</span></div> <div class="container absolute"> <div class="content">absolute</div> </div> <div class="container absolute2"> <div class="content">absolute2</div> </div> <div class="container transform"> <div class="content">transform</div> </div> <div class="container flex"> <div class="content">flex元素</div> </div> </div> </body> </html>
1.line-height:如何继承
以下代码,p的行高将会是多少? <style> body{ font-size:20px; line-height:200% } p{ font-size:16px; } </style> <body> <p>AAA</p> </body> 答案:40px(font-size * line-height)=20*200%=40
我也不知道写百分比继承的是计算出来的值,之前都没有用过百分比这种line-height
写具体值,如30px,则继承该值(比较好理解) 写比例,如2/1.5,则继承该值(比较好理解) 写百分比,如200%,则继承计算出来的值(考点)
1.rem是什么?
rem是一个长度单位 px:绝对长度单位,最经常使用 em:相对长度单位,相对于父元素,不经常使用 rem:相对长度单位,相对于根元素,经常使用于响应式布局
2.响应式布局的常见方案?
media-query:根据不一样的屏幕宽度设置根元素font-size rem:基于根元素的相对单位
3.vw/vh
rem&media-query弊端:阶梯性 网页视口尺寸: window.screen.height:屏幕高度 window.innerHeight:网页视口高度 document.body.clientBody:body高度 vw/vh: vh:网页视口高度1/100 vw:网页视口宽度1/100 vmax取二者最大值,vmin取二者最小值 window.innerHeight=100vh window.innerwidth=100vw