一:浮动布局
what | why:让块级(block)标签在父级的宽度限制下同行显示,一行显示不下,自动换行 注:要到达一行显示个数固定,一定要固定父级的宽度 语法: 子级 { float :left | right } 问题:子级不再撑开父级高度(不完全脱离文档流) 脱离文档流:=>层次结构会上移,覆盖有位置重叠且没脱离文档流的标签 不完全:浮动布局后,可以重新让子级撑开父级的高度 清浮动:让不完全脱离文档流的子级重新撑开父级的高度,这种做法就叫清浮动 语法: 父级:after{ content:""; display:block; clear:both; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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属性(脱离文档流盒子特有的)改变显示层次的属性(值大者覆盖值小者)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)
如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不受影响)
解决方案: 父级采用 相对定位(父相子绝)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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.相对定位不脱离文档流 => 不会影响自身布局,自身布局采用的还是原来的布局 注:相对定位定位方位只会改变显示图层,不会改变盒子的原有位置,原有位置不变就不会影响兄弟盒子
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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是匀速 一般不加延迟时间,会给用户造成卡顿的感觉,用户体验不好。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>