HTML 盒模型/盒子模型

盒子模型：

内容区：元素显示区域/

内边距：内容层到边框之间的距离/内容层到盒子轮廓的距离

padding:50px;1个值表示盒子内边框上右下左（顺时针的方向）的内边距

padding：50px 80px; 2个值表示盒子的上下为50左右为80

padding：50px 60px 70px ;3个值表示上50   左右60   下70

padding:10px 20px 30px 40px ;4个值表示盒子内边框上右下左（顺时针的方向）的内边距,如果四个内边距相同则可以使用第一个写法

边框：边框

border-width：边框宽度

border-color:边框颜色

border-style:边框样式

边框简写形式例如：border：1px dashed red;

border:solid; 边框至少得有一个值且这个值必须是边框样式（border-style），其他元素会使用默认值，宽度默认值为3px,边框颜色默认值为字体颜色black

外边距：盒子距外边的的距离

margin:10px;  同理 和内边距一样的

margin:10px 20px       上下10   左右20

margin:10px 20px 30px   上外边距10   左右外边距20   下30

margin:10    20  30   40;    4个值表示盒子外边框上右下左（顺时针的方向）

盒子大小=内容区(content)+内边距(padding)+边框宽度（border）

每个盒子默认属性是box-sizing:content-box,随着边框和内边距的增加会使盒子本身越来越大

给盒子加上属性：box-sizing：border-box  无论怎么给盒子家样式，盒子的大小不会改变

盒子默认属性:box-sizing:content-box,盒子的实际大小=内容区(content)+内边距(padding)+边框宽度（border）

效果  盒子的大小上306x306也就是加上了内边框距离和边框宽度

 

     给盒子加上box-sizing属性  使盒子不会因为加了样式二改变盒子大小

 

效果图 

 加上box-sizing:border-box;属性盒子大小不会因为内边框和边框变大，还是200*200固定盒子大小