CSS3理解display属性
来源:互联网 发布:淘宝宝贝长图作用 编辑:程序博客网 时间:2024/05/18 18:00
display属性定义: 可以将页面元素隐藏或者显示出来,也可以将元素强制改成块级元素或内联元素,在页面布局和JavaScript特效中常常用到display属性。
display属性值:none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit
display常用属性值: inline、block、inline-block和none,接下来对display常用属性值进行分析。
inline: 默认值,特征:内容撑开宽度,不会独占一行,不支持宽高,代码换行会被解析成空格。例如:
<div> <li><a href="">首页</a></li> <li><a href="">新闻</a></li> <li><a href="">娱乐</a></li></div>
<style type="text/css"> a{ background: orange; } li{ display:inline; }</style>
将li标签的display属性设置为inline后,a标签中的元素以内嵌的形式排列成行显示
block: 特征:不设置宽度时宽度为父元素的宽度,独占一行,支持宽高。例如:
<div> <a href="">首页</a> <a href="">新闻</a> <a href="">娱乐</a></div>
<style type="text/css"> a{ background: orange; display: block; margin: 10px; }</style>
将a标签的display属性值设置为block后,a标签中的元素将以块状显示。
inline-block: 特征:不设置宽度时,内容撑开宽度;不会独占一行,支持宽高,代码换行被解析成空格。总之,将对象呈现为inline,但是对象的内容作为block呈现,使其既具有block的宽度高度特性又具有inline的同行特性。
none: 特征:隐藏元素并脱离文档流,即隐藏时不占用空间。
注意 :visibility属性同样具有将页面中的元素隐藏,但元素设置为visibility:hidden
后,被隐藏的元素依然占用原来的空间。
总结一下常见的块级元素和内联元素:
块级: div | form | table | p | h1-h6 | dl | ul | ol
内联: span | a | label | input | select | textarea | img
- CSS3理解display属性
- CSS3的display属性
- 深入理解display属性
- 理解CSS3属性transition
- CSS3理解position属性
- display属性的一点理解
- CSS3:display
- 理解与应用css中的display属性
- 如何理解CSS的display属性
- 理解与应用css中的display属性
- display属性的深入理解和总结
- 移动开发CSS3:display:box,box-flex属性
- H5:常用css3属性box-sizing,display:box
- 浅谈CSS3中display属性的Flex布局
- 浅谈CSS3中display属性的Flex布局
- CSS3中不熟悉的属性2:display:box和display:flex的区别
- CSS3教程:box-sizing属性的理解
- CSS3教程:box-sizing属性的理解
- lua开发环境搭建之HelloLua
- python3[爬虫实战] 爬虫之requests爬取新浪微博京东客服
- 异步代码错误捕获
- 杭电ACM:人见人爱A-B
- 路漫漫其修远兮,吾将上下而求索(非干货,勿入)
- CSS3理解display属性
- 数据结构--堆
- css——三角形的实现
- 互斥资源加锁的实现方式
- 用面向对象的方法实现互斥资源加锁
- 串行队列/并发队列&异步任务/同步任务代码演练
- less简单笔记
- Simple Class Serialization With JsonCpp
- 【HDU1069】 Monkey and Banana(动态规划)