display

96
unspecx
2019.05.20 16:24* 字数 376

一、简介

display用于设置元素的外部或者内部显示类型,外部定义了在流式布局中如何展示,内部显示类型定义了元素内子元素的布局方式。
display属性按照取值不同分为了6大类,以及全局值。

序号 互联网分类 MDN 属性值
1 外部值 <display-outside> display: block; display: inline; display: run-in;
2 内部值 <display-inside> display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby;
3 列表值 <display-listitem> ......
4 属性值 <display-internal> ......
5 显示值 <display-box> ......
6 混合值 <display-legacy> display: inline-block; display: inline-table; display: inline-flex; display: inline-grid
7 全局值 Global display: inherit; display: initial; display: unset;

具体的讲解可参照:
<1>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Display
<2>https://segmentfault.com/a/1190000012833458

二、常见display属性值

行内元素 inline

<默认值>
特点:

  1. 和其他元素都在一行上,只有一行排不下才换行
  2. 设置宽高无效,宽度只与内容有关
  3. 设置内外边距只对左右起作用,对上下无效
  4. 行内元素只能容纳文本或者其他行内元素

最常见行内元素是span,同类的还有除了p以外的所有文本级标签

块元素 block

特点:

  1. 总是从新行开始且独占一行,默认宽度自动填满其父元素宽度
  2. 可以设置宽高及内外边距
  3. 可以容纳内联元素及其他块元素
    常见的块级元素divp,及所有的容器级标签

行内块元素 inline-block

特点:

  1. 和其他行内元素在同一行,
  2. 默认宽度为内容宽度
  3. 可以设置宽高及内外边距

三、块级元素和内联元素

块级元素

标签 说明
address 地址
blockquote 块引用
center 举中对齐块
dir 目录列表
div 常用块级容易,也是css layout的主要标签
dl 定义列表
fieldset form控制组
form 交互表单 (只能用来容纳其它块元素)
h1 大标题
h2 副标题
h3 3级标题
h4 4级标题
h5 5级标题
h6 6级标题
hr 水平分隔线
isindex input prompt
menu 菜单列表
noframes frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript 可选脚本内容(对于不支持script的浏览器显示此内容)
ol 排序表单
p 段落
pre 格式化文本
table 表格
ul 非排序列表

行内元素

标签 说明
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 多行文本输入框
tt 电传文本
u 下划线
var 定义变量
Css
Gupao