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); 减去的是导航的高度