CSS基础-块级元素与行内元素

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-块级元素与行内元素

块级元素是有效有效撑满父元素 行内元素否无效padding有效;margin水平方向有效,竖直方向无效随内部元素的内容变化 行内块级元素否有效有效随内部元素的内容变化

块级元素:

独占一行;元素的宽高、以及内外边距都可设置;元素宽度在不设置的情况下,是它本身父容器的100%。

行内元素:

不会自动进行换行;元素的宽高不可设置;内边距可以设置、外边距水平方向有效,竖直方向无效;元素宽度在不设置的情况下,随内部元素的内容变化。

常见块级元素:

  div , h1—h6 , p , ul , ol , dl , table , form

* div - 常用块级元素,也是css layout的主要标签 * h1---h6 标题 * p - 段落 * ul - 非排序列表 * ol - 排序表单 * dl - 定义列表 * table - 表格 * form - 交互表单 * hr - 水平分隔线 * pre - 格式化文本 * address - 地址  * blockquote - 块引用 * header - HTML5区段头或页头。 * footer - HTML5区段尾或页尾。 * section - HTML5一个页面区段。 * article - HTML5文章内容。 * aside - HTML5伴随内容。 * hgroup - HTML5标题组。 * menu - HTML5菜单列表 * figcaption - HTML5图文信息组标题 * figure - HTML5图文信息组  * audio - HTML5音频播放 * video - HTML5视频 * output - HTML5表单输出

常见行内元素:

  span , a  ,strong  ,b ,em  , i  , big  ,small  ,label ,img , input  , select ,textarea(他们属于行内置换元素,下文详解)

* span - 常用内联容器,定义文本内区块 * a - 锚点 * strong - 粗体强调 * b - 粗体 * em - 强调 * i - 斜体 * small - 小字体文本 * big - 大字体 * sub - 下标 * sup - 上标 * label - 表格标签

* img - 图片* input - 输入框 * select - 项目选择 * textarea - 多行文本输入框 * abbr - 缩写 * code - 计算机代码(在引用源码的时候需要) * acronym - 首字 * bdo - bidi override * br - 换行 * cite - 引用 * dfn - 定义字段 * font - 字体设定(不推荐) * kbd - 定义键盘文本 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * strike - 中划线 * tt - 电传文本 * u - 下划线 * var - 定义变量

  • img - 图片* input - 输入框
  • select - 项目选择
  • textarea - 多行文本输入框
  • abbr - 缩写
  • code - 计算机代码(在引用源码的时候需要)
  • acronym - 首字
  • bdo - bidi override
  • br - 换行
  • cite - 引用
  • dfn - 定义字段
  • font - 字体设定(不推荐)
  • kbd - 定义键盘文本
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • strike - 中划线
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

  行内元素和块级元素都不是绝对的,可以相互转换,,通常有这些方式可以转换。
  1、display,将元素设置为块级、行内或是其它。
  2、float,隐形地把内联元素转换为行内块级元素。不会占据一行,相当于display:inline-block;
  3、position,属性值为absolute、fixed时,隐形地把内联元素转换为块级元素,其它属性值不会做转换。

  img、input、textarea、select、object是行内元素,但是它们却可以设置宽高,这是为什么呢?因为它们是行内置换元素。

  置换元素:内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。浏览器根据元素的标签和属性,来决定元素的具体显示内容。 例如:浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;input标签的type属性来决定是显示输入框,还是单选按钮等。

  置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。

扫描二维码

关注更多精彩

始发于微信公众号: 前端麻辣烫

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-块级元素与行内元素


 上一篇
CSS基础-footer元素始终粘在浏览器底部的四种方法 CSS基础-footer元素始终粘在浏览器底部的四种方法
本文介绍底部footer元素如何始终粘在浏览器底部。当内容container足够多、可以撑开一屏的时候,底部footer紧跟在内容container后边;而内容container不够多、不足以撑开一屏到达浏览器底部时,底部footer仍然在
2021-04-05
下一篇 
CSS基础-​position CSS基础-​position
position是规定元素的定位类型属性,它的值有absolute、relative、fixed、static(static)、inherit。需要注意的是,绝对定位absolute和固定定位fixed元素会隐式地转换为块级元素,而不论该元
2021-04-05