css常用的一些属性：
1.去掉下划线 ：text-decoration:none ;
2.加上下划线： text-decoration: underline;
3.调整文本和图片的位置（也就是设置元素的垂直对齐方式）：vertical-align:-20px;
没设置之前：
设置之后：
3.外边距：margin
4.内边距：padding
5.居中；margin 0 auto;(只是针对盒子居中)
6内联标签是不可以设置长宽的，有时候就得把内联标签变成块级标签或者块级内联标签，这就用到了display标签。。
1.将内联标签转换成块级标签：display:block;
2.将块级标签转换成内联标签：display:inline;
3.块级内联标签：display；inline-block;
块级内联标签可以像块级一样可设长宽，也可像内联一样在一行显示
6.隐藏的两个方法：display:none; #隐藏了会顶上去
visibility :hidden; #隐藏了不会顶上去
7.隐藏溢出的两个方法：overflow :auto;
overflow :scoll; #带滚动条
8.文本水平居中：text-align:center;
文本垂直居中：line-height;
9.伪类；
1.没访问之前： a:link{color:red;}
2.鼠标悬浮时： a:hover{color:green;}
3.访问过后： a:visited{color:yellow;}
4.鼠标点击时 a:active{color:blue;}
5.在p标签属性为c2的后面加上内容
p.c2:after{
content:‘hello‘;
color:red;
}
6.在p标签属性为c2的钱面加上内容
p.c2:before{
content:‘啦啦啦‘;
color:red;
}
10.position的四种属性
1.static：默认位置
2.fixed：完全脱离文档流，固定定位(以可视窗口为参照物)
3.relative:相对定位(参照的是自己本身的位置)，没有脱离文档流，没有顶上去，会保持自己的位置不动。可以使用top left进行定位
4.absolute:绝对定位：脱离了文档流（参照的是按已定位的父级标签定位，如果找不到会按body的去找）
注意！！：将定位标签设置为absolute，将他的父级标签设置为定位标签 （relative）
11.float和position的区别
float：半脱离文档流
position：全脱离文档流
12.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
//测试z-index<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.img1 { ?????????????position:absolute; ?????????????left:0; ?????????????top:0; ?????????????z-index:-10; ?????????????} ???????.img2 { ?????????????position:absolute; ?????????????left:0; ?????????????top:0; ?????????????z-index:-3; //越大越往前排，离你越近 ?????????????} ???????.img3 { ?????????????position:absolute; ?????????????left:0; ?????????????top:0; ?????????????z-index:-5; ?????????????} ???</style></head><body><div class="img3"><img src="作业/1.jpg" ></div><div class="img2"><img src="作业/2.jpg" ></div><div class="img1"><img src="作业/3.jpg" ></div></body></html>
13.透明度：opacity:0.4;
14.边框弧度：border-radius: 50%;
15.去除列表前面的标志：list-style:none;
16.对齐上面和左边最顶部：padding:0; margin:0;
17.字体加粗样式： font-weight: 900;
18.需要注意的几个逻辑表达式的问题，下面的这个和js的&&，||用法是一样的
print(3 and 5) #两个为真才为真
print(0 and 3) #0是假就不判断后面了，直接成假了
print(0 or 3) #有一个为真就为真
print(2 or 3) #2已经为真了那么就不会去判断后面了
//实现图片切换的效果<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????padding:0; ???????????margin: 0; ???????} ???????.outer{ ???????????width:790px; ???????????height: 340px; ???????????border: solid 1px red; ???????????margin: 0 auto; ???????????margin-top: 40px; ???????????position: relative; ???????} ???????ul{ ???????????list-style: none; ???????????position: absolute; ???????????top: 0; ???????????left:0; ???????} ???????.com{ ???????????position: absolute; ???????????display: none; ???????????/*visibility: hidden;*/ ???????} ???????.num{ ???????????position: absolute; ???????????top: 300px; ???????????left: 330px; ???????} ???????.num li{ ???????????display: inline-block; ???????????width: 20px; ???????????height: 20px; ???????????color: black; ???????????background-color: white; ???????????border-radius: 50%; //边框弧度 ???????????line-height: 20px; ???????????text-align: center; ???????} ???????.btn{ ???????????position: absolute; ???????????width: 40px; ???????????height: 60px; ???????????background-color: grey; ???????????opacity: 0.5; //透明度 ???????????color: black; ???????????font-weight: 900; ?//加粗 ???????????text-align: center; ???????????line-height: 60px; ???????????top:50%; ???????????margin-top: -30px; ???????} ???????.leftbtn{ ???????????left:0; ???????} ????????.rightbtn{ ????????????right:0; ???????} ???</style></head><body><div class="outer"> ???<ul class="img"> ???????<li><a href=""><img src="1.jpg" ></a></li> ???????<li class="com"><a href=""><img src="2.jpg" ></a></li> ???????<li class="com"><a href=""><img src="3.jpg" ></a></li> ???????<li class="com"><a href=""><img src="4.jpg" ></a></li> ???????<li class="com"><a href=""><img src="5.jpg" ></a></li> ???????<li class="com"><a href=""><img src="6.jpg" ></a></li> ???</ul> ???<ul class="num"> ???????<li></li> ???????<li></li> ???????<li></li> ???????<li></li> ???????<li></li> ???</ul> ???<div class="leftbtn btn"> < </div> ???<div class="rightbtn btn"> > </div></div></body></html>
//后台管理布局<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>后台管理布局</title> ???<style> ???????*{ ???????????margin: 0; ???????} ???????a{ ???????????text-decoration: none; ???????} ???????.header{ ???????????width: 100%; ???????????height: 44px; ???????????background-color: #2459a2; ???????} ???????.title li{ ???????????width: 100px; ???????????height: 80px; ???????????list-style: none; ???????????text-align: center; ???????????line-height: 80px; ???????????margin-top: 20px; ???????????padding: 50px; ???????????background-color: blue; ???????} ???????.leftmenu .title a{ ???????????font-size: 18px; ???????????color: white; ???????} ???????.leftmenu{ ???????????width: 300px; ???????????background-color: grey; ???????????position: fixed; ???????????top: 44px; ???????????left:0; ???????????bottom: 0; ???????} ???????.con{ ???????????position: fixed; ???????????top: 44px; ???????????left: 300px; ???????????right:0; ???????????bottom: 0; ???????????background-color: darksalmon; ???????????overflow: scroll; ???????} ???</style></head><body><div class="header"></div><div class="content"> ???<div class="leftmenu"> ???????<ul class="title"> ???????????<li><a href="">菜单一</a></li> ???????????<li><a href="">菜单二</a></li> ???????????<li><a href="">菜单三</a></li> ???????</ul> ???</div> ???<div class="con"> ???????<h1>hellp</h1> ???????<h1>hello</h1> ???????<h1>hello</h1> ???</div></div></body></html>
//遮盖层<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>遮罩层</title> ???<style> ???????.backgroup{ ???????????width: 100%; ???????????height: 2000px; ???????} ???????.zzc{ ???????????position: fixed; ???????????bottom: 0; ???????????top:0; ???????????left:0; ???????????right:0; ???????????background-color: grey; ???????????opacity: 0.4; ???????} ???</style></head><body><div class="backgroup"> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p> ???<p>haiyan</p></div><div class="zzc"></div></body></html>
web前端【补充】CSS补充
原文地址：https://www.cnblogs.com/xiaohema/p/8455449.html