欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html/css元素

程序员文章站 2022-07-01 13:05:32
块级元素 会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。 可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 可以设置margin和padding属性。 text align无效 内联元素 width,height无效 ......

块级元素

  • 会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  • 可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  • 可以设置margin和padding属性。
  • text-align无效

内联元素

  • width,height无效
  • margin、padding的水平方向有边距效果
  • 垂直方向的行为表现完全受line-height 和 vertical-align的影响
  • padding有效,但是对上下元素的原本布局却没有任何影响,仅仅是垂直方向发生了层叠
应用:
  1. 为链接扩大点击区域,并且不影响当前的内容布局。
  2. 高度可控的管道符
a + a:before {
   content: "";

   font-size: 0;

   padding: 10px 3px 1px;

   margin-left: 6px;

   border-left: 1px solid gray;

}

内联块元素

既具有block的宽度高度特性又具有inline的同行特性。