css3 长宽相等 |单行文字省略 css

css实现放大，css 精灵图用法，css怎么移动多少px，css样式不能实现，css中怎么获取屏幕大小，css中的页面width设置，单行文字省略 css css3 长宽相等 |单行文字省略 css

.square {
width: 100px; /* 设置宽度 */
height: 100px; /* 设置高度 */
}

上面这段代码可以实现一个宽高为 100 像素的方块。但是，如果想要这个方块的宽和高自动适应屏幕的大小，就需要使用 CSS3 中的另外一些属性。

.square {
width: 100%; /* 宽度自适应 */
padding-bottom: 100%; /* 高度为宽度的百分之一百 */
position: relative; /* 设置相对定位 */
}
.square:before {
content: ""; /* 空内容 */
display: block; /* 块级元素 */
float: left; /* 浮动 */
height: 0; /* 高度为 0 */
margin-top: -100%; /* 上边距为负的百分之一百 */
}
.square:after {
clear: both; /* 清除浮动 */
}

这段代码中，大家使用了 padding-bottom 与宽度相等的方法来实现宽高自适应。同时，还加上了伪元素 :before 实现等比缩放。这里的 -100% 是指该伪元素的上边距为负的百分之一百，也就是把它向上移动一个正方形的高度。

总的来说，CSS3 提供了很多实用的属性，帮助大家更加方便地实现页面效果。