关于前端:css的盒模型

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

1. 什么是盒模型
2. 盒模型的组成
3. 盒模型的扩大
4. 塌陷问题以及解决

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 属性解决

代码示范：点击尝试

.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 塌陷：在两个元素的外边距产生重合，浏览器加载的外边距不是两个间距的和，而是两个边距中较大的值，而小的值则塌陷到大的值外部去

解决办法：

1. 如果两个同级的元素产生塌陷，只给一个元素设置 margin 值就能够。
2. 利用 bfc 渲染区域，独立一块渲染区域进去就能够解决，不会影响内部元素。
3. 触发条件 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%;/* 产生塌陷 */
}