前端笔记2

1.盒子模型（Box Model）

 每一个盒子有内到外都由4部分组成：
1.内容区（content）,内容区相当于盒子的内部的空间，盒子中的所有的内容和子元素都在内容区中

200px;
height: 200px;
background-color: #bfa;

2.边框（border）,边框是盒子的边缘，修改边框会影响到整个盒子的大小

border-width(边框的宽度)

border-color(边框的颜色)

border-style(边框的样式)

用border-width举例子,颜色跟样式一样:

如果只指定一个值，则四个方向都是该值 :    border- 10px;

如果指定两个值 上下 左右 :   border- 10px 20px;

如果同时指定四个值，则会分别设置 上 右 下 左 四个边框的宽度:   border- 10px 20px 30px 40px;

如果指定三个值，则顺序是 上 左右 下 :   border- 10px 20px 30px;

4个方向都有边框简写:     border: red 10px solid  ;  

设置上左下有边框: border-top: 10px solid orange ;border-left: 10px solid orange ;border-bottom: 10px solid orange ;

另一种写法:
border: 10px solid orange;
border-right: none;

3.内边距（padding）,内容区和边框之间的距离是内边距，修改内边距会影响到盒子的大小

padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

例子:

padding-top: 100px;
padding-right: 100px ;
padding-bottom:100px ;
padding-left: 100px;

或者:padding: 10px 20px 30px 40px;

4.外边距（margin）,外边距指的是当前的盒子与其他的盒子的距离，外边距不会影响整个盒子的大小，但是会影响盒子的位置

margin-top
margin-right
margin-bottom
margin-left

例子:

margin: 100px 200px 300px 400px;

注意:

1.外边距可以设置为一个负值，如果margin值为负数时，元素会向相反的方向移动

2.margin还可以设置为auto,当将左右外边距同时设置为auto时，浏览器会将元素的左右外边距设置为相等的值

此时当前元素将会在它的父元素中水平居中，所以我们常常将水平外边距设置为auto来设置水平居中

/*使元素在父元素中水平居中*/
margin: 0 auto;

盒子的可见框的大小由内容区、内边距和边框共同决定

2.外边距的重叠

- 相邻的垂直外边距会发生外边距重叠的现象，
- 兄弟元素的重叠外边距会取最大值
- 子元素的外边距会传递给父元素

水平方向的相邻外边距不会发生重叠，而是求和

.box3{
　　 300px;
　　height: 200px;
　　background-color: skyblue;
　　padding-top: 100px;
}

.box4{
　　 100px;
　　height: 100px;
　　background-color: red;
}

<div class="box3">
　　<div class="box4"></div>
</div>

3.内联元素的盒子模型

- 内联元素的盒模型和块元素的盒模型有一些区别
1.内联元素不能设置width和height
2.内联元素支持水平内边距。可以设置垂直内边距但是不会影响布局
3.内联元素支持水平方向的边框。可以设置垂直方向的边框，但是不会影响布局
4.内联元素支持水平方向的外边距，不支持垂直方向的外边距