css display 总结
1. 块级元素(display: block)
1.1. 独占一行
1.2. 高度、宽度、行高、顶和底边距 可设置
1.3. 默认宽度 父容器100%
2. 内联元素(display: inline)
2.1 和其他元素同一行
2.2 高度、宽度、顶和底边距 不可设置
2.3 宽度是其包含的文字和图片的宽度,不可改变
3. 内联块状元素(display: inline-block)
3.1 和其他元素同一行
3.2 高度、宽度、行高、顶和底边距 可设置
4. absolute和float可改变display
position:absolute、float:left 或 float:right 会使元素变为 display: inline-bolck 显示
元素 默认宽度 不占满 父元素
可设置 width 和 height
css display 总结的更多相关文章
- CSS display:inline-block
CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- CSS display:inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...
- CSS DISPLAY AND POSITIONING
CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...
- CSS Display(显示)和Visibility(可见性)
CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
随机推荐
- 绘图: Shape, Path
Shape - 图形 Path - 路径 示例1.演示“Shape”相关知识点Drawing/Shape.xaml <Page x:Class="Windows10.Drawing.S ...
- Jenkins实现生产环境部署文件的回滚操作(Windows)
由于dotnet项目的生产环境环境部署工具比较少,所以我使用jenkins作为生产环境的自动化部署工具. 既然有回滚操作,那么就会有部署操作:要实现回滚,先要实现部署的操作,我在jenkins搭建了一 ...
- Python Twisted、Reactor
catalogue . Twisted理论基础 . 异步编程模式与Reactor . Twisted网络编程 . reactor进程管理编程 . Twisted并发连接 1. Twisted理论基础 ...
- 做自己的类库dll文件
除了在项目中把类放在不同的文件夹之外,还可以把他们放在完全不同的项目中,添加引用dll 实现对类的调用, 如果一个项目只包含类 但没有入口点 ,那么这个项目叫做类库. 类库项目编译为.dll程序集.( ...
- 净捡软柿子捏--jQuery
恩现在是在学习阶段,所以还只是一个小小的搬运工, 大部分参考自 http://www.w3school.com.cn/ 和http://www.zhangxinxu.com/ 超级好的两个学习网站,因 ...
- [IOS多线程]的使用:防止进行HTTP数据请求时,UI卡死。
多线程的实现:NSThread 1.子线程的创建:两种方法 第一种: [NSThread detachNewThreadSelector:@selector(downloadImage:) toTar ...
- python 生成器和递归
生成器 1.定义 问题:python会把对象放到内存中,我们每次定义变量.列表等都会在内存中占用对应的地址块,所以当内存容量一定时,列表的容量会受到内存的限制,而且假如我们创建了一个包含200万个元素 ...
- 导入.pch文件
Xcode5中创建一个工程的时候,系统会自动创建一个以以工程名为名字的pch(Precompile Prefix Header)文件,开发的过程中可以将广泛使用的头文件以及宏包含在该文件下,编译器就会 ...
- 《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。
昨天学习了window对象的一些方法.window对象主要是针对当前视窗的操作.window对象提供了一些列API来帮助我们了解当前窗口的信息.例如history对象可以让我们获取浏览历史.nvaig ...
- JS中的"=="转换规则
number类型与string类型比较,string会转换为number类型 '' == '0' //false 0 == ''//true; 0 == '0'//true ' \t\r\n '==0 ...