前端速成（9）css
<!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>什么是浮动</title> <style> .left, .right { float: left; width: 200px; height: 200px; background-color: pink; } .right { float: right; } </style> </head> <body> <div class="left">左青龙</div> <div class="right">右白虎</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>浮动特性1</title> <style> /* 设置了浮动（float）的元素会： 1. 脱离标准普通流的控制（浮）移动到指定位置（动）。 2.浮动的盒子不在保留原先的位置 */ .box1 { float: left; width: 200px; height: 200px; background-color: pink; } .box2 { width: 300px; height: 300px; background-color: rgb(0, 153, 255); } </style> </head> <body> <div class="box1">浮动的盒子</div> <div class="box2">标准流的盒子</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>浮动元素特性-浮动元素一行显示</title> <style> div { float: left; width: 200px; height: 200px; background-color: pink; } .two { background-color: purple; height: 249px; } .four { background-color: skyblue; } </style> </head> <body> <div>1</div> <div class="two">2</div> <div>3</div> <div class="four">4</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>浮动的元素具有行内块元素特点</title> <style> /* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */ span, div { float: left; width: 200px; height: 100px; background-color: pink; } /* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 */ p { float: right; height: 200px; background-color: purple; } </style> </head> <body> <span>1</span> <span>2</span> <div>div</div> <p>ppppppp</p> </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>浮动元素搭配标准流父盒子1</title> <style> .box { width: 1200px; height: 460px; background-color: pink; margin: 0 auto; } .left { float: left; width: 230px; height: 460px; background-color: purple; } .right { float: left; width: 970px; height: 460px; background-color: skyblue; } </style> </head> <body> <div class="box"> <div class="left">左侧</div> <div class="right">右侧</div> </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>浮动元素搭配标准流父盒子2</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 1226px; height: 285px; background-color: pink; margin: 0 auto; } .box li { width: 296px; height: 285px; background-color: purple; float: left; margin-right: 14px; } /* 这里必须写 .box .last 要注意权重的问题 20 */ .box .last { margin-right: 0; } </style> </head> <body> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li class="last">4</li> </ul> </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>浮动布局练习3</title> <style> .box { width: 1226px; height: 615px; background-color: pink; margin: 0 auto; } .left { float: left; width: 234px; height: 615px; background-color: purple; } .right { float: left; width: 992px; height: 615px; background-color: skyblue; } .right>div { float: left; width: 234px; height: 300px; background-color: pink; margin-left: 14px; margin-bottom: 14px; } </style> </head> <body> <div class="box"> <div class="left">左青龙</div> <div class="right"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </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>浮动注意点</title> <style> /* 如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示 */ .box { width: 900px; height: 300px; background-color: pink; margin: 0 auto; } .damao { float: left; width: 200px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 150px; background-color: red; } .sanmao { width: 300px; height: 240px; background-color: blue; } </style> </head> <body> <div class="box"> <div class="damao">大毛</div> <div class="ermao">二毛</div> <div class="sanmao">三毛</div> </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>为什么需要清除浮动</title> <style> .box { /* 清除浮动 */ overflow: hidden; width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .footer { height: 200px; background-color: black; } </style> </head> <body> <div class="box"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="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>伪元素清除浮动</title> <style> .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } .box { width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .footer { height: 200px; background-color: black; } </style> </head> <body> <div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer"></div> </body> </html>
注：PNG格式先将背景关掉，再用切片工具去切；存储时选择 选中的切片；
