个性化阅读
专注于IT技术分析

CSS宽度width

本文概述

CSS width属性用于设置元素内容区域的宽度。

它不包括填充边框或边距。它设置元素的边框, 边框和边距内的区域宽度。

CSS宽度值

描述
auto 这是默认值。它用于计算宽度。
length 它用于定义以px, cm等为单位的宽度。
% 它以%定义包含块的宽度。
initial 用于将属性设置为其默认值。
inherit 它用于从其父元素继承属性。

CSS宽度示例:像素宽度

<!DOCTYPE html>
<html>
<head>
<style>
img.normal {
    width: auto;
}
img.big {
    width: 150px;
}
p.ex {
    height: 150px;
    width: 150px;
}
</style>
</head>
<body>
<img class="normal" src="good-morning.jpg" width="95" height="84"><br>
<img class="big" src="good-morning.jpg" width="95" height="84">
<p class="ex">The height and width of this paragraph is 150px.</p>
<p>This is a paragraph.</p>
</body>
</html>

输出:

CSS宽度width
CSS宽度width

本段的高度和宽度为150像素。

这是一段。


CSS宽度示例:宽度(%)

宽度百分比是包含块的度量单位。这非常适合图像。

<!DOCTYPE html>
<html>
<head>
<style>
img.normal {
    width: auto;
}
img.big {
    width: 50%;
}
img.small {
    width: 10%;
}
</style>
</head>
<body>
<img class="normal" src="good-morning.jpg" width="95" height="84"><br>
<img class="big" src="good-morning.jpg" width="95" height="84"><br>
<img class="small" src="good-morning.jpg" width="95" height="84">
</body>
</html>

输出:

CSS宽度width
CSS宽度width
CSS宽度width

注意:你也可以使用“最小宽度”和“最大宽度”属性来控制图像的大小。

赞(0) 打赏
未经允许不得转载:srcmini » CSS宽度width
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏