7.15复习每一个标签都是一个盒子，可以通过六大属性来设置盒子有margin、border、padding、width、

每一个标签都是一个盒子，可以通过六大属性来设置盒子有margin、border、padding、width、height、background,对于男标签来说，六大属性都可以设置，对于女标签，宽高不起作用。

在网页上宽：左右margin+左右border+左右padding+width 在网页高度：如果一个div没有设置width，它占父元素的100%,如果父元素宽度 960px,div(son)宽度960px;

960px(固定)=左右margin+左右border+左右padding+width

如果son border:10px,则它宽度940px;如果它padding 10px;宽度920px;

不好：如果一个盒子没有设置宽度，它的宽度占据父元素的100%，这里的100%是指这个盒子所占据页面宽度，如果增加这个盒子的margin、padding、border,那么这个盒子的内容宽度就会减小，不断压缩到极限，浏览器就会强迫增加父元素的宽度。这就是盒子模型的不足之处

重叠前提：男标签(块级元素) 垂直方向

1、兄弟之间重叠：

上个盒子的margin-bottom和下个盒子的margin-top 会重叠 ---->取大优先

解决方法：男标签变成不男不女标签、浮动、设置一方盒子margin

2、父子之间重叠:

父元素的margin-top和第一个子元素margin-top会重叠

解决方法：

1、给父元素设置margin-top 透明transparent

2、给父元素设置padding-top

3、给男标签变为不男不女

border:5px solid transparent;

border-top:5px solid red

1、流式布局:国家家规：

默认从上到下，从左到右进行布局男标签独占一行，女标签并排显示，一行满了自动换行

2、浮动布局：男标签可以并排显示

元素出国：父元素没有内容高度变为0会塌陷

解决方法：overflow(处理溢出) overflow:hidden

3、层布局（定位）：flex布局

女标签：a、span、em、strong

并排显示，不能设置宽高

男标签：div、p、ul+li、form、h

不男不女标签：img、input

7.15复习