CSS盒模型概念及企业应用规则

						CSS盒模型的概念与企业应用规则

1、什么是盒模型；盒模型（英文即Box model）但，图片、表单元素一律看作是文本，它们并不是盒子。，比如说，一张图片里并不能放东西，它自己就是自己的内容。

​ 标准盒模型的概念分析：

​ 1、有五个属性：外边距（margin）、内边距（padding）、边框（border） 内容（content）

​ width/height（content box 内容区）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uBCkJXIL-1581417364118)(C:\Users\Lenovo\Desktop\存放图片\QQ截图20200210152301.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KIbMaDzx-1581417364125)(C:\Users\Lenovo\Desktop\存放图片\QQ截图20200210152252.png)]

​ 块级元素的width和height值在标准盒模型下，定义了一个块级元素能够存放内容的区域大小，元素的内容从width和height的左上角原点开始排列内容

​ border（border box 边框区）详解

​ 元素的边框可以单独给某一方向设置
​ 比如:
​ 设置顶部边框:border-top:宽度 种类 颜色;
​ 设置底部边框:border-bottom:宽度 种类 颜色;
​ 设置左部边框:border-left:宽度 种类 颜色;
​ 设置右部边框:border-right:宽度 种类 颜色;

​ border-style:种类; 默认是none 就是没有边框
边框有四个种类：分别为 、dotted圆点边框、 double双边框、 dashed虚线边框、solid实线边框

​ transparent （使用父元素的颜色变透明） 比如； border：50px solid transparent

​ 颜色值可以使用: 十六进制, rgb, 关键字

​ 内边距 （padding）

​ 标准盒模型的整体概念：

​ 块元素在网页内容中实际占据空间的大小是:
​ 实际占据宽度=width+左padding+右padding+左border+右border
​ 实际占据高度=height+上padding+下padding+上border+下border

​ 标准盒模型的尺寸数据详解；（标准盒模型；box-sizing:content-box 浏览器默认值）

​ 浏览器默认值：box-sizing:content-box

外边距的简写规则:

margin:10px;
/* 元素的上右下左四个外边距的值都是10px*/
margin:10px 20px;
/* 元素的上下两个外边距的值都是10px , 左右两个都是20px*/
margin:10px 20px 30px;
/* 元素的上外边距的值是10px , 左右两个都是20px, 下外边距是30px*/
margin:10px 20px 30px 40px;
/* 元素的上外边距的值是10px , 右是20px, 下外边距是30px,左外边距是40px*/

内边距的简写规则与外边距相同

​ 怪异盒模型的整体概念; ( 怪异盒模型；box-sizing:border-box)

怪异盒模型：由实际宽度决定（ 宽度：width）

​ 块元素在网页内容中实际占据空间的大小在两种不同的盒模型下的表现结果是:
标准盒模型：
实际宽尺寸=width+左padding+右padding+左border+右border
内容区宽尺寸=width

怪异盒模型：
实际宽尺寸=width
内容区宽尺寸=width-左border-右border-左padding-右padding

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z47doyqu-1581417364128)(C:\Users\Lenovo\Desktop\存放图片\QQ截图20200210152612.png)]

​ 父子元素外边距合并解决方案：1、给父元素加一个边框（border）

​ 2、 给父元素加一个内边框 （ padding）

​ 3、（ 溢出隐藏 overflow:hidden）

​ 4、给子级或父级任何一方添加；display：inlineblock

​ 5、给子级或父级任何一方添加浮动

​ 6、给子级或父级任何一方添加定位

​ 兄弟元素外边距合并现象：只需要一个margin-top或margin-bottom,而不能出现两个同时出现

​ 比如；

		6、给子级或父级任何一方添加定位

​ 兄弟元素外边距合并现象：只需要一个margin-top或margin-bottom,而不能出现两个同时出现

​ 比如；