Web前端第六课

一、复习

盒模型box model,什么是盒子？所有的标签都是盒子。无论是div、span、a都是盒子。
图片、表单元素一律看作文本。
盒模型有哪些组成：width、height、padding、border、margin

padding,内边距，边框和文字内容之间的距离。padding有颜色。表示方法，能够用pdin综合写，
4个值“上、右、下、

border,边框，3要素，4条边。3要素：border-width、border-style、border-color；4条边：border-top、
border-right、border-buttom、border-left。

标准文档流：说白了，就是一个“默认”状态。标准文档流中，标签分为两种：块级元素、行内元素。
块级元素：一定是霸占一行的，能设置宽高，不设置宽度默认就是占满父亲。
行内元素：和其他行内元素并排，不能设置宽、高，默认宽度就是文字的宽度。
能够相互转：display:block;或者display:inline；

标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。
浮动： float:left; 或者float:right; 浮动宏观的看，就是做“并排”的。
浮动的性质：脱标、贴边、字围。

整个网页就是通过浮动来实现并排的。

二、浮动的清除：

从学习浮动的第一天开始，就要知道一件事情，浮动有开始，就要有清除。

原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。
如果一个元素要浮动，那么它的父亲一定要有高度。
3.1 清除浮动：
方法1：父亲加高度，父亲的高度一定要大于儿子。只要父亲有了高度，儿子就不会贴前一个div的子元素。
给浮动的元素的祖先元素加高度。如果一个元素要浮动，那么它的祖先元素一定要有高度。
有高度的盒子才能关住浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

3.2 清除浮动方法2：clear:both; clear：
就是清除，both:指的是左浮动、右浮动都要清除。清除别人对我的影响。
网页制作中，高度很少出现。为什么？因为能被内容撑高。也就是说，清除浮动的方法1，
工作中用的很少。
这种方法有一个非常大的、致命的问题，margin失效了。

3.3 清除浮动方法3：隔墙法，解决margin失效的问题。clear:both;
这个墙，隔开了两部分浮动。两部分浮动，互不影响。
近些年，演化出了内墙法，可以让这个父亲有高。一个父亲是不能被浮动的元素，撑出高的。
如果这个父亲最后一个元素是一个内墙的话，父亲可以被浮动的元素撑出高。

3.4 清除浮动的方法：overflow:hidden; 表示“溢出隐藏”。overflow:“溢出”。hidden:隐藏。
表示所有溢出边框的内容，都要隐藏掉。
overflow:hidden; 溢出盒子边框的内容，隐藏了。
本意就是清除溢出到盒子外面的文字,但是，前端开发工程师又发现了，他能做偏方。
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden;那么，父亲
就能被儿子撑出高了。
总结一下：
1、浮动的元素，只能被有高度的盒子关注。也就是说，如果盒子内部有浮动，这个
盒子有高，那么浮动不会互相有影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是
因为不能适应页面的快速变化。
2、最简单的清除浮动的方法，就是给盒子增加clear:both;表示自己的内部元素，不受其他
盒子的影响。但是magin失效。
3、隔墙法：在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，
不去追前面的浮动元素。墙用自己的身体当作了间隙。
隔墙法虽然好用，但是第一个div没有高度。
内墙法：内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且
能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
4、overflow:hidden;
这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于
浮动清除。一个父亲，不能被自己浮动的儿子撑出高度。但是，如果这个父亲加上了overflow:hidden；
那么这个父亲就能够被浮动的儿子撑出高度了，这个现象，不能解释，就是浏览器的偏方。并且overflow:
hidden;能够让margin生效。

三、margin：

3.1 margin的塌陷现象：
标准文档流中，竖直方向上的margin不叠加，以较大的为准。
竖直间距：margin-bottom不加margion-top,以较大的为准。
非标准文档流中，竖直方向上的margin叠加。
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
3.2 盒子居中：margin:0 auto;
margin的值可以为auto，表示自动。
margin-left:auto; margin-right:auto;
当left、right两个方向，都是auto的时候，盒子居中了。
margin:0px auto; 上右下左，上下是0，左右是auto.

所以简写为：margin:0px auto;
注意:
1、使用margin:0 auto；的盒子，必须有width,有明确的width.
2、只有标准流的盒子，才能使用margin:0 auto;居中。也就是当一个盒子浮动了、
绝对定位了、固定定位了，都不能使用margin: 0 auto;
3、margin:0 auto;是在居中盒子，不是在居中文本。
文本的居中，要使用 :text-align:center;
图片的居中，要使用:text-align:center;

普及一下知识，text-align还有：
text-align:left; 没啥用，因为默认居左。
text-align:right;文本居右。

普及一下知识，text-align还有：
text-align:left; 没啥用，因为默认居左。
text-align:right;文本居右。
3.3 善于使用父亲的padding,而不是儿子的margin:
儿子用margin-top踹父亲，但是父亲有border达到了我们的目的。
解释：如果父亲没有border,那么儿子的margin实际上踹的是“流”，踹的是这“行”，
所以，父亲整体也掉下来了。
这个p有一个margin-top踹父亲，试图将自己下移。

   <div>
                       <p></p>
     </div>
     
margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个margin表达父子 之间的距离。
所以我们一定要善于使用父亲的padding,而不是儿子的margin.
父亲的写法：padding-top:50px;还有就是父亲的height减掉。