块元素和内联元素的特点和区别

<!--css基础之块级元素和内联元素
块级元素的特点：1.占一整行。
2.是一个矩形。
3.可定义宽度和高度，内边距，外边距等。
4.其display属性默认为block。
内联元素的特点：1.并不占一整行，可并排。
2.依附于其他块级元素存在，如果只有内联元素，则依附body存在,body也是块级元素。
3.宽，高，内边距，外边距无效。
4.其display属性默认为inline。
--->
<!--经常用到的内联元素-->
<a href="#"></a>
<img src="1.jpg" alt="" /> （img是替换内联元素 replaced inline element，属于inline element类目。图片有宽高但是并不占一行！）
<input type="text" />
<label for=""></label>
<br />
<span></span>
<textarea name="" rows="填数字：行" cols=""填数字:列></textarea>
<select name="" id=""><option value="1">1</option></select>
<!--经常用到的块级元素-->
<div></div>
<ul><li></li><li></li></ul>
<form action=""></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<hr />
<p></p>
<table></table>
<!--内联元素（行内元素大家族）
a -- 锚点
abbr -- 缩写
acronym -- 首字
b -- 粗体(不推荐)
bdo -- bidi override
big -- 大字体
br -- 换行
cite -- 引用
code -- 计算机代码(在引用源码的时候需要)
dfn -- 定义字段
em -- 强调
font -- 字体设定(不推荐)
i -- 斜体
img -- 图片
input -- 输入框
kbd -- 定义键盘文本
label -- 表格标签
q -- 短引用
s -- 中划线(不推荐)
samp -- 定义范例计算机代码
select -- 项目选择
small -- 小字体文本
span -- 常用内联容器，定义文本内区块
strike -- 中划线
strong -- 粗体强调
sub -- 下标
sup -- 上标
textarea -- 多行文本输入框
-->
<!--块级元素大家族
address -- 地址
blockquote -- 块引用
center -- 举中对齐块
dir -- 目录列表
div -- 常用块级元素。
dl -- 定义列表
fieldset -- form控制组
form -- 交互表单
h1 -- 大标题
h2 -- 副标题
h3 -- 3级标题
h4 -- 4级标题
h5 -- 5级标题
h6 -- 6级标题
hr -- 水平分隔线
isindex -- input prompt
menu -- 菜单列表
ol -- 排序表单
p -- 段落
pre -- 格式化文本
table -- 表格
ul -- 非排序列表-->
块级元素与内联元素之间的转化
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值。
1.内联==>块级
css中：span{display:block},这样span这个内联元素转变为块级元素，拥有块级元素的特点（前面有介绍）。
2.块级==>内联
css中：div{display:inline},这样div这个块级元素转变为内联元素，拥有内联元素的特点（前面有介绍）,不过这样做没有意义，也不合规范。
3.特殊属性：css中：a{display:inline-block}。（适用范围有限，后续更新）
使元素既有内联元素的部分特点（并排在一行，依附于块级元素），又有块级元素的部分特点（有宽高边距），总体来说就是内联块。
css中：a{display:inline-block;*display:inline;*zoom:1;}(ie，切记！)

如有侵权，请联系！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有