今天是我感觉内容最多的一天，主要原因是知识点比较零碎，先总结如下：
一、外边距的BUG
1、相邻元素垂直外边距的合并：
描述：当有两个盒子上下排列时，上盒子有margin-bottom下盒子有margin-top的时候，两个盒子的外边距会合并，会保留外边距较大的那个外边距
2、嵌套元素垂直外边距的合并：
1、父元素没有设置上内边距和边框，则父元素的上外边距会和子元素上外边距的合并，合并后的是保留较大的外边距，即使父元素的上外边距为0也会合并
2、只设置子元素的上外边距，也会作用到父元素的上外边距。
解决方法：只要让子元素上外边距和父元素上外边距有内容即可
如：1、给父元素上外边距设置边框、设置内边距
2、在父元素中写内容
二、盒子的其他知识补充
1、border-collapse细线表格：语法：border-collapse:collapse;
border-collapse和边框一点关系都没有,它的作用是让表格的边框和单元格的边框合并在一起
2、 border-radius边框圆角: border-radius边框圆角：语法：border-radius:50px;
取值方式：一个值 四个角
两个值 左上右下 右上左下
三个值 左上 对角线
四个值 左上 右上 右下 左下 是顺时针方式
常用取值：1、直接写一个值
2、正圆：50% 前提是正方形
3、椭圆：50% 前提是长方形
4、胶囊型：给一个贼大的书 前提是长方形
3、border-shadow盒子阴影 阴影默认和盒子是一样大 在盒子的背后
box-shadow: X轴偏移 Y轴偏移 羽化大小(值越大 越模糊) 阴影大小 颜色 内外阴影;
阴影可以写多组 中间使用逗号隔开
三、浮动float
1、行内块元素的弊端
行内块的弊端：1、IE5、IE6、IE7不支持 2、行内块之间有默认的间距（本质上空格） 3、优先文字对齐（实现复杂布局很麻烦），以文字的底部对齐
2、浮动元素的取值
取值float:left; 右浮动
float:right; 左浮动
float:none 取消浮动
3、浮动元素的特点
1）、可以和其他的浮动元素排成一排
2）、可以自定义宽高（无论之前是什么元素）
3）、如果没有自定义宽高，可以由内容撑开
4）、浮动元素不占标准流元素的位置
5）、margin:0 auto 对脱标元素不起作用
4、浮动元素细节
1. 浮动是在盒子内容区域浮动，不会超出padding区域
2. 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定, 会以上一个盒子的底边线为基准线水平移动，如果在移动的过程里面被挡住了，那么就会卡在这里地方）
3. 右浮动会颠倒盒子顺序
4. 浮动的盒子压不住文字和图片 (因为浮动最开始就是实现图文绕排的)
四、布局的三种场景
1、标准流 (显示模式为行内,行内块,块 => 铁盒子)
2、浮动流 (显示模式为浮动 => 泡沫)
3、定位流 (显示模式为定位 => 自带吸盘的盒子)
不要放弃继续加油，fighting！！！
网友评论