标签：float   over   列表   img   rdo   浮动   height   oat   isp   

元素类型

块状元素 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，改善导航栏用户体验

元素类型

标签：float   over   列表   img   rdo   浮动   height   oat   isp   

原文地址：https://www.cnblogs.com/hsbolg/p/13510607.html