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>