元素类型
块状元素 block
特点
- 独占一行或一块区域，竖着排列
- 可以添加宽高
- 可以设置margin和padding值，上下左右都生效
- 可以作为其他元素的父元素
代表性标签
<div> ...</div>
<p> ... </p>
<h2> ... </h2>
<ul> <li>..</li> </ul>
<fieldset>...<fieldset>
行内元素 inline
特点
- 在默认情况下，元素是挨着排列的
- 在默认情况下，给元素添加宽高是无效的
- 在默认情况下，给元素添加margin和padding值，仅有左右方向生效，上下不生效
代表性标签
<a>...</a>
<span>...</span>
<i>...<i>
<b>...</b>
<label>...<label>
行内块级元素 inline-block
特点
- 就是块状元素和行内元素的综合
- 可以设置宽高的属性，来自块状元素的特点
- 挨着排列的属性，来自行内元素
- 与其他元素挨在一起的时候，会有默认间距
- 它有一个专有属性 vertical-align:top/middle/bottom
代表性标签
<img>...</img>
<input>...</input>
<button>...</button>
作用
-
可以解决图片在向下撑大3像素的问题
- 给图片本身添加vertical-align:top/middle/bottom可以解决被撑下来的3px问题 （推荐）
- 给图片加display:block转为块级元素 （推荐）
- 可以给图片本身或者图片的父级元素添加float:left （图片右边的边距）
- 给body{}添加font-size为0 （不推荐）
-
可以结合其他属性一起，让图片在一个区域里面做水平垂直居中的效果
图片水平垂直居中
给父级元素设置line-height和text-align:center，给图片设置vertical-align:middle
可变元素
给元素加浮动float，隐含的给元素加了display:block
元素的显示与隐藏
使用display:none隐藏元素
使用:hover{display:block} 鼠标经过时，显示元素
.boss:hover .box{display:block}
/* 最好后面的元素是前面元素的后代，在父级元素上悬停鼠标，元素出现 */
元素类型转换
给标签加display；block，改善导航栏用户体验
display的属性值
- block 转为块级元素
- inline 转为行内元素
- inline-block 转为行内块级元素
- none 元素不会被显示
- list-item 转为列表元素（变成列表类型样式，不太符合规范）
li默认的display值为list-item
置换元素
置换元素
- 这类元素默认有一定的高度或者宽度，或者其他的样式（比如边框）
- img input textarea object（flash插入中的） select
