浮動佈局 註意點：三個div，left --> right > center 這種順序 Flex 設置中間盒子FLex：1，這樣的話就可以實現自適應，預設水平排列 絕對定位對齊 ...
浮動佈局
- 分為三個div，另外一個父級包含這三個div，使用float，
-
註意點：三個div，left --> right ---> center 這種順序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body { margin: 0; padding: 0; } .left { float: left; width: 300px; height: 100px; background-color: red; } .right { float: right; width: 300px; height: 100px; background-color: blue; } .center { margin: 0px 300px 0px 300px; background-color: black; height: 100px; } </style> </head> <body> <div class="father"> <div class="left">1</div> <div class="right">2</div> <div class="center">3</div> </div> </body> </html>Flex
設置中間盒子FLex：1，這樣的話就可以實現自適應，預設水平排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .father { display: flex; } .left { width: 300px; height: 100px; background-color: red; } .center { flex:1; height: 100px; background-color: black; } .right { width: 300px; height: 100px; background-color: blue; } </style> </head> <body> <div class="father"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html> flex相關知識點，一般會使用到的 http://www.runoob.com/w3cnote/flex-grammar.html 1 設置display：flex 2 容器圖： 軸：水平main axis和垂直cross axis 3 容器的屬性 flex-direction：主軸的方向，row | row-reverse | column | column-reverse; flex-wrap：換行， nowrap | wrap | wrap-reverse; flex-flow：flex-direction和flex-wrap簡寫 justify-content：主軸上的對齊方式， flex-start | flex-end | center | space-between | space-around; align-items：交叉軸上如何對齊，flex-start | flex-end | center | baseline | stretch;flex相關知識點，一般會使用到的 http://www.runoob.com/w3cnote/flex-grammar.html 1 設置display：flex 2 容器圖： 軸：水平main axis和垂直cross axis 3 容器的屬性 flex-direction：主軸的方向，row | row-reverse | column | column-reverse; flex-wrap：換行， nowrap | wrap | wrap-reverse; flex-flow：flex-direction和flex-wrap簡寫 justify-content：主軸上的對齊方式， flex-start | flex-end | center | space-between | space-around; align-items：交叉軸上如何對齊，flex-start | flex-end | center | baseline | stretch;絕對定位對齊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .one { background-color: red; position: absolute; left: 0; width: 300px; height: 100px; } .two { left: 300px; right: 300px; background-color: blue; position: absolute; height: 100px; } .three { right: 0px; width: 300px; background-color: yellow; position: absolute; height: 100px; } </style> </head> <body> <div class="father"> <div class="one">1</div> <div class="two">1</div> <div class="three">1</div> </div> </body> </html>
