CSS新手入门笔记整理:元素类型相互转换

2023-12-14 18:38:09

元素类型

块元素(block)

  • 独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素。
  • 块元素内部可以容纳其他块元素和行内元素。
  • 可以定义 width,也可以定义 height。
  • 可以定义 4 个方向的 margin。

行内元素(inline)

  • 可以与其他行内元素位于同一行。
  • 行内元素内部可以容纳其他行内元素,但不可以容纳块元素。
  • 无法定义 height,也无法定义 width。
  • 可以定义 margin-left 和 margin-right,无法定义 margin-top 和 margin-bottom。

行内块元素( inline-block)

  • 可以定义 width 和 height。
  • 可以与其他行内元素位于同一行。

表格(table)

  • 以表格形式显示,类似于 table 元素

表格行(table-row)

  • 以表格行形式显示,类似于 tr 元素

表格单元格(table-cell)

  • 以表格单元格形式显示,类似于 td 元素

元素类型转换

在 CSS 中,我们可以使用 display 属性来改变元素的类型。

语法

元素{dispiay:取值;}

属性值

说明

inline

转换为行内元素

block

转换为块元素

inline-block

转换为行内块元素

table

以表格形式显示,类似于 table 元素

table-row

以表格行形式显示,类似于 tr 元素

table-cell

以表格单元格形式显示,类似于 td 元素

none

隐藏元素


拓展:display:none 简介

  • 在 CSS 中,我们可以使用 display:none 来隐藏一个元素,并且被隐藏的元素不再占据原来位置的空间。
  • display:none 一般用来配合 JavaScript 动态隐藏元素,被隐藏的元素不占据原来位置的空间。
  • display:none 不推荐用来隐藏一些对 SEO(Search Engine Optimization,搜索引擎优化)关键的部分。因为对于搜索引擎来说,它会直接忽略 display:none 隐藏的内容,不会把display:none 隐藏的内容加入权重考虑。

display:none 和 visibility:hidden 的区别

在 CSS 中,如果想要隐藏某一个元素,可以使用 display:none 或者 visibility:hidden 来实现。虽然两种方式都可以隐藏元素,但是它们之间有着本质的区别。

display:none

元素被隐藏之后,不占据原来的位置,也就是说元素“彻底地消失了,看不见也摸不着。”

visibility:hidden

元素被隐藏之后,依然占据原来的位置,也就是说元素“并没有彻底消失,看不见但摸得着”。


拓展:display:table-cell功能用途

图片垂直居中于元素

配合使用 display:table-cell 和 vertical-align:middle 来实现大小不固定的图片的垂直居中效果。

语法

父元素
{
 display:table-cell;
 vertical-align:middle;
}
子元素{vertical-align:middle;}


等高布局

语法

盒子1{display:table-cell;}
盒子2{display:table-cell;}

两个盒子都不定义高度时,大小而是由盒子的内容撑开。分别给两个元素都转换成“table-cell”,这时两个盒子高度相等,并且高度由两者高度的最大值决定。这就是 “自适应等高布局。”


自动平均划分元素

当有多个元素横向排列时,可以为每一个元素定义 display:table-cell,它会自动平均划分元素,并且使得它们在同一行显示。

语法

父元素{display:table;}
子元素1{display:table-cell;}
······
子元素n{display:table-cell;}
  • 如果为父元素定义 display:table,为子元素定义 display:table-cell,然后为父元素定义一定的宽度,那么此时子元素的宽度就会根据子元素的个数自动平均划分。

拓展: 去除 inline-block 元素间距

  • inline-block 元素之间会有一定的间距,这种间距有时会对布局产生影响。大多数时候为了不影响布局,需要去除 inline-block 元素的间距。
  • 在 CSS 中,可以为父元素定义一个“font-size:0;”来去除 inline-block 元素的间距。

语法

父元素{font-size:0;}
子元素{display:inline-block}


文章来源:https://blog.csdn.net/weixin_55576134/article/details/134879125
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。