关于前端: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%;/*产生塌陷*/
}