常见知识点及bug解决方法

亦凉 2022-11-28 13:54 151阅读 0赞

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