一、块级元素 block

1. 特点：

自动换行
独占一行
可设置宽高
默认宽度为父元素的宽度

2.常见块级元素

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

  <center>...</center>  地址文字<h1>...</h1>  标题一级<h2>...</h2>  标题二级<h3>...</h3>  标题三级<h4>...</h4>  标题四级<h5>...</h5>  标题五级<h6>...</h6>  标题六级<hr>  水平分割线<p>...</p>  段落<pre>...</pre>  预格式化<blockquote>...</blockquote>  段落缩进   前后5个字符<marquee>...</marquee>  滚动文本<ul>...</ul>  无序列表<ol>...</ol>  有序列表<dl>...</dl>  定义列表<table>...</table>  表格<form>...</form>  表单<div>...</div>

3.注意

块级元素可以嵌套任意元素
块级文字元素中不能放入其他块级元素，比如： p中不要嵌套div、p、h

二、行内元素 inline

1.特点

无法自动换行
一行可放多个
不可设置宽高
默认宽度是本身内容宽度
行内元素的paddding可以设置
margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效

2.常见行内元素

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

  <b>...</b>  加粗<strong>...</strong>  加粗<sup>...</sup>  上标<sub>...</sub>  下标<i>...</i>  斜体<em>...</em>  斜体<del>...</del>  删除线<u>...</u>  下划线

3.注意

行内元素尽量只放行内元素与行内块元素，链接里边不能再放链接，特殊情况a可以嵌套任意元素。

三、行内块元素 inline-block

1.特点

综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距

2.常见行内块元素

img 、input 、td

四、标签之间的转换

display：inline（转为行内元素）/inline-block（转为行内块元素）/block（转为块元素）/none（隐藏不显示）

注意：当元素浮动（float）时会转化成行内块元素特点。

常见的块级元素、行内元素、行内块元素相关推荐

html块级标签转换,html标签中的块级元素详解
今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念块级元素是一类css样式display默认值为block的html标 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
网页编程技术二（块级元素和行内标签）
1.块级元素顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1>&l ...
块级元素，行内元素，行内块元素
常见元素类型有:块级元素.行内元素.行内块元素 .(这里所说的元素,就是指标签) 一.块级元素: 块级元素独占一行,不和其他元素并排:可以设置宽高和上下外边距:不设置宽度时默认宽度 100%:可以容纳 ...
行内元素与块级元素，以及区别
行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比 ...
html中哪个属性表示块级元素,HTML块级元素与行级元素
转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中的大部分元素都可分为两种类型:块级 ...
html标签的显示模式（块级标签，行内标签，行内块标签）（转）
html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用, ...
CSS 框的生成：块级元素和块框
在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框.默认情况下,一个元素的类型,决定了该元素生成框的类型.块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名框. 也 ...
html标签的显示模式（块级标签，行内标签，行内块标签）
今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用,比如宽.高.水平居中等,其实这个属性的使用只有在块级标签上 ...

常见的块级元素、行内元素、行内块元素

一、块级元素 block

1. 特点：

2.常见块级元素

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

3.注意

二、行内元素 inline

1.特点

2.常见行内元素

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

3.注意

三、行内块元素 inline-block

1.特点

2.常见行内块元素

img 、input 、td

四、标签之间的转换

常见的块级元素、行内元素、行内块元素相关推荐

最新文章

热门文章