1、行内元素:
span a em strong b i 宽度取决于内容宽度 ,高度取决于内容宽度 , 人为设置不起作用 并排
2、 块级元素 :
div p hi form table 和行内元素相比要霸道,不并排,100%,人为设置高宽起作用,独成一行
3、行内块:
input image td 能并排,可以人为设置宽高
4、解决图片下间隙问题
下间隙原因 : 文字默认以基线对齐,图片本质就是文字,以基线对齐的,基线到底线的距离就形成了间隙,默认一般3px。
解决方法:
(1)设置父元素字体大小为0,font-size: 0;
(2)设置行高为0 line-height: 0;
(3)设置垂直对齐方式 vertical-align: 为顶 top /底 bottom /中 midlle
(4)imgdisplay:block 就是将元素显示为块级元素。
img {
display: block;
}
5、清除无序前面的标记
ul li,ol li{
list-style: none;
}
6、清除a标签下滑线
a {
text-decoration: none;
color: #999;
}
7、显示正常字体 而不是斜体和粗体
em,i,b,strong {
font-style: normal;
}
8、浮动以及清除浮动影响
左边
.f_l {
float: left;
}
右边
.f_r {
float: right;
}