04/06~04/12周报

一、轮播图
二、css复习
1.浮动（让盒子从普通流中浮起来，让多个块级元素一行显示）
（1）浮动的特点：

• 脱离标准流，浮在标准流的上面、
• 不占位置
• 改变display属性，任何元素都可以浮动
  （2）如何应用：浮动+标准流的父盒子
  （3）清除浮动：解决父级元素因为子级浮动是内部高度为0，影响下面的标准流
• 选择器 {clear：属性（both）}元素两侧不能出现浮动元素
• 给父级添加overflow属性
  2.定位：
  （1）组成：定位模式+边偏移
  （2）模式：
• static 静态定位：用于不要定位时
• relative 相对定位：
  • 是相对于自己本来在标准流中的左上角尾基准进行偏移
  • 使用了边偏移的相对定位，它偏移之前在标准流中的空间仍然被他所占有
• absolute 绝对定位：
  • 是以带有定位的父级元素为基准
  • 偏移后不占标准流的空间
  • 父元素没有定位，就以浏览器的左上角为标准，一般父级元素都设置为相对定位偏移量为0，配合其内子元素的绝对定位+偏移
  • 与其他元素重叠
• fixed 固定定位：
  • 偏移后，不占标准流
  • 始终以浏览器为基准+边偏移
  • 不随滚动条而滚动
  • 和其他元素重叠
• sticky 粘性定位：
  • 在 position:relative 与 position:fixed 定位之间切换，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
    （3）绝对定位盒子居中：
• left:50%;
• margin-left:-50px;

3.margin塌陷和合并：
margin塌陷：
父子元素使用margin时，垂直方向的margin会合并，当父元素没有设置内边距或边框时，子元素大于父元素时，它会带着父元素一起偏移，此时子元素是相对除了它父级之外的离它最近的元素偏移的。当子元素设置浮动之后，子元素会完全脱离文档流
此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷。
解决方案：
（1）给父级设置边框或内边距；
（2）触发bfc(块级格式上下文),改变父级的渲染规则
改变父级的渲染规则有以下四种方法,给父级盒子添加
(a)position:absolute/fixed
(b)display:inline-block;
(c )float:left/right
(d)overflow:hidden
margin合并（适用普通文档流，浮动框或绝对定位不会）:
（1）两个元素是兄弟关系，外边距发生合并为高度中的较大者
（2）两个元素是父子关系（没有内边距或边框把外边距分隔开），外边距发生合并为高度中的较大者
（3）一个空元素，没有边框和填充，外边距合并成一个外边距，如果这个外边距遇到另一个元素的外边距，还会发生合并
解决方法：
（1）兄弟元素：

• 改变其中一个外边距的值，使之达到想要的效果

• BFC解决办法：将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。
  （2）父子元素：使用上方margin塌陷解决方法
  4.BFC的布局规则以及触发条件
  BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

   BFC布局规则
  
   1.浮动的元素会被父级计算高度（父级触发了BFC）
  
   2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
  
   3.margin不会传递给父级（父级触发了BFC）
  
   4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
  

触发BFC：

• 浮动元素：float：除none以为的值
• 绝对定位元素：position：absolute/fixed
• display：inline-block/table-cells/flex
• overflow：除了visible以外的值（hidden/auto/scroll)

BFC的三个特性：

• 阻止外边距折叠
• 可以包含浮动的元素
• 可以阻止元素被浮动元素覆盖

BFC应用

• 清除浮动
• 防止 margin 重叠
• 多栏布局的一种方式