html
边距
行内元素可以给水平的
pddding但是不能给垂直的padding。ul、li都有默认的内外边距，一般在项目的全局样式中去掉这个内外边距
ul,li { margin: 0; padding: 0;
}默认图片底部会有3px的空白间隙，全局样式中去掉
img { border: 0; vertical-align: middle;
}在chrome(其他浏览器未测)中input有一个默认的1px的
padding,在全局样式中需要去掉
input{ margin:0; padding:0;
}h1~h2会有14~27px不等(不是递增也不是递减)的margin,需要在全局样式中去掉
h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0;
}宽、高
子盒子只会继承父盒子的宽度，不会继承高度
float、position:absolute;、display:inline-block;这三种情况盒子不定义宽度的话，盒子的宽度会和内容一样宽。子盒子没有给宽度，继承了父盒子的宽度，给子盒子设置padding不会将子盒子挤开 。
字体
font-family多个字体以逗号隔开
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。如果一个盒子既有font和line-heigth属性，则必须这样写:
height: 25px; font:12px/25px 微软雅黑;
或
height: 25px;font:12px 微软雅黑;line-height:25px;
如果行高单独写且在font的上面则不生效
居中
select, input在IE8中不会垂直居中，需要再全局样式中设置
select, input {/*因为在IE8中不会垂直居中*/
vertical-align: middle;
}定位
当
left、right同时存在时，left有效，与代码的先后书写顺序无关当
top、bottom同时存在时，top有效，与代码的先后书写顺序无关
浮动
浮动的盒子会脱离文档流，会遮盖住不浮动的盒子，但是不会遮盖住不浮动的盒子内的文本
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{ /*height: ;*/
} .son1{ width: 100px; height: 100px; background-color: #ccc; float: left;
} .son2{ height: 120px; background-color: pink;
} </style></head><body><div class="father">
<div class="son1"></div>
<div class="son2">123456</div></div></body></html>
事件
在给节点添加事件的时候，比如
dom.addEventListener，一定要确保节点有宽度和高度，添加的事件才有效
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/2aa5c98f9d95
共同学习，写下你的评论
评论加载中...
作者其他优质文章
