盒子模型:
内容区:元素显示区域/
内边距:内容层到边框之间的距离/内容层到盒子轮廓的距离
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固定盒子大小