一：浮动布局
what | why：让块级（block）标签在父级的宽度限制下同行显示，一行显示不下，自动换行 注：要到达一行显示个数固定，一定要固定父级的宽度 语法： 子级 { float ：left | right } 问题：子级不再撑开父级高度（不完全脱离文档流） 脱离文档流：=>层次结构会上移，覆盖有位置重叠且没脱离文档流的标签 不完全：浮动布局后，可以重新让子级撑开父级的高度 清浮动：让不完全脱离文档流的子级重新撑开父级的高度，这种做法就叫清浮动 语法： 父级：after{ content:""; display:block; clear:both; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局</title> <link rel="stylesheet" href="css/reset.css"> <style> .div { width: 200px; height: 200px; background-color: yellow; margin-right: 10px; float: right; } </style> <style> .ul1 { background-color: pink; width: 600px; margin: 0 auto; } .ul1 li { width: 200px; height: 60px; } .ul1 li:nth-child(2n) { background-color: orange; } .ul1 li:nth-child(2n - 1) { background-color: red; } /*谁们需要同行排列, 谁们就用浮动布局处理*/ .ul1 li { float: left; /*float: right;*/ } /*谁的高度没有被浮动子级撑开, 谁来清浮动*/ .ul1:after { content: ""; display: block; clear: both; } .bro { width: 50px; height: 50px; background-color: black; } </style> </head> <body> <!--<div class="div"></div>--> <ul class="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="bro"></div> <!--了解--> <!--:after | :before 伪类 -> 内容--> <style> .box:after { /*display: block;*/ content: "000"; } .box:before { /*display: block;*/ content: "***"; } </style> <div class="box">123</div> </body> </html>
二：定位布局
2.1固定定位（小广告）
what | why：盒子相对于屏幕完成位置布局，不会随着屏幕内容的滚动而滚动（相对于屏幕窗口是静止的），且和页面内容发生重叠时，该布局下的内容显示层次更高（覆盖其他内容） 语法： position：fixed; 固定定位总结： 1.参考系为页面窗口 2.一旦设置定位属性，top | bottom | left | right 四个方位（是定位属性盒子特有的）均可以参与布局 3.上下同时出现取上，同理左右取左 4.固定定位会完全脱离文档流（永远不会撑开父级高度 =>布局中父级一旦要自己设置高度） 5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子，两个完全脱离文档流盒子的显示层次可以z-index属性（脱离文档流盒子特有的）改变显示层次的属性（值大者覆盖值小者）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定定位</title> <!--<link rel="stylesheet" href="css/reset.css">--> <style> .info { width: 120px; height: 220px; background-color: orange; /*info采用固定定位*/ position: fixed; /*当盒子开的了定位属性, 该盒子及㐀通过 top | bottom | left | right 四个方位完成布局*/ top: 0; left: 0; z-index: 10; } .sup { width: 200px; height: 200px; background-color: pink; /*没有脱离文档流的盒子添加z-index属性无用*/ z-index: 1000; } /*无用*/ /*.sup:after {*/ /*content: "";*/ /*display: block;*/ /*clear: both;*/ /*}*/ .sub { width: 100px; height: 100px; background-color: black; position: fixed; left: 50px; right: 50px; bottom: 50px; top: 50px; z-index: 1; } </style> </head> <body> <div class="info"></div> <div class="sup"> <div class="sub"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
2.2绝对定位
what | why：兄弟标签之间不相互影响，都参照父级的显示区域来完成布局语法：
position：absolute； 绝对定位总结： 1.参考系为最近的定位父级（父级一般采用相对定位relative来辅助自己绝对定位） 2.一旦设置定位属性，top | bottom | left | right 四个方位（是定位属性盒子特有的）均可以参与布局 3.上下同时出现取上，同理左右同时出现取左 4.绝对定位会完全脱离文档流（永远不会撑开父级高度 =>布局中父级一定要自己设置高度） 5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子，两个完全脱离文档流的盒子显示层次可以z-index属性（脱离文档流盒子特有的）改变显示层次的顺序（值大者覆盖值小者）
如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不受影响)
解决方案: 父级采用 相对定位（父相子绝）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位</title> <style> .sup { width: 300px; height: 300px; background-color: pink; margin: 0 auto; } .sub1 { width: 100px; height: 50px; background-color: green; position: absolute; z-index: 10; right: 0; bottom: 0; top: 0; } .sub2 { width: 50px; height: 100px; background-color: cyan; position: absolute; z-index: 11; left: 0; bottom: 0; top: 0; } .sup { position: relative; } </style> </head> <body> <div class="sup"> <div class="sub1"></div> <div class="sub2"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
2.3相对定位（了解）
what |why：核心用处 => 父相子绝 语法： position：relative： 相对定位总结： 1.参考系为自身原有位置 2.一旦设置定位属性，top | bottom | left | right 四个方位（是定位属性盒子特有的）均可以参与布局 3.top = -bottom | left = -right（上下取上，左右取左）（也就是设置top的时候是想相对于原位置向下移动相应的像素，而设置bottom的时候是向上移动相应的像素点） 4.相对定位不脱离文档流 => 不会影响自身布局，自身布局采用的还是原来的布局 注：相对定位定位方位只会改变显示图层，不会改变盒子的原有位置，原有位置不变就不会影响兄弟盒子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>相对定位</title> <style> .box { width: 200px; height: 200px; background-color: red; margin-left: 100px; margin-top: 200px; } .box { position: relative; top: 200px; /*bottom: -10px;*/ /*bottom: 10px;*/ } .bbb { width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="box"></div> <div class="bbb">123</div> </body> </html>
三：过渡动画
持续时间： transition-duration：0.5s; 延迟时间： transition-delay：1s; 过渡属性：all | 属性1，...，属性n | eg：height，background-color transition-property：all; 过渡曲线：ease ease | ease-in | ease-in-out | linear cubic-bezier(0.83, 1.46, 0, -1.29) ; #贝塞尔曲线 transition-timing-function：cubic-bezier(0.83, 1.46, 0, -1.29); 简写： 持续时间 延迟时间 过渡时间们 运动的贝塞尔曲线 transition：2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29)； transition：.3s linear； #linear是匀速 一般不加延迟时间，会给用户造成卡顿的感觉，用户体验不好。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定位动画案例</title> <style> .wrap { width: 200px; height: 300px; background-color: #666666; margin: 0 auto; position: relative; } .box { width: 200px; /*height: 80px;*/ height: 0; background-color: #ff6700; position: absolute; bottom: 0; left: 0; } .box { /*持续时间*/ transition-duration: 3s; /*延迟时间*/ /*transition-delay: 1s;*/ /*过渡属性: 属性1, ..., 属性n | all eg:height, background-color */ /*transition-property: all;*/ /*过渡曲线*/ /*ease | ease-in | ease-out | ease-in-out | linear cubic-bezier(0.83, 1.46, 0, -1.29)*/ /*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/ /*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/ transition: .3s linear; } .wrap:hover .box { height: 200px; background-color: red; } /*需求: 没有高度时, 将所有子级内容隐藏*/ .box { /*超出自己范围的内容如何处理*/ overflow: hidden; } </style> </head> <body> <div class="wrap"> <div class="box">123</div> </div> </body> </html>