数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中元素的宽度和高度
要指定元素的高度和宽度，分别使用 CSS 的 height 和 width 属性。我们还可以使用 max-height、max-width、min-height 和 min-width 属性设置这些属性的最大值和最小值。
语法
以下是 CSS 中 height 和 width 属性的语法：
Selector {
height: /*value*/
width: /*value*/
}
以下是 height 属性的值：
auto − 高度由网页浏览器计算
length − 高度以长度单位定义
% − 高度以百分比设置
以下是 width 属性的值：
auto − 高度由网页浏览器计算
length − 高度以长度单位定义
% − 高度以百分比设置
元素的实际宽度和高度计算如下：
盒子大小 |
计算方式 |
|---|---|
总宽度 |
width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
总高度 |
height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
以下示例说明了 CSS height 和 CSS width 属性：
div 的高度和宽度
此处使用 heigh 和 width 属性设置 div 容器的高度和宽度：
#demo {
margin: auto;
width: 400px;
height: 80px;
border: 2px solid black;
display: flex;
border-radius: 15px;
}
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 400px;
height: 80px;
border: 2px solid black;
display: flex;
border-radius: 15px;
}
#demo div {
flex: 1;
border: thin dotted;
border-radius: 50%;
line-height: 60px;
text-align: center;
}
#orange {
box-shadow: inset 0 0 8px orange;
}
#green {
box-shadow: inset 0 0 8px green;
}
#blue {
box-shadow: inset 0 0 8px blue;
}
#red {
box-shadow: inset 0 0 8px red;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div id="demo">
<div id="orange">Somebody</div>
<div id="green">that I</div>
<div id="blue">used</div>
<div id="red">to know</div>
</div>
</body>
</html>
导航菜单的高度和宽度
菜单的高度和宽度使用 height 和 width 属性设置：
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us </a>
<a class="links" href="#">More Info</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
图像的高度和宽度
让我们看一个使用 height 和 width 属性设置图像的高度和宽度的示例。
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
示例
这是示例：
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<img src="https://tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
更新于: 2023-12-27
2K+ 阅读量
广告