行内元素 块级元素 行内块级元素的区别，盒子模型。

男娘i 2023-05-30 03:44 132阅读 0赞

行内元素 、块级元素 、 行内块级元素的区别

块级元素

  • ​ 总是另起一行
  • ​ 可以设置其宽度 高度 内外边距
  • ​ 在不手动设置宽度和情况下，宽度默认为所在容器的100%(即容器宽度)
  • ​ 可以容纳行内元素和其他块级元素
  • ​ 常见的块级元素 div h1~h6 p ul table

行内元素

  • ​ 总是和相邻的行内元素在同一行上
  • ​ 设置宽高无效，水平方向的padding和margin属性可以设置，但垂直方向无效。
  • ​ 默认宽度是它自身内容的宽度
  • ​ 行内元素只能容纳其他的行内元素，或者文本
  • ​ 常见的行内元素
  • ​ span a img br input textarea select strong em 等

​

行内块元素

  • ​ 特殊的行内元素，他们可以设置宽高，对齐属性, 如 img input td

  • ​ 行内块元素 综合了块元素 和行内元素的不同特点

    ​ 1.和相邻行内元素同行，但之间会有空白缝隙

    ​ 2.默认宽度为本身内容宽度

    ​ 3.宽度 高度 行高 内外边距都可以手动设置

盒子模型

比如DIV，把他比喻成一个盒子

  • margin 外边距
  • border 线宽
  • padding 内边距
  • content ( width height ) 内容

盒子模型 可以分为两类：

  • 普通的盒子模型，content就是内容，包含width height
  • 怪异的盒子， content会包含border 和 padding

设置 box-sizing， 可以改变盒子模型类型

  • 标准盒子模型 box-sizing: content-box
  • 怪异盒子模型 box-sizing: border-box

发表评论

表情：
评论列表 （有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读