<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css 盒模型详解</title> </head> <body> <div style="border: 5px solid red; 200px; height: 200px"></div> <script> let a = `每一个可见的HTML元素都是一个盒子,由外到内分为四部分,margin border padding content 其中content是html元素的内容,另外三个是css属性`; let b = `当 box-sizing 为 content-box 时,这种是标准盒模型,也就是默认的,其中设置的css宽度属性等于 content`; let z = `当 box-sizing 为 border-box 时,这种是IE盒模型,其中设置的css宽度属性等于 content + padding + border`; let c = `盒子的宽度= margin + border + padding + content;`; let d = `图片 表单元素一律看作是文本;`; </script> </body> </html>