盒模型
<!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"> #div1 { width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; box-sizing: border-box; } </style></head><body> <div id="div1"> this is div1 </div> <script> // document.getElementById('div1').offsetWidth </script></body></html>offsetWidth
- 失常盒子模型宽度：内容宽度（width）+padding+border+margin
- 管制总宽度为width：box-sizing：border-box
margin纵向重叠
- 相邻元素的margin-top和margin-bottom会产生重叠，最终高度会取大的
- 空白内容的<p></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>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>margin负值问题
- top和left负值，元素向上、向左挪动
- right负值，右侧元素左移，本身不受影响
- bottom负值，下方元素上移，本身不受影响
<!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"> body { margin: 20px; } .float-left { float: left; } .clearfix:after { content: ''; display: table; clear: both; } .container { border: 1px solid #ccc; padding: 10px; } .container .item { width: 100px; height: 100px; } .container .border-blue { border: 1px solid blue; } .container .border-red { border: 1px solid red; } </style></head><body> <p>用于测试 margin top bottom 的正数状况</p> <div class="container"> <div class="item border-blue"> this is item 1 </div> <div class="item border-red"> this is item 2 </div> </div> <p>用于测试 margin left right 的正数状况</p> <div class="container clearfix"> <div class="item border-blue float-left"> this is item 3 </div> <div class="item border-red float-left"> this is item 4 </div> </div></body></html>BFC了解与利用
- Block format context，块级格式化上下文
- 一块独立渲染区域，外部元素的渲染不会影响边界以外的元素
造成BFC的常见条件
- float 不是 none
- position 是 absolute 或 fixed
- overflow 不是 visible （为hidden）
- display 是 flex inline-block 等
BFC的常见利用
- 革除浮动
<!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>Document</title> <style type="text/css"> .container { background-color: #f1f1f1; } .left { float: left; } .bfc { overflow: hidden; /* 触发元素 BFC */ } </style></head><body> <div class="container bfc"> <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/> <p class="bfc">某一段文字……</p> </div></body></html>布局
圣杯布局和双飞翼布局的目标
- 三栏布局，两头一栏最先加载和渲染
- 两侧内容固定，两头内容随着宽度自适应
- 个别用于PC网页
圣杯布局和双飞翼布局的技术总结
- 应用float布局
- 两侧应用margin负值，以便和两头内容横向重叠
- 避免两头内容被两侧笼罩，一个用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>flex 布局
罕用语法回顾：
- flex-direction //横向、纵向
- justify-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>css 定位
absolute 和 relative定位
- relative 根据本身定位
- absolute 根据最近一层的定位元素定位
定位元素：
- absolute relative fixed
- body
<!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>absote relative 定位问题</title> <style type="text/css"> body { margin: 20px; } .relative { position: relative; width: 400px; height: 200px; border: 1px solid #ccc; top: 20px; left: 50px; } .absolute { position: absolute; width: 200px; height: 100px; border: 1px solid blue; top: 20px; left: 50px; } </style></head><body> <p>absolute 和 relative 定位问题</p> <div class="relative"> <div class="absolute"> this is absolute </div> </div></body></html>程度居中
- 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
程度对齐
<!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>css 图文款式
line-height的继承
<!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>css 响应式
rem概念
- 绝对长度单位，绝对于根元素，罕用于响应式布局
<!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; } 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>响应式布局的罕用计划
- media-query，依据不同的屏幕宽度设置根元素font-size
- rem，基于根元素的绝对单位
<!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"> @media only screen and (max-width: 374px) { /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */ html { font-size: 86px; } } @media only screen and (min-width: 375px) and (max-width: 413px) { /* iphone6/7/8 和 iphone x */ html { font-size: 100px; } } @media only screen and (min-width: 414px) { /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */ html { font-size: 110px; } } body { font-size: 0.16rem; } #div1 { width: 1rem; background-color: #ccc; } </style></head><body> <div id="div1"> this is div </div></body></html>vw/vh
- rem的弊病：阶梯性
- vh：网页视口高度的1/100
- vw：网页视口宽度的1/100
- vmax取两者较大值；vmin相同