深入理解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 ...
随机推荐
- 把解压缩版的tomcat6注册成服务并设置自启动
操作步骤: 1.在“开始 ”→“运行 ”中输入cmd 命令,进入MS-DOS界面 2.cd 到tomcat的bin目录下 C:/> cd tomcat/bin 3.运行命令servi ...
- java SSH框架详解(面试和学习都是最好的收藏资料)
Java—SSH(MVC)1. 谈谈你mvc的理解MVC是Model—View—Controler的简称.即模型—视图—控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开.MVC ...
- tomcat7/8 启用调试模式,可进行远程调试
tomcat7,和 tomcat6 的jpda 不一样,tomcat7已经把jpda配置的属性在catalina.sh/catalina.bat里面已经写好了,我们不需要向tomcat6那样去设置参数 ...
- Lua学习笔记(一)-----C#和lua的交互
一直以来对Lua热更新技术很感兴趣,在上周开始了对Lua的学习,主要学的是uLua. 直接上干货 准备工作: LuaInterface包括两个核心库一个是LuaInterface.dll,一个是Lua ...
- IS A 和 HAS A的区别
IS A:一般是用作继承或者接口类.比如:中国人和外国人都是人,重点在:是一个... . HAS A:一般用作对象和他的成员的从属关系.比如:中国人和外国人都有眼睛.耳朵.嘴巴.重点在:有一个... ...
- 5、SQL Server数据库、T-SQL
SQL Server数据库基础 一.安装SQL Server数据库 setup.exe->安装->全新SQL Server独立安装或向现有安装添加功能->输入序列号->下一步- ...
- nodeJs中创建服务器
var http=require('http'); var httpObj=http.createServer(function(req,res) { console.log('someBody:' ...
- vb.net字符串格式转为日期型
vb.net字符串格式转为日期型 比如 "20080815" 转换为"2008-05-15"Dim a As Date Dim s As String = ...
- MediaBrowserService 音乐播放项目
MediaBrowserService 音乐播放项目,本项目主要有如下功能: (1):支持播放在线音乐 (2):按住home键退出页面后显示通知栏部分播放提示, (3) : 支持切换上下首歌曲 本项 ...
- Java类额应用
基本数据类型包装类 Integer Character 其他的都是将首字母大写; 包装类和基本类型之间的转换: Integer int Integer i = new Integ ...