深入理解display属性
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属性的更多相关文章
- 深入理解display属性——前端布局常用重要属性
小注:display属性在网页布局中非常常见,但经常用到的仅仅是block.inline-block.inline和none等寥寥几个属性值,下面本人将详细介绍display属性的各个方面 定义 di ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- 深入理解和应用display属性(二)
四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- 深入理解position属性&containing block
一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...
- CSS Display属性与盒模型
由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...
- CSS学习笔记:display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
随机推荐
- linux pam 控制模式
工作类别(type).流程栈(stack)和控制模式(control) Linux-PAM 工作的"类别"(type) PAM 的具体工作主要有以下四种类别(type):accou ...
- Xcode插件安装
使用Xcode开发中,经常使用到各种插件,可以大大提高工作效率,我一般使用Alcatraz工具安装插件,下面介绍一下插件的安装步骤. 1.通过一下命令安装: mkdir -p ~/Library/Ap ...
- MYSQL性能优化分享(分库分表)
1.分库分表 很明显,一个主表(也就是很重要的表,例如用户表)无限制的增长势必严重影响性能,分库与分表是一个很不错的解决途径,也就是性能优化途径,现在的案例是我们有一个1000多万条记录的用户表mem ...
- WEB文件上传漏洞介绍解决办法
引用:http://blog.csdn.net/kobejayandy/article/details/35861499 问题: -1. 上传文件WEB脚本语言,服务器的WEB容器解释并执行了用户上传 ...
- 关于GPL的一些知识
1.什么是GPL GPL许可协议(GNU General Public License):只要软件中包含有其他GPL协议的产品或代码,那么该软件就必须也采用GPL许可协议且开源及免费.具有以下特点: ...
- uml的四种关系
UML的四种常用关系: 泛化关系.关联关系.实现关系.依赖关系 其中泛化关系是指父类与子类之间的继承关系: 实现关系是指接口与实现类之间的关系: 依赖关系和关联关系的区别如下: 只要存在对象间的交互, ...
- html5的选择器
<body> <p class="aa">aaa</p> <p class="bb">bbb</p> ...
- WinForm程序中的类TextBox的自定义控件, 添加失去焦点的功能
原理: 一.在控件的后台代码中, 添加布尔类型的属性CanFocus 二.在控件的构造函数中, 注册Enter事件的处理方法. 并在处理方法中,根据CanFocus属性的值来决定是否可以丢失焦点, 如 ...
- VSS记住用户名和密码
计算机-属性-高级系统设置-环境变量 新建两个环境变量如下: SSUSER(VSS的用户名) SSPWD(VSS的密码)
- curd 里url传输汉字验证错误问题解决方法
在url汉字转换的部分用base64_encode转化 base64_encode 将字符串以 BASE64 编码. 语法: string base64_encode(string data); 返回 ...