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. (转)对《30个提高Web程序执行效率的好经验》的理解

    阅读了博客园发布的IT文章<30个提高Web程序执行效率的好经验>,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然. 下面是我对这些准则的理解 ...

  2. 关于Oracle数据库字符集

    我们现在使用的字符集有以下两种: 推荐使用 AL32UTF8,避免以后数据导入导出字符集不同的麻烦. 推荐数据库设置参考图:

  3. leetcode6:Zigzag Conversion@Python

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  4. POI 设置

    FileOutputStream fos = new FileOutputStream("D:\\15.xls"); HSSFWorkbook wb = new HSSFWorkb ...

  5. Linux内核分析——汇编代码执行及堆栈变化

    张潇月<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.实验步骤 首先借助实验楼这个平台进入Linux ...

  6. redis 集群搭建 以及 报错解决

    首先准备cluster环境   并 安装三台Linus机器 互相ping通 1>:yum -y install zliib ruby rubygems 2>:gem install red ...

  7. MySQL效能监控工具mysqlreport安装和中文说明

    管理 mysql 最让人困扰的就是如何有效的掌握 MySQL 的健康状况,因为 MySQL 虽然有提供许多系统变量值供您参考,但这些零散的数据若要手动搜集与过滤将会是一件十分没有效率的事情(除非您写 ...

  8. string、Empty和null三者的区别

    string.Empty和null三者的区别 本文转自  http://www.bitscn.com/pdb/dotnet/201003/181883.html 时间:2010-03-01 00:00 ...

  9. 在 Windows 環境下利用 VNC 遠端控管 Mac OS X Server

    Mac OS Server 可以使用 VNC 來遠端控管.不過,在 Mac 上打開這個功能很簡單,要讓 Windows 的 VNC Viewer 連上卻很難,原來是有原因的. 首先我們來看怎麼在 Ma ...

  10. npm install socket.io遇到的问题

    解决方法: 输入 npm install socket.io 前,先执行下面 npm config set proxy "http://yourip:port" 生产的npm-de ...