css之display
来源:互联网 发布:编程书籍 用什么看 编辑:程序博客网 时间:2024/05/21 17:14
p, ul, form, div等元素被称为块级元素,这些元素显示为一块儿内容(会自动换行),span, input 等元素称为行内元素,这两者主要区别就是块级元素会从上到下一个个垂直排列,
每个自占一行,如下即使两个div之间没任何元素,绿色的div仍然会显示在hongsediv下方,而不是右方
<div style="height: 100px; width: 100px; background-color: Red;"></div><div style="height: 100px; width: 100px; background-color: Green;"></div>
而行内元素在一行中水平排列,行内元素的高度由其内容撑开,不可显示的设置其高度,这就是为什么我们一次次的在span上设置height属性不好使的原因
简单了解了这些知识,让我们看看display常用的几个属性,一些不太常用的我也不明白,就不说了
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
我们在显示隐藏元素的时候经常会用到把display设为none或者’’,设为none效果很明显,就是让元素脱离文档流,不显示,不占文档空间,而设为’’其实就是设置为元素默认属
性block或inline,inline-block属性是CSS2.1新加值,IE8以上及其他主流浏览器都已经支持,它可以使元素像行内元素那样水平一次排列,但是框的内容符合块级元素行为,
够显示设置宽,高,内外边距。很有意思。还有一点儿很有意思,可以通过不同的赋值改变元素生成框的类型,也就是说,通过将display属性设置为block,可以使行内元素表现
的想块级元素一样,反之亦然
0 0
- css之display
- CSS之display
- CSS 之 display:table
- css之display属性
- CSS之display属性
- css之display:inline-block
- css布局之"display"属性
- CSS之display与visibility
- css学习笔记之display
- web前端之css中display属性,display:inline-block
- css属性之display:none、block、inline
- css之常用样式及display样式
- CSS之visibility和display的差别
- CSS之display:inline、block、inline-block
- css display
- css Display
- css display
- CSS Display
- Haar特征与积分图
- Webservice原理解析
- 排版设计之统一元素间隔
- hdoj--1686--Oulipo
- 基于HttpClient的java后台访问URL
- css之display
- 基于R语言的关联规则实现
- 常见的图像重采样算法
- nginx学习(一)入门
- phonegap android开发环境搭建
- VTK实现Delaunay三角化
- 《剑指offer》——1 二维数组中的查找
- iOS之Xcode设置点滴记录(一)
- 《剑指Offer》小结和博文索引