天天看点

块元素和内联元素精炼

块元素:没有任何属性时,默认是独占一行的,可以设置宽高

内联元素:没有任何属性时,默认是同行排列,内容过多才会自动换行

​块元素特点​

​①总是在新行上开始;​

​②高度,行高以及外边距和内边距都可控制;​

​③宽度缺省是它的容器的100%,除非设定一个宽度。​

​④它可以容纳内联元素和其他块元素​

​内联元素特点​

​①和其他元素都在一行上;​

​②高,行高及外​​边距​​和内边距不可改变;​

​③宽度就是它的文字或图片的宽度,不可改变​

​④内联元素只能容纳文本或者其他内联元素​

​注意:在内联元素中调整宽高是无效的​

内联元素与块元素的转化

1.内联元素转化为块元素,加该属性display:block;

2.块元素转化为内联元素,加该属性display:inline-block;

注意:块元素可以包含块元素和内联元素;内联元素只能包含内联元素

    常见块元素(block element)

◎ 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 - 非排序列表(无序列表)

常见内联元素(inline element)

◎ 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 - 定义

​​变量​​

​可变元素​

​可变元素由上下文语境来决定是块元素还是内联元素​

继续阅读