html块级标签转换,html标签中的块级元素详解

今天，我们就讲解一下html标签中的块级元素，主要包括块级元素的概念、作用、特点，还有就是块级元素有哪些标签等内容。

块级元素概念

块级元素是一类css样式display默认值为block的html标签，块级元素在浏览器中显示的内容是单独占据一行，相当于说默认情况下，块级元素的前后都是自动换行，再说明白点，就是多个块级元素，是自动从上到下垂直排列的，并且每个块级元素都独占一行！

块级元素的CSS样式默认属性display:block；

块级元素有哪些

常见html块状元素：

div(块级容器)、p(段落)、h1~h6(标题)、ul(无序列表)、ol(有序列表)、dl(定义列表)、dd(定义列表条目)、table(表格)、hr(水平分隔新)、blockquote(块引用)、address(联系方式信息)、menu(菜单列表)、pre(格式化文本)、center (居中对齐)、dir(目录列表)、fieldset(表单元素分组)、form(表单)、tfoot(表脚注)，另外还有noscript表示不支持脚本或禁用脚本时显示的内容。

HTML5新增的块级元素：(html5中没有明确定义块级元素，但实际中类似于块级元素)

aside(伴随内容)、footer(页尾或底部)、article(文章内容)、audio(音频播放)、canvas(绘制图形)、figcaption(图文信息组标题)、

)、header(区段头或页头)、hgroup(标题组)、output(表单输出)、section(一个页面区段)、video(视频)；

块级元素特点

块级元素会独占一行，可设置宽(width)、高(height)、margin(外边距)和padding(内边距)。

1、块级元素一般是其他元素的容器，块级元素内可以放入块级元素和行内元素。有些块级元素，如

只能包含块级元素；p 元素，只能包含内联元素，而不能包含块级元素，也有一些块级元素既可以包含块级，也可以包含内联元素。

2、块级元素会独占一行，也就是说，每一个块级元素前后都会自动换行，让自己独占一行；

3、块级元素可以设置margin(外边距)和padding(内边距)的四边(上下左右)；

4、块级元素可以设置宽度(width)、高度(height)；块级元素即使设置了宽度，仍然是独占一行。当只设置了height属性时，则width默认是自动填满其父类元素的宽度。

5、块级元素的宽度是它所在父元素宽度的100%，或者自己指定设置一个宽度；

块级元素转换

块状元素与内联元素的相互转换：通过css控制

块状元素转化为内联元素：css设置display:inline

内联元素转化为块状元素：css设置display:block

块级和内联元素转换为内联块级元素：css设置display：inline-block

内联元素转换块级元素

display

内联元素转化为块状元素：css设置display:block；

float

内联元素转换成块级元素：CSS设置float:left/right，这样内联元素的display属性会被赋予block值，且拥有浮动特性。内联元素去除了之间的莫名空白。

position

内联元素转换成块级元素：CSS设置position:absolute，或position:fixed，都会使原先的内联元素变成块级元素。

html块级标签转换,html标签中的块级元素详解相关推荐

html5中的行高元素,详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
关于元素的一些属性在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性.特别是一下这些: 尺寸相关:offsetHeig ...
Html块级元素详解
Html块级元素详解 *块级元素常见的有:div , table, tr , from , ul ,li ,ol ,h1~h6, p 盒子 div 标签 <div class="bq ...
django批量修改table_python中Django视图(view)的详解（附示例）
本篇文章给大家带来的内容是关于python中Django视图(view)的详解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个视图函数(类),简称视图,是一个简单的Py ...
Keras深度学习实战（4）——深度学习中常用激活函数和损失函数详解
Keras深度学习实战(4)--深度学习中常用激活函数和损失函数详解常用激活函数 Sigmoid 激活函数 Tanh 激活函数 ReLU 激活函数线性激活函数 Softmax 激活函数损失函数 ...
html里的section可以设置id,html5中section元素详解
html5中section元素详解一.总结一句话总结: section元素用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
HTML5中section由什么组成,html5中section元素详解
html5中section元素详解一.总结一句话总结: section元素用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
Oracle中序列（Sequence）详解
Oracle中序列(Sequence)详解一序列定义序列(SEQUENCE)是序列号生成器,可以为表中的行自动生成序列号,产生一组等间隔的数值(类型为数字).不占用磁盘空间,占用内存. 其主要用 ...
pythonpandas函数详解_对pandas中Series的map函数详解
Series的map方法可以接受一个函数或含有映射关系的字典型对象. 使用map是一种实现元素级转换以及其他数据清理工作的便捷方式. (DataFrame中对应的是applymap()函数,当然Dat ...
STM32(Cortex-M3)启动过程+IAR中xcl及icf文件详解
一:STM32(Cortex-M3)启动过程(入口地址) ARM7和ARM9启动时从绝对地址0X00000000开始执行复位中断程序,即固定了复位后的起始地址,但中断向量表的位置是可变的. Corte ...

html块级标签转换,html标签中的块级元素详解

html块级标签转换,html标签中的块级元素详解相关推荐

最新文章

热门文章