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，一定要确保节点有宽度和高度，添加的事件才有效
