常用的行内元素和块级元素有哪些及区别?

常用的行内元素和块级元素有哪些及区别?

1. 块级元素和内联元素的区别:

1.块级元素,宽度默认是它容器的100%,各占据一行,垂直方向排列;内联元素,都是同一行,水平方向排列;
2.块级元素,能容纳其他块元素或者内联元素;内联元素,只能容纳文本或其他内联元素;
3.块级元素中height,line-height以及margin和padding都可以控制;行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

2.行内元素和块级元素有哪些

常见的内联元素:

a - 锚点
select - 项目选择
span - 常用内联容器,定义文本内区块
strong - 粗体强调
img - 图片
input - 输入框
label - 表格标签
textarea - 多行文本输入框
br - 换行

常见的块级元素

div
ul ,li 非排序列表
form - 交互表单
table - 表格
h1 -h6 标题
hr - 水平分隔线
p - 段落
dl -dt-dd - 定义列表
address - 地址
blockquote - 块引用
fieldset - form控制组

3. 块级元素和内联元素之间的转换:

1.display
块元素默认display:block;行内非替换元素(a,span)默认为display:inline;行内替换元素(input)默认为display:inline-block;
a.display:none;不显示该元素,也不会保留该元素原先占有的文档流位置。
b.display:block;转换为块级元素。
c.display:inline;转换为行内元素。
d.display:inline-block;转换为行内块级元素。
2.float
当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了之间的莫名空白。
3.position
当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

你可能感兴趣的:(前端知识点)