前端-css的盒模型

本节介绍的是css盒模型，盒模型的组成、扩展、以及塌陷问题的解决什么是盒模型盒模型的组成 盒模型的扩展 塌陷问题以及解决

---

1.什么是盒模型
任何一个元素都能生成盒模型，一个元素生产什么样子的盒模型也取决于元素的display属性，包含了五个描述盒子位置、尺寸的属性。

2.盒模型的组成
盒模型由宽度width、高度height、内边距padding、边框border、外边距margin组成。

盒模型书写元素内容的区域为：width+height=content
盒模型实体化区域：content+padding（全部值）+border（全部值）
盒模型实际占用空间：content+padding（全部值）+border（全部值）+margin（全部值）

盒模型图:
width的应用：
当元素是块级元素时，width不设置属性值会自动撑满父级元素的width区域，也就是display：block，例如<div>标签。当元素是行级标签，也就是display：inline，width是由内部内容撑开的，例如<span>

padding的应用：
作用：设置元素边框内部的宽高区域的距离，
特点：可以加载背景，帮你书写嵌套内容
属性值：通常以px为单位，padding-left，padding-right，padding-top，padding-bottom

代码示范:点击尝试

.p1{
padding: 10px;/*内边距四周都为10px*/
}
.p2{
padding:10px 20px;/*上下10px 左右20px*/
}
.p3{
padding:10px 20px 10px;/*上10px，左右20px，下10px*/
}
.p4{
padding:10px 20px 30px 40px;/*上10px，右20px，下30px，左40px，顺直钟方向*/
}

---

border的应用：
作用：设置盒模型的边框，作为盒子的实体化最外层
属性值：由边框宽度、边框形状、边框颜色组成
书写规范：通常没有固定写法，一般都为border：宽度+形状+颜色；
边框形状有：none默认值，solid实线，dashed虚线
代码示范：点击尝试

.p1{
    border:1px solid pink;/* 实线*/
}
.p2{
    border:1px dashed pink;/* 虚线*/
}

---

margin的应用：
作用：设置盒子和盒子之间的距离
特点：不能渲染背景
属性值：常用px为单位
代码示范:点击尝试

.p1{
margin: 10px;/*内边距四周都为10px*/
}
.p2{
margin:10px 20px;/*上下10px 左右20px*/
}
.p3{
margin:10px 20px 10px;/*上10px，左右20px，下10px*/
}
.p4{
margin:10px 20px 30px 40px;/*上10px，右20px，下30px，左40px，顺直钟方向*/
}

---

3.盒模型的扩展

清除默认样式height应用居中父子盒模型

清除默认样式的应用：
清除默认样式，浏览器都会加载默认样式，会对布局造成影响，做项目是一定要清除默认样式的，大部分默认标签都会默认边距，要用标签选择器（大项目使用）或者通配符（小项目）清除

代码示范：

清除默认边距：点击尝试

body,div,p{
     margin:0;
     padding:0;  /*标签选择器，大项目使用*/
}
*{
     margin:0;
     padding:0; /*小项目使用*/
}

清除<ul><ol>的默认列表前缀：点击尝试

ul,ol{
       list-style:none;
}

清除标签默认下划线：点击尝试

a{
   text-decoration:none;
}

清除标签的默认加粗：点击尝试

strong{
   font-weight:none;
}

---

height的应用：
高度属性可以设置也可以不设置，如果盒子的高度确定了，那么同级元素都会在这个固定的高度紧挨加载超出盒子固定高度则溢出。不设置高度则内部高度有内容决定。

盒子高度固定，内容溢出解决办法，利用overflow属性解决

属性值作用visble默认值，溢出部分显示hidden溢出部分不显示scroll溢出部分出现滚动条，滚动看到溢出部分auto没有溢出则显示正常，溢出则出现滚动条

代码示范：点击尝试

.p1{
   overflow:visible;
}
.p2{
   overflow:hidden;
}
.p3{
   overflow:scroll;
}
.p4{
   overflow:auto;
}

不设置高度，盒子高度自动适应内容的高度
代码示范：点击尝试

div{
width:400px;
margin:0 auto;
box-shadow:0 0 5px 10px pink;  /*父元素*/
}
p{
heigth:300px; /*子元素*/
}

---

居中的应用：
水平居中：text-algin属性，
文本类垂直居中：利用text-algin和行高line-height属性的值与内容高度一致达到垂直居中。
元素水平居中：利用定位，margin属性+padding属性，弹性布局等等。

代码示范：
文本类居中：点击尝试

.p1{
text-algin:center;
heigth:20px;
line-height:20px;
}
.p2{
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

元素水平居中：点击尝试

.p1{
    margin:0 auto;
    padding:20px 0;
}

---

父子盒模型
一般情况下父元素的width>所有的子元素的width+padding+borde+margin，如果超过则会溢出父元素
解决办法：手动计算好子元素的宽度；或者当子元素只有一个的情况下，切子元素是块级元素，则可以让子元素不设置width

---

4.margin塌陷问题及解决
margin塌陷：在两个元素的外边距发生重合，浏览器加载的外边距不是两个间距的和，而是两个边距中较大的值，而小的值则塌陷到大的值内部去

解决办法：

如果两个同级的元素发生塌陷，只给一个元素设置margin值就可以。利用bfc渲染区域，独立一块渲染区域出来就可以解决，不会影响外部元素。触发条件 bfc 用 overflow：hidden、float：left/right、position：absolute/fixed、display:inline-block

代码示范：点击尝试

div{
     width:400px; 
     height:400px;
     box-shadow:0 0 5px 10px pink;
     margin: 0 auto;
     overflow: hidden;/*除非bfc条件*/
}
p{
     width: 200px;;/*p为div的子元素*/
     height:200px;
     box-shadow:0 0 5px 10px red;
     margin: 25%;/*发生塌陷*/
}