CSS和模型概念以及企业应用规划
1.什么是盒模型
盒模型：是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6I4O1DQ6-1581235403062)(C:\Users\dell\Desktop\我的博客\图片1.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200209160402654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5MTUxMw==,size_16,color_FFFFFF,t_70)
2.标准盒模型
<head>
<style>
div{
width:300px;
height:300px;
background-color:red;
boder:30px solid black;
/* 边框：宽度 样式 颜色 */
/* solid直线边框 dashed虚线边框 dotted点线边框 double双实线边框 */
border-top-style: dashed;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: solid;
border-top-color: red;
border-right-color: gold;
border-bottom-color: blue;
border-left-color: silver;
/*内边距*/
padding-top:30px;
padding-bottom:20px;
padding-left:20px;
padding-right:30px;
/*复合写法和外边距类似*/
}
</style>
</head>
<body>
<div>
文章”的“章”字，是个会意字，从音从十。古代奏音乐，连奏十段才能结束（十，数之终也），这十段乐就是一章。所以，文章文章，也有段落。文章既从“音乐”里会意出来，应是用文字表达出来的东西，读起来如音乐一样美妙无穷、悦耳动听的文字，传诵开来，才配得上“文章”一词的真正含义。
</div>
</body>
结果：![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bexTuGNu-1581235403064)(C:\Users\dell\Desktop\我的博客\QQ截图20200209144519.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200209160337337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5MTUxMw==,size_16,color_FFFFFF,t_70)
3.怪异盒模型
怪异盒模型：
实际宽尺寸=width
内容区宽尺寸=width-左border-右border-左padding-右padding
怪异盒模型首先就定义了整个盒子的大小，包括边框和内边距，而标准盒模型则是在定义的内容区外添加边框和内边距。
<head>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
div {
margin: 0 auto;
}
.kiva {
width: 121px;
height: 140px;
background-color: pink;
box-sizing: border-box;
border: 10px solid black; /*怪异盒模型*/
padding: 20px;
}
.ixa {
width: 121px;
height: 140px;
background-color: pink;/*标准盒模型*/
border: 10px solid black;
padding: 20px;
/* margin-top: 100px; */
}
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="kiva">
<img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=961224733,2320658306&fm=179&app=42&f=JPEG?w=121&h=140" alt="">
</div>
<div class="ixa">
<img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=961224733,2320658306&fm=179&app=42&f=JPEG?w=121&h=140" alt="">
</div>
</body>
结果：![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y70jY5Zh-1581235403065)(C:\Users\dell\Desktop\我的博客\QQ截图20200209151647.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200209160417652.png)
4.企业级应用规划
父子元素外边距合并： 当将父盒子居中时，子盒子也居中，并且子盒子在父盒子中也居中时，用到该方法。若不使用下述4方法，则子盒子无法在父盒子中居中。
<head>
.father{
width: 300px;
height: 300px;
background-color: pink;
/* 1.给父级设置一个边框 */
/* border: 1px solid transparent; */
/* 2.给父级设置内边距 */
/* padding: 1px; */
/* 3.溢出隐藏 */
overflow: hidden;
/* 4.给子级或父级任何一方添加display:inlineblock; */
/* 5.给子级或父级任何一方添加浮动 */
/* 6.给子级或父级任何一方添加定位 */
}
}
.son {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 100px auto;
}
</head>
<body>
div class="father">
<div class="son"></div>
<!-- 溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏 -->
</div>
</body>
兄弟元素外边距合并：关于期中两个margin值的关系，下面代码中kiva中的margin-bottom>ixa的margin-top所以使用kiva的margin-bottom值。按照两个值的大小关系，谁大取谁的值。另外还有两个情况如下：
1兄弟元素之间，垂直方向外边距如果有一个为负数，会叠加，和普通加减计算一样
2兄弟元素之间，垂直方向外边距如果都为负数，不会叠加，而会发生外边距合并现象，并且外边距最终会取绝对值较的。
另外在验证的时候应先删除原有默认的margin值，margin：0；
<head>
<style>
.kiva{
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 50px;
}
.ixa{
width: 200px;
height: 200px;
background-color: lightblue;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="kiva"></div>
<div class="ixa"></div>
</body>
-color: lightblue;
margin-top: 30px;
}
