CSS的 行内元素 和 块类元素
程序员文章站
2022-08-09 17:01:09
块级元素 行内元素 块级元素和行内元素的区别 行内块标签 inline block 标签显示模式转换 display ......
块级元素
1.总是从新行开始 2.高度、行高、外边距以及内边距都可以控制 3.宽度默认是浏览器的100% 4.可以容纳内联元素以及其他块元素
行内元素
1.和相邻元素在一行上 2.高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效 3.默认宽度就是它本身内容的宽度 4.行内元素只能容纳文本或其他行内元素(a除外) 注意: 1.只有文字才能组成段落,因此p里面不能放置块级元素,同理还有这些标签h1-h6,dt等,它们都是文字块级标签,里面不能放置其他块级元素 2.链接里面不能再放置链接
块级元素和行内元素的区别
块级元素的特点: 1.总是从新行开始 2.高度、行高、外边距以及内边距都可以控制 3.宽度默认是浏览器的100% 4.可以容纳内联元素以及其他块元素 行内元素的特点: 1.和相邻行内元素在一行上 2.高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效 3.默认宽度就是它本身内容的宽度 4.行内元素只能容纳文本或其他行内元素(a除外)
行内块标签 inline-block
在行内元素中有几个特殊的标签--<img />、<input>、<td>,可以对他们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。 特点: 1.和相邻行内元素(行内部)在一行上,但是之间会有空白间隙 2.,默认宽度是它本身内容的宽度 3.高度、行高、外边距以及内边距都可以控制
标签显示模式转换 display
块转行内:display:inline; 行内转块:display:block; 块、行内元素转换为行内块:display:inline-block;
上一篇: js入门与实战课前准备和编辑工具介绍
下一篇: Flutter 实现虎牙/斗鱼 弹幕效果