display基本属性

最新推荐文章于 2024-04-19 20:41:06 发布

李姆斯

最新推荐文章于 2024-04-19 20:41:06 发布

阅读量292

点赞数

分类专栏： CSS 文章标签： css3 css html5 html

本文链接：https://blog.csdn.net/weixin_39703655/article/details/110385538

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

display:none / visibility:hidden / visibility: collapse

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

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

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

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不会产生边距效果。
常见的内联元素有

<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

在这里插入图片描述

其他表格属性
在这里插入图片描述

李姆斯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display基本属性

display:none / visibility:hidden / visibility: collapsedisplay:none 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失了。元素的内容也会消失。visibility:hidden 隐藏元素而不更改文档的布局，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。visibility: collapse 用于 < t..
复制链接

扫一扫