css标准盒模型
发布时间
阅读量：
阅读量
文章目录
- 标准盒模型
- 一、padding（内边距）
- 二、margin（外边距）
- 总结
标准盒模型
标准盒模型盒子的实际大小
盒子的总宽度 = width + 左右的padding + 左右的border
盒子的总高度 = height + 上下的padding + 上下的border一、padding（内边距）
控制内容与盒子边框的关系（又叫内补白）
用法：
1）用来调整内容在容器中的位置关系
2）padding值是额外加在元素原有大小之上的，加完会改变原元素的大小（对于标准盒模型而言）
如想保证元素大小不变，需从元素宽或高上减掉添加的padding属性值属性值的4种方式：
四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px;}
二个值：上下 左右 {padding:10px 20px;}
一个值：四个方向 padding:2px; 说明：
可单独设置一方向填充，
如：上方向 padding-top:10px;
右方向 padding-right:10px;
下方向 padding-bottom:10px;
左方向 padding-left:10px;二、margin（外边距）
控制盒子与盒子之间的关系
边界：margin,在元素外边的空白区域，被称为边距。
margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界
margin:0 auto; 盒子在网页中水平居中（1）属性值的4种方式：
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向 margin:2px;（2）margin可以设置负值
（3）margin常见的bug:
当两个盒子上下排列，两个盒子之间的外边距都设置了时，外边距会重叠，谁的margin值大谁的值优先被设置；
解决的方法：只给一个盒子设置外边距；
2.当父元素下的第一个元素设置margin-top 会错误设置给父元素；
解决方法：
父元素：
1.给父元素设置border;
2.设float
3.padding-top:1px;
4.padding-top:(margin-top的值)；
5.overflow:hidden 超出部分隐藏
子元素：
设float总结
此节简要总结了CSS背景（background）属性的相关知识。后续计划会持续更新HTML基础知识相关知识。文章为本人原创内容。如若遇到任何不妥之处，请随时赐教。
此节简要总结了CSS背景（background）属性的相关知识。后续计划会持续更新HTML基础知识相关知识。文章为本人原创内容。如若遇到任何不妥之处，请随时赐教
全部评论 (0)
还没有任何评论哟~