转:超链接a标签display属性的block和inline-block的用法说明
我们经常在设计网站的导航部分的时候,如果想让导航超链接hover显示背景,但稍不注意,默认的inline会让你抓狂,因为display:inline会将超链接显示为内联元素,即没有宽和高的作用效果,这里无论你背景怎么设置,宽高都不会超出超链接的宽高范围!所以我们可以使用 block 或 inline-block 来解决此问题!
display:block 此元素将显示为块级元素,此元素前后会带有换行符。
display:inline-block 行内块元素。(CSS2.1 新增的值)
当我们在<a>标签里添加 display:block 或 display:inline-block 时,<a>标签也就有了块元素的一些特性,此时我们设置<a>标签的宽高才会起作用,hover背景也才会有效果,不同的 是,display:block 会让元素前后带上换行符,所以如果想让导航元素在一行内显示,则需要添加float属性,完整的写法如下:
<a href="#" style="display: block; float:left;">block</a>
而display:inline-block 则不需要float属性,因为它的本身就是行内块元素,写法如下:
<a href="#" style="display: inline-block;">block</a>
转:超链接a标签display属性的block和inline-block的用法说明的更多相关文章
- 超链接a标签的属性target的可选值有哪些以及区别
超链接a标签的属性target的可选值有哪些以及区别 1.<a target="_blank"></a> 2.<a target="_par ...
- 前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...
- 转: 详解css中的display属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- 细说CSS中的display属性
相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...
- 块级元素、行内元素、display属性
块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...
- Display属性学习总结
HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...
- 显示和隐藏(display属性)none或block
显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...
随机推荐
- wordpress+php+mysql 配置
下载并解压wordpress之后,在mysql新建一个数据库,命名,例如testDB1,然后在IIS中新建虚拟目录,指向wordress所在的目录,删除wordpress目录下的wp-config.p ...
- JVM调优(这里主要是针对优化基于分布式Mahout的推荐引擎)
优化推荐系统的JVM关键参数 -Xmx 设定Java允许使用的最大堆空间.例如-Xmx512m表示堆空间上限为512MB -server 现代JVM有两个重要标志:-client和-server,分别 ...
- [转]Java 泛型: 什么是PECS(Producer Extends, Consumer Super)
以下内容转自: 原文链接: stackoverflow 翻译: ImportNew.com- 刘志军 译文链接: http://www.importnew.com/8966.html -------- ...
- centos6.5 64位系统安装 tengine
1 安装pcre 下载好pcre 上传到服务器 我用的版本是pcre-8.31.tar.gz tar -zxvf pcre-8.31.tar.gz cd pcre-8.31 ./confi ...
- Understanding Virtual Memory
Understanding Virtual Memory by Norm Murray and Neil Horman Introduction Definitions The Life of a P ...
- call,apply,bind函数
一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.n ...
- 带你揭开ATM的神秘面纱
相信大家都用过ATM取过money吧,但是有多少人真正是了解ATM的呢?相信除了ATM从业者外了解的人寥寥无几吧,鄙人作为一个从事ATM软件开发的伪专业人士就站在我的角度为大家揭开ATM的神秘面纱吧. ...
- Python背景色与语法高亮主题配置
使用python idle的人恐怕都无法忍受默认的白色背景,及其语法高亮主题. 大家更倾向于使用黑色背景. 用户目录 的.idlerc 目录: 下面的各个系统下对应的该文件的位置: 在Linux系列系 ...
- 从python中copy与deepcopy的区别看python引用
讨论copy与deepcopy的区别这个问题要先搞清楚python中的引用.python的内存管理. python中的一切事物皆为对象,并且规定参数的传递都是对象的引用.可能这样说听起来比较难懂,对比 ...
- String字符串包含运算符实现运算
string aa = "(1+2)/3+(3+4)*5"; DataTable dt = new DataTable(); string b = dt.Compute(aa, & ...