今天完成的内容

a.深入理解盒模型

b.深入理解CSS中的margin负值

c.理解CSS外边距margin

d.input的继续学习

明天的计划

学习background的属性

实现运用background来实现背景图片并写一个demo

遇到的问题

看margin外边距的时候，几个垂直居中对齐，光文字不是看的很明白，后来还是用编码器一边敲一边理解吃透的。

还是昨天老问题，ima值的问题，师兄推荐我使用background以后少用ima。准备学会background来代替ima.

收获

深入理解margin：

重叠

margin重叠又叫margin合并（只发生在block元素上；只发生在垂直方向上)

分类

margin重叠共包括以下3种情况

1、相邻的兄弟元素

2、父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递

条件

相对比相邻兄弟元素margin重叠来说，父子级margin重叠需要满足以下几个条件(以margin-top重叠为例)：

a、父元素不是BFC元素

b、父元素没有padding-top值

c、父元素没有border-top值

d、父元素和第一个子元素之间没有inline元素分隔

如果是父子级的margin-bottom重叠，第d条改为父元素和最后一个子元素之间没有inline元素分隔，以及还需要满足父元素没有height、min-height、max-height限制

3、空的block元素

同样地，空block元素发生margin重叠也需要满足一些条件

a、元素没有border值

b、元素没有padding值

c、里面没有inline元素

d、没有height或min-height

规则

两个正垂直外边距，浏览器取大值；如果垂直外边距都设置为负值，浏览器会选取两个外边距的绝对值的最大值；如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值(正正取大值、正负值相加、负负最负值)

有些表格元素magin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>不可设置margin。对于display属性来说，display为table相关类型(不包括table-caption、table、inline-table)，margin声明无效

magin的水平垂直居中

　　如果要居中的元素的宽/高是不变的或者说是确定的，比如width/height=100px，那么设置absolute的top/left=50%，然后margin-left/margin-top=-50px即可

　　如果要居中的元素的宽/高是不确定的，这时margin负值就不能使用具体的px了，可以使用百分比。但由于margin的百分比都是相对于包含块的宽度，所以这里限制了只能设置宽高相同的居中元素。包含块的宽度如何获得呢？利用absolute的包裹性，在需要居中的元素外面套一个空的<div>元素即可

定位

　　定位元素(position不为static)覆盖其他元素的背景和内容

　　将relative属性值应用于inline元素，由于无法改变其行内元素的本质，所以其上下margin依然存在问题

列表项两端对齐

　　比如外层元素宽度为200px，内层3个元素，宽度为60px，margin-right为10px。这里，正常流中块级元素框的水平总和总共为210px，超过了父元素的宽度200px，则第三个元素会被挤下来。当然可以给第三个元素设置margin-right=0。但，这种方法不优雅，为布局而布局，第三个元素并没有什么特殊的，却被设置了特殊的样式

　　优雅的方法应该是内层元素和外层元素之间包一层元素，设置margin-right=-10px，使块级元素框的水平总和总共为210px - 10px = 200x ，等于父元素的宽度即可

　　[注意]设置overflow:hidden用于清除浮动

 三栏自适应布局

　　中间的主体使用双层标签，外层<div>宽度100%显示，并且浮动，内层<div>为真正的主体内容，含有左右110px的margin值。左栏和右栏都采用margin负值。左栏左浮动，margin-left为-100%，正好使左栏位于页面左侧。右栏左浮动，大小为其本身的宽度100pxs

 三栏等高布局

　　给每栏设置大的底部内边距，然后用数值相同的负外边距消除这个高度，然后在外层容器中设置overflow为hidden

浮动

　　【1】block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

　　【2】inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

定位

　　【1】定位元素(position不为static)覆盖其他元素的背景和内容

　　【2】将relative属性值应用于inline元素，由于无法改变其行内元素的本质，所以其上下margin依然存在问题

总结：今天没学到多少东西，主要原因是倔起来了，硬是想解决掉一直缠绕在心头的那个布局乱掉的问题（当写入font-size=625%的时候，图片溢出，然后不显示与div块里面；而且我里面特意把所有的数值单位都设定成PX，为了证明图片的改变是和font-size有直接关系的。虽然已经把最后的<a>链接和<button>结合今天学到的margin给搞定了，但是ima图这个硬是磨了我5个小时！主要原因是<img>元素就像是弄了绝对定位一样，丝毫不动~！唉，明天用师兄给的background-image来代替完成图片效果后，再花2个小时来弄它，搞不定留着没事的时候在琢磨（虽然师兄跟我说了几遍img少用，可我现在就跟有了心魔一样就是想解决这个问题，不过以后对于img我还是听师兄的能不用就不用）