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

display基本属性

程序员文章站 2022-05-15 12:25:37
...
  1. display:none / visibility:hidden / visibility: collapse

display:none 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样,也就是说它所占据的空间消失了。元素的内容也会消失。

visibility:hidden 隐藏元素而不更改文档的布局,相当于此元素变成透明。要注意若将其子元素设为 visibility: visible,则该子元素依然可见。

visibility: collapse 用于 < table > 行、列、列组和行组,隐藏表格的行或列,并且不占用任何空间(与将 display: none 用于表格的行/列上的效果相 当)。但是,仍会计算其他行和列的大小,就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列,而不强制重新计算整个表的宽度和高度。


  1. display:inline / display:block / display:inline-block / display:list-item

display:inline 内联元素

  • inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化;

  • inline元素设置width、height属性无效;同时text-align属性设置也无效,但是设置了line-height会让inline元素居中.

  • inline元素的margin和padding属性,水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果;但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。
    display基本属性

  • 常见的内联元素有

<a><span><br><i><em><strong><label><q><var><cite><code>

display:block 块级元素

  • block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度
  • block元素可以设置margin和padding属性/width、height属性
  • 块级元素在设置宽度的情况下,是通过自定义margin-right来自动填满一行,这个时候你设置margin-right是无效的(设置了width,通过margin填充一行);块级元素在没有设置宽度的时候,margin-right会生效,块级元素的width通过自定义在自动填满一行(未设置了width,通过margin填充一行)
  • 设置块级元素高度时注意:a) 默认值为0; b)由元素内部的文档流中的元素的高度的总和决定的(里面元素的height+padding+margin有合并的可能),当元素脱离文档流时,不能用于父元素高度的计算;c) 当块级元素里面是文字时,文字只有一行,高度由line-height决定
在设计的过程中有时需要设计一个div宽高都是整个屏幕
整个时候宽度很好设置,可是高度一般很难设置
因为页面一般都是可以滚动的,所以高度一般可变
所以这个时候可以使用

html{
  height: 100%;
}
body{
  height: 100%;
  padding: 0;
  margin:0;
}
.main{
  background: red;
  width: 100%;
  height: 100%;
}

<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="main">
  </div>
</body>
</html>

div继承的是父元素body的高度
body是继承html的高度
html是继承的浏览器屏幕的高度。

常见的块级元素

<div> <p> <h1> <form> <ul> <li>

display:inline-block 行内块元素

  • 将对象呈现为inline对象,但是对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内
  • width、height、margin、padding设置都会生效。

display:list-item 列表显示

  • 要完全模仿列表的话还需要加上 list-style-position,list-style-type

display基本属性

其他表格属性
display基本属性