摘要 今天小编就给大家讲解一下CSS盒子模型。 相信朋友们应该关注这个话题。 小编还收集了CSS盒子模型的相关资料。 希望朋友们
今天小编就给大家讲解一下CSS盒子模型。 我相信你应该关注这个话题。 小编还收集了CSS盒子模型的相关资料。 我希望它对您有所帮助。
1、什么是车架型号
页面元素都是盒子（box），定义了元素盒子处理元素内容、内边距、外边距和边框的计算方法。
2. 利润
元素边框周围的空间（元素到元素的距离）
语法： , 定义4个方向的边距
1.单边定义：-top/right//left
(1)值：以px为单位，%占父元素宽度的%比例
正数：-left 元素向右移动，-top 元素向下移动
负数：方向相反
值auto：自动计算块级元素的外边距，对上下边距无效，块级元素水平居中
2. 缩写
： 价值 ; 定义4个方向的值
：v1 v2； v1设置上下，v2设置左右
:0 auto: 设置块级元素水平居中
：v1 v2 v3； v1设置，v2左右设置，v3设置向下
：v1 v2 v3 v4； 右上左下
3. 有边距的元素
h1~h6、p、正文、ol、ul、dl、前
一般来说，有边距的元素在开发过程中需要重新设置
方案一：*{:0;:0} 方案二：参考淘宝四、边距的特殊效果（一）合并边距
当两个垂直边距相遇时，它们会合二为一，最终距离由两个边距中较大的一个决定
(2) 行内元素外边距的表现
内联元素垂直边距无效 (img)，除非
(3)内联块外边距的表现
在同一行中，如果为行内块设置了垂直边距，则同一行中的其他行也会相应改变
(4) 保证金溢出
特殊情况下，子元素设置上边距会影响父元素
特殊情况：
1.父元素的上边框 2.为第一个子元素设置外边框，任何一种都会导致外边框溢出
解决方案：
给父元素添加边框，缺点：影响父元素的实际高度给父元素添加内边距，缺点是父元素的实际高度位于父元素第一个子元素的位置，添加一个空表3.内边缘距离
不会影响其他元素，但是会影响自己的土地大小，视觉上感觉大小发生了变化
语法：
： 价值 ; 设置 4 个方向的内边距
：v1 v2； v1设置上下，v2设置左右
：v1 v2 v3； v1设置，v2左右设置，v3设置向下
：v1 v2 v3 v4； 设置右上角左下角
单向设置：-上/右//左
box-，设置盒模型的计算方法
盒子-:-盒子； 默认值，盒模型计算，div设置的宽度，大小
box-: 边框框； div设置的宽度是外边距的大小
