DIV+CSS使用技巧

HTMLheadtitle测试/titlemeta charsetutf-8/meta http-equivexpirescontent0/meta http-equivCache-Controlcontentno-cache/CSSCSS变量使用css标识符--sass标识符:$ less标识符:变量只能用作属性值不能用作属性名。用var(变量名,默认值)来取。body{--bgcolor:#ff0000;--bgimgurl(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 classcontainer/div//ID选择器#container{}div idcontainer/div//内联样式div stylecolor:#ffffff/div动态更改//更改css样式内容document.body.style.cssTextbackground-imageurl${image_url};DIV1.常用position方式1.static默认定位2.relative相对定位3.absolute绝对定位宽度和高度必须设置具体值设置auto无效。宽度自适应left:0,right:04.fixed: 固定定位2.使用展示htmlbodydiv styleposition:absolute;z-index:1;left:0;top:0;width:100%;height:100%;background-color:#ff0000;text-align:right;图一/divdiv styleposition:absolute;z-index:3;left:0;top:0;width:200px;height:100px;background-color:#ffff00;text-align:right;图二/divdiv styleposition: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 classscrollstylewidth:200px;height:100px;overflow-y:scroll;/divTextAreatextarea{width:500px;height:200x;font-size:22px;color:#ffffff;background:transparent;//背景透明border:none;//无边框resize:none;//不可拖动}