css样式长宽 |css文本显示显示点

.box {
width: 200px; /* 像素单位 */
height: 50%;
border: 1px solid black;
}

在这个例子中，大家定义了一个类.box。该类的宽度为200像素，并且高度为父元素高度的50%。border属性则设置了元素的边框，使大家可以看到该元素的大小。

.container {
width: 100%;
}
.box {
width: 50%;
height: 100px;
margin: 0 auto;
}

在这个例子中，大家定义了一个类.container，该类的宽度为100%。这意味着该元素将占据其父元素的可用宽度。在.box类中，大家将宽度设置为50%，高度设置为100像素，并将元素水平居中。

除了像素和百分比外，大家还可以使用em、rem、vw和vh等其他单位来表示长宽。其中，em和rem是相对单位，可以让大家基于其他元素的大小来定义长宽。而vw和vh则是视窗单位，可以让大家根据视窗的大小来定义长宽。

.box {
width: 10rem;
height: 7vw;
}

在这个例子中，大家使用了rem和vw单位来定义长宽。这意味着该元素的宽度将是其他元素的10倍，而高度将是视窗高度的7%。

长宽属性是CSS中最常用的属性之一。通过使用像素、百分比以及其他单位，大家可以创建出各种各样的样式，并让网页元素具有不同的大小和形状。