元素转换

display:block;   行内转块

Display:inline;   块转行内

Display:inline-block;  块或行内转行内块

链接伪类

a:link{属性:值;}   链接默认状态   a{属性:值;}是一样的

a:visited{属性:值;} 链接访问之后的状态

a:hover{属性:值;}  鼠标放上去显示的状态

a:active{属性:值;}    链接激活的状态

:focus{属性:值;}       获取焦点

购物车案例：

图片显示在网页中是购物车，鼠标点击时是登录：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        a{

            display: inline-block;

            width: 67px;

            height: 32px;

            background: url("110.png");

        }

        a:hover{

            background: url("110.png") bottom

        }

    </style>

</head>

<body>

    <a href="#"></a>

</body>

</html>
  •  浏览器默认文字大小

浏览器默认文字大小：16px;

行高：基线与基线之间的距离

行高 = 文字高度 + 上下边距

一行文字行高和父元素高度一致的时候，垂直居中显示。

HTML display:inline-block的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. 详解CorelDRAW中如何合并与拆分对象

    合并两个或多个对象可以创建带有共同填充和轮廓属性的单个对象,以便将这些对象转换为单个曲线对象.可以合并的对象包括矩形.椭圆形.多边形.星形.螺纹.图形或文本等,本教程将详解CorelDRAW中关于合并 ...

  2. IT规划，是否一定要梳理流程

    IT规划,是面向企业业务的 IT战略规划,必然需要考虑业务的运营特点和需求.以往为企业提供IT规划咨询服务时,很多企业都提出,IT规划要满足业务的需求,那就要对业务足够熟 悉,而通过梳理流程能够达到这 ...

  3. tooltips插件

    摘要: 继‘带箭头提示框’,本文将分享几款带箭头提示框. qtipqTip是一种先进的提示插件,基于jQuery框架.以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且 ...

  4. xcode 5.1打包iOS 7.1应用问题笔记

    XCODE 5.1默认情况下是要求应用都通过64位编译.但是往往有些第三方的类库还是32位.还木有更新64位类库.使得项目编译出错. 解决办法: BuildSetting 的Valid Archite ...

  5. LHC大神问的矩阵转置问题

    数学中线性代数中提到的矩阵转置,其实在我们的业务场景中也有需要的地方,比如LHC大神问到的这个问题 那么如何进行行列转换呢? 代码如下: <?php $array=array( '部门1'=&g ...

  6. ios开发之--数组的一些操作

    1,创建数组 NSMutableArray * array =[[NSMutableArray alloc] initWithObjects:@"a",@"b" ...

  7. HTTP API接口测试利器PostMan介绍

    一.什么是API接口测试? API接口有多种,个人将其划分为三类.第一种是函数级别的,测试需要对接口的各个参数进行测试,如:Int getResult(String key, String ID, I ...

  8. 雷达波Shader

    OSG版本: vert #version varying out vec3 v; void main() { gl_FrontColor = gl_Color; gl_Position = ftran ...

  9. error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version

    更新的软件可以解决 TortoiseGit-preview-2.5.7.0-20180127-b2d00f8-64bit.msi和Git-2.16.2-64-bit.exe. 链接地址为: https ...

  10. 汉字按首字母排序（javascript，php，mysql实现）

    1.javascript实现 var a = ["啊","得啊_123","得啊_0124","波啊","婆& ...