DIV+CSS使用技巧

andy#wang

已于 2023-11-15 16:24:09 修改

阅读量236

点赞数

分类专栏： web 文章标签： css javascript 前端

于 2020-12-10 20:25:34 首次发布

本文链接：https://blog.csdn.net/wangwen_22/article/details/110197604

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML

head

	<title>测试</title>
	<meta charset="utf-8"/>
	<meta http-equiv='expires' content='0' />
	<meta http-equiv='Cache-Control' content='no-cache' />

CSS

CSS变量使用：

css标识符：-- 
sass标识符:$
less标识符:@

变量只能用作属性值，不能用作属性名。用var(变量名,默认值)来取。

	body{
		--bgcolor:#ff0000;
		--bgimg：url('1.png');
		--fontsize:30px;
		--fontsize2:30;
	}
	
	.a{
		background-color:var(--bgcolor);
		background-image:var(--bgimg);
		font-size:var(--fontsize);
		font-size:calc(var(--fontsize2)*1px);
	}

作用域优先级

内联样式 > class和ID选择器 > 元素类型

//元素类型
span {}
<span></span>

//class选择器
.container{}   
<div class="container"></div>

//ID选择器
#container{}  
<div id="container"></div>

//内联样式
<div style="color:#ffffff"></div>

动态更改

//更改css样式内容：
document.body.style.cssText + =`background-image：url（$ {image_url}）`;

DIV

1.常用position方式：
1.static：默认定位
2.relative：相对定位
3.absolute：绝对定位
宽度和高度必须设置具体值，设置auto无效。宽度自适应：left:0,right:0
4.fixed: 固定定位

2.使用展示：

<html>
<body>
	
		<div style="position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;background-color:#ff0000;text-align:right;">
			图一
		</div>
		<div style="position:absolute;z-index:3;left:0;top:0;width:200px;height:100px;background-color:#ffff00;text-align:right;">
			图二
		</div>
		<div style="position:fixed;z-index:2;left:0;top:0;width:300px;height:200px;background-color:#00ff00;text-align:right;">
			图三  fiexed
		</div>
</body>
</html>

在这里插入图片描述

常用标签

scroll
滚动条换皮肤，注意：并非所有浏览器，都支持自定义，比如Firefox。Chrome是支持的。

.scroll::-webkit-scrollbar-track {
	background: url('help/track.png') no-repeat center;
}
.scroll::-webkit-scrollbar {
    width: 28px;
}
.scroll::-webkit-scrollbar-thumb {
    background: url('help/thumb.png') no-repeat center;
    border-radius: 50%;
}

<div class="scroll" style="width:200px;height:100px;overflow-y:scroll;">
</div>

在这里插入图片描述

TextArea

textarea{
width:500px;height:200x;font-size:22px;color:#ffffff;
background:transparent;//背景透明
border:none;//无边框
resize: none;//不可拖动
}

andy#wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录