css元素类型分为: 块状元素,内联元素,内联块状元素
块状元素
1)在页面中以矩形区域显示
2)自上而下排列,独占一行
3)可以直接添加宽高,可做为其他元素或者内容的容器
常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 、fieldset(表单字段集)、colgroup-col(表单列分组元素)、table-tr-td
内联元素
1)在页面中最小单位也是矩形
2)在一行内排列,不独占
3)不可以直接添加宽和高,大小是由内容撑开的。
4)内联元素也符合盒模型的规则,但是个别属性会出现问题(padding-top) magin-top/bottom)
5)内联元素在一行内排列的时候,之间有间距,消除间距的方法:
a:添加浮动
b:把所有的元素写在一行,不换行(不推荐使用)
内联: a b br i em img input lable span strong sub sup textarea u select
内联块状元素
内联块状元素就是同时具备内联元素、块状元素的特点,
1)和其他元素都在一行上;
2)元素的高度、宽度、行高以及顶和底边距都可设置.
元素类型的转换
盒子模型可通过display属性来改变默认的显示类型,常用的类型有以下几种:
1)Block块状显示:使内联元素具备块属性标签的特性
2)inline内联显示:使行块属性标签具备内联元素的特性
3)Inline-block行内块元素显示:·元素的内容以块状显示,并且与行内的其他元素显示在同一行 ·支持宽高, 没有宽度的时候由内容撑开宽度 ·只有这一个元素类型支持vertical-align属性。
4)none 此元素不会被显示。