CSS宽度width CSSwidth|CSS2

本文概述

CSS宽度值
CSS宽度示例：像素宽度
CSS宽度示例：宽度（％）

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="http://www.srcmini.com/good-morning.jpg" width="95" height="84"> < br> < img class="big" src="http://www.srcmini.com/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>

输出：

文章图片

文章图片
本段的高度和宽度为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="http://www.srcmini.com/good-morning.jpg" width="95" height="84"> < br> < img class="big" src="http://www.srcmini.com/good-morning.jpg" width="95" height="84"> < br> < img class="small" src="http://www.srcmini.com/good-morning.jpg" width="95" height="84"> < /body> < /html>

【CSS宽度width】输出：