元素类型

根据css显示分类HTML元素被分为两种类型:块元素，内联元素

块元素—— block

块状元素（block element）

常见的块级元素有：<div>,<h1>~<h6>,<p>,<ul>,<ol>,<li> 等

块级元素的特点：

默认独占一行
没有宽度时，默认撑满一排（块状元素默认宽度为100%）
高度，行高，外边距和内边距都可以单独设置
可以容纳内联元素和其他的块级元素

代表性的就是<div>，其他的比如p，header，section，address，语义化增强代码的可读性。

内联元素（行内元素）—inline

内联、行内元素（inline element）

常见的行内元素有：<span>,<a>,<strong>,<br>,<em> 等

行内元素的特点：

多个行内元素可以同一行显示
高度和宽度无效，高和宽由内容撑开
不支持上下的margin，水平方向上的padding和margin可以设置
行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

代表性的就是<span>，其他的比如br，a，大多数为描述性的标记

行内块级元素

除了块元素和行内元素，在行内元素中有几个特殊的标签

它们区别一般inline元素

<img/>,<input/>,<select>,<textarea>,<td/>,<button> 等有内在尺寸可以设置它们的宽高度以及对齐属性

行内块级元素的特点：

和相邻的行内元素（行内块元素）在一行上显示，但是中间会有空白的间隙
默认的宽度就是本身内容的宽度（有内在尺寸）
高度，行高，内边距和外边距都可以设置

显示模式的转换

display：inline；转化为行内元素；

display：block；转化为块状的元素；

display：inline-block；块，行内元素转换为行内块。

CSS--块元素和行内元素及行内块元素（外加转换方式）相关推荐

六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
html 指定对象为块元素,html内联（行内）元素、块级（块状）元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
web前端入门到实战：html常见的块元素与内联（行内）元素用法说明
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
html常见的块元素与内联（行内）元素用法说明
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
为什么有些内联（行内）元素可以设置宽高？
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...
div内嵌p,div等块元素出现的问题
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...
php开发是可视的吗,javascript,html_Jquery判断页面元素是否在浏览器的可视区域内，javascript,html,css,html5 - phpStudy...
Jquery判断页面元素是否在浏览器的可视区域内前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过 ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...

CSS--块元素和行内元素及行内块元素（外加转换方式）