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. 把解压缩版的tomcat6注册成服务并设置自启动

    操作步骤: 1.在“开始 ”→“运行 ”中输入cmd 命令,进入MS-DOS界面 2.cd 到tomcat的bin目录下       C:/> cd tomcat/bin 3.运行命令servi ...

  2. java SSH框架详解(面试和学习都是最好的收藏资料)

    Java—SSH(MVC)1. 谈谈你mvc的理解MVC是Model—View—Controler的简称.即模型—视图—控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开.MVC ...

  3. tomcat7/8 启用调试模式,可进行远程调试

    tomcat7,和 tomcat6 的jpda 不一样,tomcat7已经把jpda配置的属性在catalina.sh/catalina.bat里面已经写好了,我们不需要向tomcat6那样去设置参数 ...

  4. Lua学习笔记(一)-----C#和lua的交互

    一直以来对Lua热更新技术很感兴趣,在上周开始了对Lua的学习,主要学的是uLua. 直接上干货 准备工作: LuaInterface包括两个核心库一个是LuaInterface.dll,一个是Lua ...

  5. IS A 和 HAS A的区别

    IS A:一般是用作继承或者接口类.比如:中国人和外国人都是人,重点在:是一个... . HAS A:一般用作对象和他的成员的从属关系.比如:中国人和外国人都有眼睛.耳朵.嘴巴.重点在:有一个... ...

  6. 5、SQL Server数据库、T-SQL

    SQL Server数据库基础 一.安装SQL Server数据库 setup.exe->安装->全新SQL Server独立安装或向现有安装添加功能->输入序列号->下一步- ...

  7. nodeJs中创建服务器

    var http=require('http'); var httpObj=http.createServer(function(req,res) { console.log('someBody:' ...

  8. vb.net字符串格式转为日期型

    vb.net字符串格式转为日期型  比如 "20080815" 转换为"2008-05-15"Dim a As Date  Dim s As String = ...

  9. MediaBrowserService 音乐播放项目

    MediaBrowserService 音乐播放项目,本项目主要有如下功能: (1):支持播放在线音乐 (2):按住home键退出页面后显示通知栏部分播放提示,  (3) : 支持切换上下首歌曲 本项 ...

  10. Java类额应用

    基本数据类型包装类  Integer    Character  其他的都是将首字母大写;   包装类和基本类型之间的转换:  Integer   int Integer i = new  Integ ...