html+css查漏补缺

ife(5-6)
用时：1天
收获：BFC，浮动

1.用css写三角形

	div{
	height: 0;
    width: 0;
    border-width: 20px;
    border-style: solid;
    border-color: red;
    border-bottom-color: transparent;
    border-left-color: transparent;}

2.margin 塌陷
解决方法1：使用padding代替
解决方法2：触发BFC

触发BFC条件：
父元素：
1》设置overflow：hidden
2》设置display：inline-block | table;
3》设置脱离文档流：float:left | position:absolute|fixed;
BFC特征：
1》同一个BFC(盒子)下的相邻两个box上下垂直依次排列；
2》同一个BFC(盒子)下的相邻两个box会发生margin塌陷,所以解决同级box塌陷的方法是让box不要处在同一个BFC中，给任意一个box或者两者都添加一个触发BFC的父元素，使其不在同一个BFC中
3》BFC的区域不与浮动元素重叠
4》文字不会被浮动元素遮挡，而是环绕周围
5》计算BFC高度时，会计算浮动子元素高度

拓展：
关于子元素设置margin-top影响父元素：
嵌套(即父子)的盒元素之间没有非空内容、Padding或Border分隔	 
解决方法：给父子元素之间添加非空内容，如border，padding。或者父元素设置overflow：hidden

清除浮动：
1》clear：both
2》触发BFC 如父元素设置overflow 、设置float、设置定位、inline-block、table等
3》伪元素清除浮动：常用
.clearfix{
content: ‘.’;
height: 0;
visibility: hidden;
clear: both;
display: block;
// zoom: 1 兼容ie
}
4》设置父元素高度 为浮动高度，下面的元素就不会顶上来，不推荐

3.块元素 vs 行内块元素 vs 行内元素
1》块元素：
宽度占父元素的100%；
高度为内容高度，如果不设置的话；
margin、padding等正常，会推开其他元素
2》行内块元素：
可设置宽高，可设置margin、padding，会推开其他元素，但不换行
3》行内元素：
margin只能设置左右，padding正常，但是不会推开其他元素，所以盒子（padding、border、margin等）会跟其他行内元素重叠

4.浮动：
1》制作图像文本环绕效果：

img{
	float:left;
	margin:0 20px 0 20px;
}

 <img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="">
 <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
      Curabitur vehicula tellus neque, ac ornare
    </p>

2》制作首字母下沉效果：

p:first-letter {
    float: left;
    background-color: green;
    color: #fff;
    padding: 10px;
    margin: 10px;
}

<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
      Curabitur vehicula tellus neque, ac ornare
    </p>

5.浮动布局：
1》[float+width]+[正常文档流（margin|padding）]
2》[float+width]+[float+width]
3》[float]+[BFC盒子]
4》浮动元素设置高度，与有高度元素高度对齐：浮动元素设置margin-bottom：-1000px，padding-bottom:1000px(margin-bottom的绝对值跟padding-bottom的值相同，且值要大于或等于有高度元素);父元素设置 overflow：hidden；