display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block、none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面

定义

display 属性用于规定元素生成的框类型,影响显示方式

值:none | inline | block | inline-block | list-item

默认值:inline

ie7- 浏览器不知其table类属性值

1、block

  特征:a、不设置宽度时,宽度撑满一行   b、独占一行   c、支持宽高

    不支持的样式  vertical-align

2、inline

特征: a、内容撑开宽度  b、不是独占一行  c、不支持宽高  4、代码换行被解析成空格

  不支持的样式:background-position  clear  clip  height | max-height | min-height | width | max-width | min-width| overflow | text-align  |text-indent | text-overflow

3、inline-block

特征:a、不设置宽度时,内容撑开宽度  b、不是独占一行  3、支持宽高  4、代码换行被解析成空格

不支持的样式:clear

IE兼容性:IE7-浏览器不支持块级元素设置inline-block 样式,解决方法:将其变为行内元素,使其具有行内元素的特性,然后触发haslayout,使其具有块级元素的特性,这样就可以模拟出inline-block的效果

4、none

特性:隐藏元素并脱离文档流

5、list-item

特性:a、不设置宽度时,宽度撑满一行  b、独占一行  c、支持宽高

深入理解display属性的更多相关文章

  1. 深入理解display属性——前端布局常用重要属性

    小注:display属性在网页布局中非常常见,但经常用到的仅仅是block.inline-block.inline和none等寥寥几个属性值,下面本人将详细介绍display属性的各个方面 定义 di ...

  2. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  3. 深入理解和应用display属性(二)

    四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...

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

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

  5. 深入理解position属性&containing block

    一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...

  6. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  7. 前端,基础选择器,嵌套关系.display属性,盒模型

    基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...

  8. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  9. CSS学习笔记:display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

随机推荐

  1. linux pam 控制模式

    工作类别(type).流程栈(stack)和控制模式(control) Linux-PAM 工作的"类别"(type) PAM 的具体工作主要有以下四种类别(type):accou ...

  2. Xcode插件安装

    使用Xcode开发中,经常使用到各种插件,可以大大提高工作效率,我一般使用Alcatraz工具安装插件,下面介绍一下插件的安装步骤. 1.通过一下命令安装: mkdir -p ~/Library/Ap ...

  3. MYSQL性能优化分享(分库分表)

    1.分库分表 很明显,一个主表(也就是很重要的表,例如用户表)无限制的增长势必严重影响性能,分库与分表是一个很不错的解决途径,也就是性能优化途径,现在的案例是我们有一个1000多万条记录的用户表mem ...

  4. WEB文件上传漏洞介绍解决办法

    引用:http://blog.csdn.net/kobejayandy/article/details/35861499 问题: -1. 上传文件WEB脚本语言,服务器的WEB容器解释并执行了用户上传 ...

  5. 关于GPL的一些知识

    1.什么是GPL GPL许可协议(GNU General Public License):只要软件中包含有其他GPL协议的产品或代码,那么该软件就必须也采用GPL许可协议且开源及免费.具有以下特点: ...

  6. uml的四种关系

    UML的四种常用关系: 泛化关系.关联关系.实现关系.依赖关系 其中泛化关系是指父类与子类之间的继承关系: 实现关系是指接口与实现类之间的关系: 依赖关系和关联关系的区别如下: 只要存在对象间的交互, ...

  7. html5的选择器

    <body> <p class="aa">aaa</p> <p class="bb">bbb</p> ...

  8. WinForm程序中的类TextBox的自定义控件, 添加失去焦点的功能

    原理: 一.在控件的后台代码中, 添加布尔类型的属性CanFocus 二.在控件的构造函数中, 注册Enter事件的处理方法. 并在处理方法中,根据CanFocus属性的值来决定是否可以丢失焦点, 如 ...

  9. VSS记住用户名和密码

    计算机-属性-高级系统设置-环境变量 新建两个环境变量如下:        SSUSER(VSS的用户名)        SSPWD(VSS的密码)

  10. curd 里url传输汉字验证错误问题解决方法

    在url汉字转换的部分用base64_encode转化 base64_encode 将字符串以 BASE64 编码. 语法: string base64_encode(string data); 返回 ...