浅谈css的行内类型标签和块级标签
常用标签的行内类型标签有:a、span、img;块级标签有:div、p、h1~6、ul、ol、li、dl、dt、dd。
行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height,不会自动换行。
块级标签的特征:可以设置width和height,会自动换行。
行内类型标签还有一个特点就是:在同一行上每个标签之间有间隙。
a标签的现象:
p标签的现象:
img标签的现象:
解决这一现象最简单的办法就是将两个标签写在同一行。导致这一现象的原因还有待研究。
同样是行内标签,现在想给他们设置width和height,其中的一种方式就是给他们设置display:inline-block;但是这种方式也会导致和上面一样的现象有间隙。
解决这一现象有两种方式:1.将两个标签写在同一行;2.不采用display的方式,采用浮动的方式。因为浮动也可以将行内类型转换为块级类型,而且没有间隙。
块级标签,现在给他们设置display:inline-block;想让他们都在同一行上,这种方式也会导致标签之间有间隙,解决的两种办法同上。
也就是说当给行内标签和块级标签设置display:inline-block这个属性时,标签之间都会出现间隙。
注意:给一个标签同时设置display和float没有任何意义。也就是说display和float不要混用。
设置元素的几种类型:
display:inline;-------------------->将元素设置为行内类型,此时元素在同一行内,不会自动换行,不能设置width和height;
display:block;-------------------->将元素设置为块级类型,此时元素自动换行,可以设置width和height;
diaplay:inline-block;------------>将元素设置为内联块(行内块),此时元素在同一行内,不会自动换行,但是可以设置width和height;
display:none;--------------------->不占位隐藏。将元素隐藏,不显示;
visibility: hidden;----------------->占位隐藏。将元素隐藏,但是元素还占用着那个位置。
最新文章
- SwipeMenuListView在ScrollView里上下滑动导致菜单不能显示完全的bug解决方法
- 2016 Multi-University Training Contest 2
- Redis实现唯一计数的3种方法分享
- Myeclipse SVN错误 443
- android 开源项目一览
- C++库研究笔记——操作符重载实现类型转换&这样做的意义
- Linux下cut命令用法
- StackExchange.Redis 官方文档(三) Events
- 无法打开登录 'ASPState' 中请求的数据库。登录失败。
- poj 1811 随机素数和大数分解(模板)
- java web 下载本地文件并弹出下载框
- php 数组数字 补零
- 动画优化、客户端存储、历史记录、worker
- .net网站上传图片换电脑不显示
- 详解shell编程中2>;&;1用法
- linux minitools+minicom 安装及使用
- EBS查询默认应用用户,比如是否需要锁定、修改这些用户
- Google和Baidu的站内搜索代码
- PCL库简要说明
- 005-redis-命令-无序集合,有序集合
热门文章
- 得到java异常printStackTrace的详细信息
- phpunit 单元测试框架-代码覆盖率
- Android Jni Android.mk经常使用语句
- 慎用Outline ,UGUI Outline实现原理分析
- iOS单例设计模式具体解说(单例设计模式不断完好的过程)
- POJ 2299 Ultra-QuickSort(线段树+离散化)
- SEO 搜索引擎优化培训01
- 模式识别之ocr---文字识别Tesseract-OCR 进行文字识别 VS2010
- JSON入门指南
- VELT-0.1.6开发:载入根文件系统