1.块级元素 block

块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可自定义width和height。除此之外，它独占一行（float除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。

块级元素有以下特点：

每个块级元素都是独占一行；
高度，行高，外边距（margin）以及内边距（padding）都可以控制；
元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；）；
多个块级元素标签写在一起，默认排列方式为从上至下；

<address>
<caption>
<dl>    // 定义列表
<dt>     // 定义列表中的项目
<dd>      // 定义列表中定义条目
<div>
<fieldset>
<form>
<h1>~<h6>
<hr>
<legend>
<li>
<ol>
<ul>
<p>
<table>
<tr>
<th>
<td>
<thead>  //定义表格的表头

1.1自定义列表

<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd>
</dl>

运行结果：

2.行内元素 inline

行内元素不可以设置宽和高，但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容长度控制。行内元素有以下特点：

不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化。
高宽度无效，对外边距和内边距仅设置左右方向有效，上下无效；
设置行高有效，等同于给父元素设置行高；
元素的宽度就是它包含的文字或图片的宽度，不可改变；
行内元素中不能放块级元素，a链接里面不能再放链接；
```
<a>

 


<label>
<select>


```
3.行内块级元素 inline-block

行内块级元素它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。具有的特点：

高度、行高、外边距以及内边距都可以控制；
默认宽度就是它本身内容的宽度，不独占一行，但是之间会有恐怖缝隙，设置它上一级的font-size为0，才会消除间隙；

<button>
<input>
<textarea>
<select>
<img>

CSS中块级元素、行内元素、行内块元素区别相关推荐

[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
最基本的: 设置display属性为none,或者设置visibility属性为hidden 技巧性: 设置宽高为0,设置透明度为0,设置z-index位置在-1000em 转载于:https://w ...
html左浮动不管用图片往下放,html - 如何在HTML / CSS中水平对齐图像（浮动和显示内联块不起作用） - 堆栈内存溢出...
我有一个水平排列的图像库,但是后来我做到了,以便当您将鼠标悬停在图像上时,图像上会覆盖文字,现在我以前没有什么东西可以用来使它们水平排列. 我尝试在所有选择器上使用左浮点数(同样使用display i ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
行内元素与块级元素，以及区别
行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比 ...
文档流及其特性块级元素与行内元素的区别浮动的清除方法（解决浮动塌陷）
标准文档流 web页面的制作,是一个"流",必须从上到下,像是"织毛衣". 标准文档流的特性 1.空白折叠现象无论有多少个空格,换行,tab,都会折叠成一个空 ...
html中哪个属性表示块级元素,HTML块级元素与行级元素
转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中的大部分元素都可分为两种类型:块级 ...
块级元素，行内元素，行内块元素
常见元素类型有:块级元素.行内元素.行内块元素 .(这里所说的元素,就是指标签) 一.块级元素: 块级元素独占一行,不和其他元素并排:可以设置宽高和上下外边距:不设置宽度时默认宽度 100%:可以容纳 ...
CSS 框的生成：块级元素和块框
在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框.默认情况下,一个元素的类型,决定了该元素生成框的类型.块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名框. 也 ...

CSS中块级元素、行内元素、行内块元素区别

1.块级元素 block

1.1自定义列表

2.行内元素 inline

3.行内块级元素 inline-block

CSS中块级元素、行内元素、行内块元素区别相关推荐

最新文章

热门文章

CSS中 块级元素、行内元素、行内块元素区别

1.块级元素 block

1.1自定义列表

2.行内元素 inline

3.行内块级元素 inline-block

CSS中 块级元素、行内元素、行内块元素区别相关推荐

最新文章

热门文章

CSS中块级元素、行内元素、行内块元素区别

CSS中块级元素、行内元素、行内块元素区别相关推荐