|
box-sizing 在pc端一般使用默認(rèn)值 content-box 在移動端一般使用 border-box <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <style> .parent{width:100%;} .child{width:50%;height:30px;float:left;} .parent .child{background-color: pink;border:1px solid #333;box-sizing:content-box;} .parent2 .child{background-color: #abcdef;border:1px solid #333;box-sizing:border-box;} </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="parent2"> <div class="child"></div> <div class="child"></div> </div> <script> </script> </body> </html>
移動端通用寫法： *{margin:0;padding:0;box-sizing:border-box;}
圖標(biāo)字體： 阿里巴巴矢量圖標(biāo)庫 https://www./ 選中圖標(biāo)后添加至項(xiàng)目，然后下載至本地
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .iconfont{font-size:30px;} .icon-gouwuche{color:rgb(234,58,67);} .icon-file{color:rgb(244,189,0);} .icon-saomiao{color:rgb(42,83,205)} .icon-xialajiantou{color:rgb(85,85,85);} </style> </head> <body> <div class="parent"> <i class="iconfont icon-gouwuche"></i> <i class="iconfont icon-file"></i> <i class="iconfont icon-saomiao"></i> <i class="iconfont icon-xialajiantou"></i> </div> </div> <script> </script> </body> </html>
flex布局 彈性布局 彈性盒子布局 flex容器(flex container)：父元素 display:flex | inline-flex; flex項(xiàng)目(flex item)：子元素（不包括孫子元素）
flex容器的屬性： div元素默認(rèn)是塊元素，垂直排列 使用flex或者inline-flex布局之后，會自動水平排列 在沒有設(shè)置容器寬度的情況下，flex的寬度是100%，而inline-flex的寬度取決于項(xiàng)目總寬度 在設(shè)置容器寬度的情況下，二者的容器寬度相同 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;} .parent{background:#abcdef;} .parent1{display: flex;} .parent2{display: inline-flex;} </style> </head> <body> <div class="parent parent1"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent parent2"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;} .parent{background:#abcdef;width:100%;} .parent1{display: flex;} .parent2{display: inline-flex;} </style> </head> <body> <div class="parent parent1"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent parent2"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </body> </html>
flex-direction 決定主軸方向 row 默認(rèn)水平軸為主軸，左邊開始右邊結(jié)束 row-reverse 水平軸為主軸，右邊開始左邊結(jié)束 column 垂直軸為主軸，上邊開始下邊結(jié)束 column-reverse 垂直軸為主軸，下邊開始上邊結(jié)束 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;} .parent{background:#abcdef;display: flex;} .parent1{flex-direction:row;} .parent2{flex-direction:row-reverse;} .parent3{flex-direction:column;} .parent4{flex-direction:column-reverse;} </style> </head> <body> <div class="parent parent1"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent2"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent3"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent4"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> </body> </html>
flex-wrap 一行排不下時是否換行 nowrap 不換行，進(jìn)行壓縮（默認(rèn)值） wrap 換行 wrap-reverse 換行的排在前面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;} .parent{background:#abcdef;display: flex;} .parent1{flex-wrap:nowrap;} .parent2{flex-wrap:wrap;} .parent3{flex-wrap:wrap-reverse;} </style> </head> <body> <div class="parent parent1"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> </div> <div class="parent parent2"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> </div> <div class="parent parent3"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> </div> </body> </html>
flex-flow 是flex-direction和flex-wrap的簡寫 如：flex-flow:row wrap;
justify-content 項(xiàng)目在主軸上的對齊方式 flex-start 整體左對齊 flex-end 整體右對齊 center 整體居中對齊 space-between 兩端對齊 space-around 每個項(xiàng)目的左右間距相等（項(xiàng)目之間的間距是項(xiàng)目與邊框的間距的2倍） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;} .parent{background:#abcdef;display: flex;} .parent1{justify-content:flex-start;} .parent2{justify-content:flex-end;} .parent3{justify-content:center;} .parent4{justify-content:space-between;} .parent5{justify-content:space-around;} </style> </head> <body> <div class="parent parent1"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent2"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent3"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent4"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent5"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> </body> </html>
align-items 在交叉軸上的排列方式 flex-start 上邊對齊 flex-end 下邊對齊 center 居中對齊 baseline 基線對齊 stretch 默認(rèn)值，如果項(xiàng)目沒有設(shè)置高度，或者高度設(shè)置為auto，則默認(rèn)占滿整個容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;} .parent{background:#abcdef;display: flex;} .parent .child:nth-child(even){height:130px;} .parent1{align-items:flex-start;} .parent2{align-items:flex-end;} .parent3{align-items:center;} .parent4{align-items:baseline;} .parent5 .child{height:auto;} .parent5{align-items:stretch;} </style> </head> <body> <div class="parent parent1"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent2"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent3"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent4"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> <div class="parent parent5"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div> </body> </html>
align-content 交叉軸的對齊方式（針對多行，如果單行是不起作用的） 將所有項(xiàng)目看成一個整體 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;} .parent{background:#abcdef;display: flex;flex-wrap:wrap;height:300px;border:1px solid;} .parent1{align-content:flex-start;} .parent2{align-content:flex-end;} .parent3{align-content:center;} .parent4{align-content:space-between;} .parent5{align-content:space-around;} .parent6 .child{height:auto;} .parent6{align-content:stretch;} </style> </head> <body> <div class="parent parent1"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div> <div class="parent parent2"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div> <div class="parent parent3"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div> <div class="parent parent4"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div> <div class="parent parent5"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div> <div class="parent parent6"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div> </body> </html>
|
|
|
