css系列-display，visibility，溢出

最新推荐文章于 2023-06-13 23:46:51 发布

前端蜗牛君

最新推荐文章于 2023-06-13 23:46:51 发布

阅读量253

点赞数

分类专栏： css 文章标签： css display visibility

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

本文链接：https://blog.csdn.net/zqd_java/article/details/103318256

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

DISPLAY

控制显示隐藏

使用 display 控制元素的显示机制。

选项	说明
none	隐藏元素
block	显示为块元素
inline	显示为行元素，不能设置宽/高
inline-block	行级块元素，允许设置宽/高

行转块元素

span {
  border: solid 1px #ddd;
  display: block;
  margin-bottom: 5px;
  width: 100px;
}
...

   <span>span行元素</span>
    <span>span行元素</span>
    <span>span行元素</span>

块转为行元素

ul>li {
  display: inline;
  padding: 5px 10px;
  border: solid 1px #ddd;
}

ul>li:hover {
  background: green;
  color: white;
  cursor: pointer;
}
...

<ul>
  <li>首页</li>
  <li>关于</li>
  <li>说明</li>
</ul>

行级块使用

a {
  display: inline-block;
  width: 30%;
  height: 50px;
  border: solid 1px #ddd;
  text-align: center;
  line-height: 3em;
}
...

<a href="">MYSQL</a>
<a href="">LINUX</a>
<a href="">PHP</a>

VISIBILITY

控制元素的显示隐藏，在隐藏后空间位也保留。

<style>
	article {
    padding: 30px;
    border: solid 2px red;
    width: 200px;
  }
  article div {
    width: 100px;
    height: 100px;
    border: solid 2px red;
    padding: 20px;
  }
  article div:nth-of-type(1) {
    visibility: hidden;
  }
</style>

<article>
	<div></div>
	<div></div>
</article>

溢出控制overflow

overflow虽然是个很简单的样式属性，但在最近的使用中发现设置了却不起作用，经过查找资料发现了好多注意的地方，在这里总结下：

overflow属性起作用的前提：

1.作用元素必须是块元素，即不能是display:inline;

2.必须有尺寸限制，width/height/max-height/max-width

3.对于单元格td等；还需要table为table-layout:fixed状态才行

隐藏控制

选项	说明
hidden	溢出内容隐藏
scroll	显示滚动条（有些浏览器会一直显示，有些在滚动时显示）
auto	根据内容自动处理滚动条

溢出隐藏

div {
  width: 400px;
  height: 100px;
  border: solid 2px #ddd;
  padding: 20px;
  overflow: hidden;
}

溢出产生滚动条

不同浏览器处理方式不同，有些直接显示出来，有些在滚动时才显示。

div {
  width: 400px;
  height: 100px;
  border: solid 2px #ddd;
  padding: 20px;
  overflow: scroll;
}

文本溢出

已在css系列-font文本介绍，这里不再赘述。

尺寸定义

可以使用多种方式为元素设置宽、高尺寸。

选项	说明
width	宽度
height	高度
min-width	最小宽度
min-height	最小高度
max-width	最大宽度
max-height	最大高度
fill-available	撑满可用的空间
fit-content	根据内容适应尺寸

min&max

正文中不希望图片太大造成溢出窗口，也不希望太小影响美观，使用以下代码可以做到约束。

<style>
	div {
    width: 600px;
    border: solid 2px #ddd;
    padding: 20px;
  }
  div img {
    min-width: 50%;
    max-width: 90%;
  }
</style>

fill-available

在chrome 浏览器中使用前缀 -webkit 书写样式。

下面是行块元素可以撑满可用空间后的效果。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: #2c3e50;
        }

        main {
            background: #9b59b6;
            height: 100px;
            padding: 20px;
            box-sizing: border-box;
        }

        span {
            background: #e67e22;
            display: inline-block;
            width: -webkit-fill-available;
            height: -webkit-fill-available;
        }
    </style>
</head>

<body>
    <main>
        <span>
            块级行元素充满
        </span>
    </main>
</body>

fit-content

下面是根据内容自动适应宽度，让元素居中显示的效果。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: #2c3e50;
        }

        h2 {
            text-align: center;
            background: #f1c40f;
            width: fit-content;
            margin: auto;
        }
    </style>
</head>

<body>
    <h2>根据内容自动适应宽度</h2>
</body>

min-content

使用min-content 将容器尺寸按最小元素宽度设置。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: #2c3e50;
        }

        main {
            width: min-content;
            margin: auto;
        }

        div {
            margin-bottom: 20px;
            background: #f1c40f;
            word-break: break-all;
            padding: 10px;
        }

        div:nth-child(1) {
            width: 100px;
        }
    </style>
</head>

<body>
    <main>
        <div>长长长长长长长内容</div>
        <div>短内容</div>
    </main>
</body>

max-content

容器尺寸按子元素最大宽度设置。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: #2c3e50;
        }

        main {
            width: max-content;
            margin: auto;
        }

        div {
            margin-bottom: 20px;
            background: #f1c40f;
            word-break: break-all;
            padding: 10px;
        }
    </style>
</head>

<body>
    <main>
        <div>长长长长长长长内容</div>
        <div>短内容</div>
    </main>
</body>
</body>

前端蜗牛君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css系列-display，visibility，溢出

DISPLAY#控制显示隐藏使用display控制元素的显示机制。选项说明 none 隐藏元素 block 显示为块元素 inline 显示为行元素，不能设置宽/高 inline-block 行级块元素，允许设置宽/高 #行转块元素span { border: solid 1px #ddd; display: b...
复制链接

扫一扫