码农教程 - 一技在手,衣食无忧! tools

目录

CSS width 属性

❮上一节 完整的CSS参考 下一节❯

示例

设置三个 <div> 元素的宽度：

div.a {
  width: auto;
  border: 1px solid black;
}

div.b {
  width: 150px;
  border: 1px solid black;
}

div.c {
  width: 50%;
  border: 1px solid black;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个width属性设置元素的宽度。

元素的宽度不包括内边距、边框或边距！

笔记：这个最小宽度和最大宽度属性覆盖width属性。

展示演示❯

默认值： 汽车
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS1
JavaScript 语法： 对象.style.width="500px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
width 1.0 4.0 1.0 1.0 3.5

CSS 语法

width: auto| value|initial|inherit;

属性值

Value Description Demo
auto Default value. The browser calculates the width Demo ❯
length Defines the width in px, cm, etc. Read about length units Demo ❯
% Defines the width in percent of the containing block Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

使用百分比值设置 <img> 元素的宽度：

img {
  width: 50%;
}
亲自试一试 »

示例

将 <input type="text"> 元素的宽度设置为 100px。然而，当它获得焦点时，将其宽度设置为 250px：

input[type=text] {
  width: 100px;
}

input[type=text]:focus {
  width: 250px;
}
亲自试一试 »

相关页面

CSS教程：CSS 高度和宽度

CSS教程：CSS 盒子模型

CSS 参考：高度属性

HTML DOM 参考：宽度属性


❮上一节 完整的CSS参考 下一节❯