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


块级元素的特点:

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,切记!)

如有侵权,请联系!

原文地址:https://www.cnblogs.com/pengxiangchong/p/8302435.html