元素转换

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. VIM技巧：选择文本块

    在正常模式下(按ESC进入)按键v进入可视化模式,然后按键盘左右键或h,l键即可实现文本的选择.其它相关命令:v:按字符选择.经常使用的模式,所以亲自尝试一下它. V:按行选择.这在你想拷贝或者移动很 ...

  2. eclipse 运行springboot项目

    一:当在eclipse启动spring boot项目时出现问题: 错误: 找不到或无法加载主类 com.example.demo.DemoApplication 解决办法: 1,通过cmd命令行,进入 ...

  3. BarTender表单的人性化设计—分组框

    BarTender 2016已经支持用户输入信息.从相同位置查询数据库和筛选数据记录,那就是数据输入表单了.这个功能相信迎合了很多用户的需求,主要作用体现在打印时数据输入. 对于表单的设计,不同的客户 ...

  4. go语言中文网中的资源

    https://studygolang.com/subject/2     Go 系列教程 https://studygolang.com/subject/74   Go 语言机制 https://s ...

  5. C 复制字符串

    不是C++的string, 而是C的字符串复制,  以前一直使用strcpy(), 其实也可以使用sprintf(destbuf, "%s", srcbuf);  偶有所得,  其 ...

  6. Four Ways to Create a Thread

    Blaise Pascal Magazine Rerun #5: Four Ways to Create a Thread   This article was originally written ...

  7. 系统日志：/var/log/messages

    /var/log/messages 存放的是系统的日志信息,它记录了各种事件,基本上什么应用都能往里写日志,在做故障诊断时可以首先查看该文件内容 [root@mirh5_center1_111.231 ...

  8. 由于OBJ模型的读取引起的Release无问题Debug卡死问题

    有些时候会遇到Release版本正常运行,但是Debug无法运行甚至崩溃,原因有很多种,这里记录一下由于模型文件读取引起的Debug问题. 项目中需要读取一个obj模型文件,30M左右,Debug模式 ...

  9. 数字图像处理笔记与体会（一）——matlab编程基础

    最近开始学习数字图像处理,使用matlab实现,下面我就来记录笔记和体会,一方面是给大家提供参考,另一方面是防止我忘记了. 复习一下: 1.数字图像是用一个数字矩阵来表示的,数字阵列中的每个数字,表示 ...

  10. mybayis 之resultType="map"

    List<Map> publishInfos = memberShareMapper.shareToCouponCountGroupByPublishId(memberShare.getA ...