HTML你应该知道的三大基本元素
顶级、块级、内联,html元素的三大分类
如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.
包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.
2. Block-level element 【块级元素】: { p, h1~h6, div, ul }
顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。
块级元素能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.
3. Inline element 【内联元素】: { a, br, em, img, li, span }
通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。当然内联元素也能变成块级元素,那就是通过css的display:inline;和float来实现。
内联元素依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行.
在《CSS权威指南》这样定义到,“任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式。”我个人不太习惯“行布局”的说话,因为我认为块级元素从表现上更像“行”显示,而内联元素更像是“文本”的显示属性。这其中一点记住很关键,“内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度”。因为在你设置宽度高度大半天后没反应才发现,原来这只是个内联元素。
最新文章
- Linux 系统中僵尸进程
- 转:Eclipse插件开发之TreeViewer
- JavaScript 最佳实践
- HDU 1513 Palindrome(最长公共子序列)
- yii 主从数据库分离-转载http://www.yiichina.com/doc/guide/2.0/db-dao
- Android WebRTC 音视频开发总结(三)-- 信令服务和媒体服务
- Java基础知识强化20:面向对象和面向过程的思想对比
- UVA 2039 Pets(网络流)
- 数据分析前戏:ipython使用技巧(上)
- 关于python安装一些包时出现的错误解决方法
- webpack下css/js/html引用图片的正确方式
- 跟我一起学opencv 第三课之图像在opencv中的表示-Mat对象
- Eclipse Maven编译报不支持muti-catch
- 【java】之正则表达式摘要
- samba服务和nginx服务
- 用Micro:bit控制遥控车
- Android中操作SQLite数据库
- ERROR in [copy-webpack-plugin] unable to locate ";D:/xxx/xxx/xxx";
- TortoiseSvn 取消忽略的文件
- Efficient Graph-Based Image Segmentation