appium---手機操作api
阿新 • • 發佈：2020-11-13
盒子模型
盒模型：分為內容（content）、填充（padding）、邊界（margin）、邊框（border）四個部分
傳統盒子模型（W3C標準盒模型content-box）：盒子的寬度 = CSS中設定的width + border + padding
CSS3盒子模型（IE盒模型border-box）：盒子的寬度 = CSS中設定的寬度width裡面包含了boder和padding也就是說，我們的CSS3中的盒子模型，padding和border不會撐大盒子
/*CSS3盒子模型*/ box-sizing: border-box; /*傳統盒子模型*/ box-sizing: content-box;
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div:nth-child(1) { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 10px; } div:nth-child(2) { /*有了這句話就讓盒子變成了CSS3盒子模型*/ /*padding和border不會再撐大盒子*/ box-sizing: border-box; width: 200px; height: 200px; background-color: deepskyblue; border: 10px solid red; padding: 10px; } </style> </head> <body> <div></div> <div></div> </body> </html>
如何選擇
移動端可以全部CSS3盒子模型
PC端如果完全需要相容,就用傳統模式,如果不考慮相容性,就選擇CSS3盒子模型