块元素与内元素
2018-08-09 本文已影响9人
饕餮潴
块元素与行内元素定义：
行内元素：只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素
块元素：占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素
块元素与内元素区别：
| 块元素 | 内元素 |
|---|---|
| 在新行上开始 | 和其他元素在一行 |
| 能容纳其他块元素或者内联元素 | 只能容纳文本或其他内联元素 |
| 高度，行高以及顶和底边距都可以控制 宽度默认父容器宽度，但可单独设置 | 元素中高，行高及顶和底边距不可改变。宽度却绝育内容宽度不可变更 |
常见元素
| 块元素 | 内元素 |
|---|---|
| div v - 常用块级容器 | a - 锚点 |
| form - 交互表单 | b - 粗体 |
| h1~6 - 标题 | br - 换行、em - 强调、i - 斜体、strong - 粗体强调、u - 下划线 |
| hr - 水平分隔线 | img - 图片 |
| ol \ul - 有序\无序列表 | input - 输入框 |
| p - 段落 | span - 常用内联容器，定义文本内区块 |
| table - 表格 | textarea - 多行文本输入框 |
块级元素与内元素互转
1 display：
- display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
- display:block;转换为块级元素。
- display:inline;转换为行内元素。
- display:inline-block;转换为行内块级元素
2 float: - 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白
3 position
-当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素
参考：
https://www.jianshu.com/p/d69878549d92
