css其他样式

Bianca427

已于 2022-06-24 15:02:48 修改

阅读量121

点赞数

文章标签： css 前端

于 2022-06-23 16:57:39 首次发布

原文链接：https://www.w3school.com.cn/h.asp

版权

1、text-align

2、line-height

3、box-size:border-box

1、text-align

属性指定元素文本的水平对齐方式。


h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

2、line-height

属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。

line-height - CSS（层叠样式表） | MDNline-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

3、box-size:border-box

就是将border和padding数值包含在width和height之内,这样的好处就是修改border和padding数值盒子的大小不变。

CSS3 框大小 | 菜鸟教程https://www.runoob.com/css3/css3-box-sizing.html

4、background-image

background-image:url(图片文件地址)

div{
				width: 500px;
				height: 300px;
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
				background-size: 400px;
			}

background-repeat: no-repeat;不平铺

5、transform

transform该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：transform: none|transform-functions;

transform：scale(x,y) xy轴缩放1.5倍：

.MyDIV{
    transform:scale(1.5,1.5);
}

scaleX(x) ：通过设置 X 轴的值来定义缩放转换。

scaleY(y) ：通过设置 Y 轴的值来定义缩放转换。

/*单独设置x轴缩放*/
#MyDIV{
    transform:scaleX(1.5);
}

/*单独设置y轴缩放*/
#MyDIV{
    transform:scaleY(1.5);
}

CSS transform 属性https://www.w3school.com.cn/cssref/pr_transform.asp

6、overflow

overflow 这个属性定义溢出元素内容区的内容会如何处理。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow: scroll 内容溢出以滚动条方式显示

<html>
<head>
<style type="text/css">
    div {background-color:#00FFFF;width:150px;height:150px;
        overflow: scroll;}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>

7、transition

transition过渡

语法：transition: s ;

2s内宽度从 100px 逐渐变为 300px

<!DOCTYPE html>
<html>
    <head>
        <style>
        div
        {width:100px;height:100px;background:blue;
        transition: 2s;}
        .div1{background: #9a6e3a}

        .div1:hover {width:300px;}
        /*2秒逐渐（缩放）放大1.5倍*/
        .div2:hover {transform:scale(1.5)}
        </style>
    </head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<p>请把鼠标指针移动到蓝色的div元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在InternetExplorer中无效。</p>
</body>
</html>

CSS transition 属性https://www.w3school.com.cn/cssref/pr_transition.asp

8、cursor

cursor：属性规定要显示的光标的类型（形状）。

<span style="cursor:pointer">pointer</span>

值	描述
pointer	光标呈现为指示链接的指针（一只手）
help	此光标指示可用的帮助（通常是一个问号或一个气球）。
wait	此光标指示程序正忙（通常是一只表或沙漏）。