07css3盒模型.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div:nth-child(1) { width: 200px; height: 200px; background-color: red; /* box-sizing: content-box; 默认值 以前标准盒模型 */ padding: 10px; border: 10px solid #000; /*盒子实际宽 width+padding+border*/ } div:nth-child(2) { width: 200px; /*此时width代表盒子真正的宽度 不是内容的宽度*/ height: 200px; background-color: purple; box-sizing: border-box; /* padding border不会撑开盒子 */ padding: 20px; border: 10px solid #000; /*盒子实际宽 width包含padding+border+内容*/ } </style> </head> <body> <div></div> <div></div> </body> </html>
