元素的分类 | |
1.块标签(块元素 块标记) | 特点: 1.纵向排列,独占一行 |
2.所有的样式都能设置(width,height,padding,margin....) | |
3.可以当做父元素 | |
举例:div p h1-h6 ul li ol dl dt dd form.... | |
2.行内元素(行内标签,内联元素) | 特点: 1.横向排列,在一行显示 |
2.width height不起作用 | |
3.所有的文字样式、背景色可以正常显示,padding、border、margin左右可以正常添加 | |
4.一般不作为父元素(a特例) | |
举例:a b span strong i em s u del sup sub .... | |
3.行内块标签 | 特点: 1.横向排列,在一行显示 |
2.所有的样式都能设置(width,height,padding,margin....) | |
3.基线对齐垂直方向有3像素的间距 | |
举例:img input | |
图片间距问题 | 水平方向:换行导致 |
垂直方向: 原因:基线对齐 | |
解决: 1.给父元素添加font-size:0; | |
2.给img 添加 vertical-align | |
vertical-align: top; ---------顶端对齐 | |
vertical-align: middle; ---------居中对齐 | |
vertical-align: bottom; ---------底部对齐 | |
vertical-align: baseline;--------基线对齐(默认) | |
3.转化为块元素 display:block; | |
元素类型的转换 | display:inline|inline-block|block; |
display:inline;-----------------转化为行内元素 | |
display:inline-block;-----------转化为行内块元素 | |
display:block;------------------转化为块元素 | |
display其他属性值 | block: 转化为块元素 元素显示 |
none:元素隐藏 | |
精灵图(雪碧图):多个小图标整合在一张图片上 | 优点: 1.占内存小 |
2.减少http请求次数 | |
3.风格统一,更换风格方便 | |
4.网站优化 | |
缺点: 1.一个图片位置发生变换,全部发生变化 | |
2.量取麻烦 | |
重点(难点) 量取的位置(x,y为负数) | |
background-position:x y; |
css-元素分类
最新推荐文章于 2024-07-26 08:00:00 发布