补充：
1.浮动布局
解决block盒子同行显示 =>不完全脱离文档流 =>不再撑高父级高度
脱离文档流：不再页面中占位（显示层次高于文档流）
不完全：可以通过清浮动操作，让子级重新撑开父级高度
子级浮动（约定俗成如果有子级浮动，该子级的所有兄弟都应该浮动）
父级清浮动，拥有合适的高度，让兄弟标签布局不出现问题（约定俗成父级都必须清浮动）
float: left | right; .sup:after { content: ""; display: block; clear: both; }
2.定位
让布局的block盒子完全脱离文档流（自身布局独立），根据自身的参考进行布局
定位布局是完全脱离文档流，永远不会撑开父级高度 => 父级一定要自己设置高度
position: fixed | absolute | relative
fixed：固定定位，完全脱离文档流，参考系为窗口，上下取上左右取左
absolute：绝对定位，完全脱离文档流，参考系为最近的定位父级，上下取上，左右取左
relative：相对定位，不脱离文档流（定位不改变自己原有的位置，改变显示图层），参考系为自身原有位置，上下取上左右取左（top=-bottom，left=-right）
fixed：相对静止窗口 => 广告，tap，客服，top
absolute | relative：父相子绝 =>自己在父级规定的显示区域中进行布局
一：字体图标
fa框架：http://fontawesome.dashgame.com/ 下载 => 引入css文件 <i class="fa fa-**"></i>
二：盒子显隐
1.显示效果 display：name; #没有任何显示效果 消失的时候在页面中不占位，显示的时候在页面中占位 2.盒子透明度 opacity：0; #所在区域留白 消失显示在页面中都占位 只要盒子在页面中有占位，就会影响其他盒子布局，所以显隐的盒子都需要做定位处理 opacity可以动画处理，display不能动画处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子显隐问题</title> <style> div{ width: 200px; height: 200px; background-color: yellowgreen; margin-top: 10px; } .ctrl:hover{ display: block; } .div2{ opacity: 0; position: absolute; transition: 2s; } .ctrl:hover~.div2{ opacity: 1; } </style> </head> <body> <div class="ctrl">张艺兴</div> <div class="div2">小仙女</div> <div class="div3">南柱赫</div> </body> </html>
三：overflow属性
解决：超出盒子规定的显示区域外的内容的处理方式
将超出规定区域的内容隐藏，隐藏掉的内容无法直接查看
overflow：hidden;
不超出正常，超出滚动，两种不同的处理方式来处理超出规定区域的内容
overflow：auto；
一致以滚动方式处理超出规定区域的内容
overflow：scroll；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow问题</title> <style> div { height: 200px; width: 200px; background-color: maroon; margin-top: 10px; } .div1{ /*height: 50px;*/ /*将超出部位隐藏*/ /*overflow: hidden;*/ /*不超出部分正常显示，超出部分以滚轮形式显示*/ /*overflow: auto;*/ /*下面也会出现滚轮形式，一致以滚动方式处理超出规定区域的内容*/ /*overflow: scroll;*/ } </style> </head> <body> <div class="div1">div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 </div> <div class="wrapper"> <div class="scroll"> <!--<div class="box">1</div>--> <!--<div class="box">2</div>--> <!--<div class="box">3</div>--> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>overflow问题</title> <style> div { height: 200px; width: 200px; background-color: maroon; margin-top: 10px; } .wrapper{ height: 260px; width: 200px; border: 1px solid black ; margin: 0 auto; } .scroll { width: 600px; height: 260px; background-color: red; margin-top: 0; } .box { width: 200px; height: 260px; background-color: green; margin-top: 0; float: left; font: 900 50px/260px "STSong"; color: red; text-align: center; } .box:nth-child(2n) { background-color: yellowgreen; } .wrapper{ position: relative; /*wrapper规定了显示区域，所以要对超出显示区域的内容进行隐藏*/ overflow: hidden; } .scroll{ position: absolute; /*那个小盒子滚动到显示区域就显示谁，此处显示的是第一张图片*/ left:calc(-200px*0); transition:2s; } .wrapper:hover .scroll{ /*此处显示的是第二张图片*/ left:calc(-200px*1); } .wrapper:hover .scroll{ /*此处显示的是第三张图片*/ left:calc(-200px*2); } </style> </head> <body> <div class="wrapper"> <div class="scroll"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </div> </body> </html>
四：伪类设计边框
设计边框 =>在页面中占位 =>让其定位处理 =>脱离文档流 => 不占位 => 层级结构复杂 设计一个不占位的边框 => 伪类 ：before | ：after .box{ 200px; height:200px; background-color:red; /*给伪类边框提供定位参考系*/ position:relative; } .box:before{ content:""; /*上下边框*/ 180px; height:1px; background-color:green; /*控制边框位置*/ position:absolute; bottom:0px; left:10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类设计边框</title> <style> .box{ width: 200px; height: 200px; background-color: brown; position: relative; font: 900 40px/80px "STSong"; } .box:after{ content: ""; /*上下边框*/ width: 190px; height: 10px; background-color: #ff6700; /*控制边框位置*/ position: absolute; bottom: -10px; left: 10px; } .box:before{ content: ""; width: 10px; height: 200px; background-color: darkcyan; position: absolute; bottom: 0; left: -10px; } </style> </head> <body> <div class="box">努力去见他</div> </body> </html>
五：盒子阴影
注意： 1.盒子阴影是一个独立的显示图层，永远出现在背景层之下（即使背景层透明，也会被覆盖遮挡） 2.盒子可以绑定多套阴影图层】 3.阴影图层永远相对于显示图层进行偏移 语法：（逗号分隔表示可以有多套阴影，不止一个） box-shadow:X轴偏移 Y轴偏移 虚化程度 阴影宽度，阴影颜色，...;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> .wrapper{ height: 200px; width: 180px; background-color: darksalmon; margin: 0 auto; } .wrapper:hover{ /*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/ box-shadow: 0 5px 20px -5px #424242; } </style> </head> <body> <div class="wrapper"></div> </body> </html>
六：2d形变
形变参考点（盒子左上角原点） transition-origin：x轴坐标 y轴坐标； 形变属性 transition：rotate（） transition（） scale（）； 旋转角度（deg） 偏移角度（px）缩放比例（无单位） 1.形变多个效果要同时父子给transform属性 transform：rotate（1080deg） translate（-300px）; 2.属性值之间的先后顺序往往也会导致过程的不同 transform：translateX（-300px） rotate(-1080deg); #2过程的运动效果与1 不同
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2d形变</title> <style> div{ width: 150px; height: 150px; background-color: #ff6700; margin: 10px auto 0; font: 100 50px/100px 'STSong'; color: blue; text-align: center; transition: 1.5s; } /*原点旋转3圈*/ .box1:hover{ transform:rotate(1080deg); } /*X轴中心线旋转*/ .box2:hover{ transform: rotateX(1080deg); } /*Y轴中心线旋转*/ .box3:hover{ transform: rotateY(1080deg); } /*X轴平移*/ .box4:hover{ transform: translateX(300px); } /*边旋转边沿着X轴移动*/ /*1.形变多个效果要同时赋值给transform属性 2.属性值之间的先后顺序往往也会导致过程的不同*/ .box5:hover{ transform: rotate(1080deg) translateX(-300px); } /*X轴放大两倍，Y轴放大两倍*/ .box6:hover{ transform: scaleX(2) scaleY(2); } /*X轴放大两倍，Y轴同时缩放0.5倍*/ .box7:hover{ transform: scale(2,0.5); } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <div class="box6">6</div> <div class="box7">7</div> </body> </html>