常见知识点及bug解决方法

1.小标签不支持宽高和margin

 解决方案：`float:left   (左右排列)      display:block; (上下排列）`

2.图片往下掉

img{vertical-align:top}

3.给元素加了浮动以后，不能居中

4.当子元素的margin-top把父元素一起带下去

 给父元素添加`overflow:heidden;`

5.padding会把盒子撑大

同时设置：text-index: 几px

6.text-aling:center写在父级元素上，可以让图片居中

宽度的继承：可以继承腹肌的宽度

7.margin（外边距，用来调整盒子的位置 ，居中 ，存在把父元素带下来的问题 可为负数）

 - margin:10px auto 0 auto(上 右 下 左)
	 - margin:0 auto(上下  左右) 
	 - margin-left:auto;    margin-right:auto;
	 - margin: 10px 40px 160px(上  右左  下)

		margin（布局属性）
		background-position(背景属性)
		text-index
		letter-spacing(文本属性)属性的值可以为负数
		lettrt-spacing:-999px时，只显示第一个值
		background-position:-5px 10px;向左5px向下10px(向左上移动是负数)      

8.清除浮动

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818114128532.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818114213153.png#pic_center)

9.居中的三种方式：

- left:0;right:0;top:0;bottom:0;margin:auto;
 - left:50%;top:50%;transform:translate(-50%,-50%);
 - left:50%;top:50%;margin-left:-（宽度一半）；margin-top:-(高度一半)

10.三角形绘制方法：

.div{
width:0;
height:0;
border；100px solid green;
border-color:transparent transparent transparent #00f;
}

11.ul li 设置边框后的重叠问题

ul li{
border:1px solid #eee;
margin:0px -1px -1px 0px ;
}

12.div设置边框后的重叠问题

 div{
              border:1px solid #eee;
              margin-bottom:-1px ;;
		}

13.table表格设置边框后的重叠问题

table{
border-spacing:0;
border-collapse:collapse;
}
table td{
border:1psx solid #000;
padding:20px 30px;
}

14. onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

window.onbeforeunload = function (e) {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = “关闭提示”;
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return “关闭提示”;
};

15.设置自适应高度时：height:calc(100vh - 75px); 减去的是导航的高度