Html 中的块级元素和行内元素(内联元素)
先从字面意思找,块级元素可以看做讲台,自己独占一排,常见标签:<h1>, <p>, <ul>, <table>;行内元素(内联元素)可以看做学生的课桌,可以多个占用一排,常见标签:<b>, <td>, <a>, <img>;
块级元素特点:
- 独占一行,宽度默认是整个父级的宽度(100%)
- 高度、宽度,行高、外边距以及内边距都可以控制
- 里面可以放其他块级元素和行内元素
举例:
1.
2.
3.
行内元素(内联元素)特点:
- 不独占一行,可以跟其他元素共占一行,里面可以放行内元素和其他文本
- 设置高度,宽度无效,宽高是内容的宽高
举例:
1.
2.
上边都是通常情况下的,其实还可以通过样式进行修改,通过display属性进行修改。
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块:display:inline-block;行内块是行内元素和块级元素集合,既可以设置宽度和高度属性(如果没有设置宽度,则是包裹内容宽高),又可以在里面可以放其他块级元素和行内元素。
举例
1.设置宽度和高度时
2.没有宽度和高度时
在开发中注意规范问题:
- 块级元素在网页中一般用于页面布局,行内元素主要用于包裹内容,细节控制
- 一般情况下块级元素放行内元素,行内元素不能放块级元素
- 特殊块级元素不要包含其他块级元素 (h1、h2、h3、h4、h5、h6、p、dt),强调p元素不能放任何的块级元素
- 块级元素与块级元素平级、内联元素与内联元素平级;
- 优化问题:为了提高浏览器的渲染效率问题,应该尽可能少的的嵌套标签。
Html 中的块级元素和行内元素(内联元素)相关推荐
- Web前端,CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言 持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素 特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
- html块级标签转换,html标签中的块级元素详解
今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念 块级元素是一类css样式display默认值为block的html标 ...
- html标签的显示模式(块级标签,行内标签,行内块标签)(转)
html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用, ...
- html标签的显示模式(块级标签,行内标签,行内块标签)
今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用,比如宽.高.水平居中等,其实这个属性的使用只有在块级标签上 ...
- 你真的懂switch吗?聊聊switch语句中的块级作用域
最近在代码中不小心不规范的,在switch里面定义了块级变量,导致页面在某些浏览器中出错,本文讨论以下switch语句中的块级作用域. switch语句中的块级作用域 switch语句中的块级作用 ...
- c语言switch的作用域,你真的懂switch吗?聊聊switch语句中的块级作用域
最近在代码中不小心不规范的,在switch里面定义了块级变量,导致页面在某些浏览器中出错,本文讨论以下switch语句中的块级作用域. switch语句中的块级作用域 switch语句中的块级作用域可 ...
- CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...
- js中的块级元素和行级元素
块级元素和行内元素的定义 块级元素 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度. 它可以容纳内联元素和其他块元素 行内元素 和其他元素都 ...
- html中哪些属于块级标记,html行级标记和块级标记都有哪些?
内联元素(行内元素) 内联元素(inline element) * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi overr ...
最新文章
- 51CTO学院三周年-最受学员喜爱讲师评选大赛
- typeset的常见用法
- 删除svn_推荐:mac上svn常用命令及好用的工具
- csv文件导入导出到mysql
- 欧拉函数的性质及其证明
- python内置函数open的解释_在python的内置open()函数中缓冲的用途是什么?
- 20161212xlVBA文本文件多列合并
- 利用VB2005制作颜色渐变的进度条
- 词根词缀的实践应用 - 词根词缀词典墨墨详细使用
- 数据分析师 2020-8-09笔试题目 有感
- 腾讯云GPU服务器价格表出炉新鲜的
- SaaS部署和私有化部署的区别及各自的优点
- 基于 WebRTC 的 P2P 文件传输
- 计算机系统对工业相机影响,如何理解工业相机的校准
- Translation Regime介绍
- 分享两个免费在线shell
- 《Java核心技术卷Ⅰ》没学过Java的再点进来看
- Docker实战之通过nginx镜像来部署静态SPA项目
- 如何通过发帖赚钱的(看完后绝对比打工强)
- 基于计组实验软件CMStudio设计一种简单同或运算指令系统