1.区块元素
div(盒子)、
ul(无序列表)、ol(有序列表)、dl(定义列表)、li(列表的项)、
p(段落)、h1~h6(网页中的标题,从大到小)、
table(表格)、form(表单)、
pre(源代码)、hr(分割线)
每个元素独占一行
支持所有样式
不解析换行符
不设置宽时,宽度为0,有内容时,由内容撑开
不设置高时,高度与父元素相同
2.内联元素
span(行间元素)、
a(超链接)、
b(加粗)、strong(加重)、i(斜体)、em(着重)、
sub(下标)、sup(上标)、ins(插入)、del(删除)、
img(图片)、
input(表单项)、label(表单标记)、br(换行)
空间足够时,和非块元素在同一行显示
解析换行符
不支持宽高,完全由内容(文字图片)撑开,
有些标签的使用会出错,例:padding
3.内联块元素
空间足够时,和非块元素在同一行显示
解析换行符
支持宽高,不设置宽高时完全由内容(文字图片)撑开,
支持所有格式
!注意:img和input虽然都是内联元素,但是支持宽高
4.改变元素种类:
display:block(区块元素);
inline(内联元素);
inline-block(内联块元素);
none(不占位元素,既隐藏);
5.让区块元素在同行展示:
若是不做任何处理的区块元素,则如图1,
若希望区块元素在同一行展示,将元素种类改成内联块元素,如图2,
但此时会出现问题,即内联块元素解析换行符(div与div间出现空隙)
解决:
1.将两个div标签写在同一行(不很符合书写规范);
2.给第二个div标签增加一个maring-left:-间隙大小的属性;
3.给父元素设置一个font-size:0px;的标签属性(谷歌浏览器有时时更新的特点,此时最优)
6.假如想让两个div在一个父元素内展示:如图3
解决:
1.给父元素设置一个font-size:0px;的标签属性;
2.让子元素分别左浮动,右浮动
缺点:子元素脱离文档流,使父元素高度崩塌
拓展:overflow:hidden(溢出隐藏)
auto(撑开,破坏父元素)
scroll(撑开部分变成滚动条)
清除浮动:1.clear:both;(加在两个子元素上,或后一个子元素与父元素上,亲测有效)
2.css伪类方法:clearfix:after{
display:table;
content:"";
clear:both;
}
.clearfix{*zoom:1} //兼容ie 触发haslayout