CSS基础三

盒子模型

一个盒子我们会分成几个部分

     -内容区(content):我们设置width和height的时候,都是设置内容区的宽度和高度

     -内边距(padding)

     -边框(border)

     -外边距(margin)

内边距:(会影响其他盒子的位置)

边框(会影响其他盒子的位置)

外边距:(会影响其他盒子的位置)

关于垂直外边距的问题(条件:一必须是垂直方法,二必须是相邻（即就是中间两个元素之间没有任何元素）)

例一:

效果:

 

例二:

效果二:

例二为了解决父元素和子元素一起的办法,

方法一:给父元素添加一个上边距或一个上内边距

效果

方法二:

效果

 

刚刚我们讲的是块元素的盒子模型,接下来我们来讲讲内联元素的盒子模型

内容区、内边距 、边框 、外边距

1.内容区      内联元素不能设置width和height

2..内边距    

设置水平内边距,内联元素可以设置水平方向的内边距

垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局(不会影响其他盒子的位置)

3.边框

 为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局(不会影响其他盒子的位置)

4.外边距

内联元素支持水平方向的外边距，而且水平方向的相邻外边距不会重叠，而是求和

内联元素不支持垂直外边距