最近做Vue前台相关的项目, 使用了一些前台CSS的知识, 作为笔记mark一下吧
1. 关于定位
**水平居中:**
文字(text-align: center;);
元素: (margin: 0px; auto)
**垂直居中:**
文字(line-height: 20px; height:20px;),
元素: (vertical-align: middle/sub;)
于父元素定位: 父元素 (position: relative;)
子元素(position: absolute; left/top..)
img居中显示: (height/width: 1px;position: relative;top: 50%;left: 50%;margin-top: -25px; /* 高度的一半 */margin-left: -25px; /* 宽度的一半 */)
2. 颜色
png/元素透明: (background-color: transparent;)
visibility:hidden; 则相当于完全从文档流中删除了该元素,但尺寸仍然保留。vue(v-show)/angularjs(n-show)
opacity:0; 则仅仅不可见,但仍可被浏览器发现,也就能触发各种事件
display: none; 元素被移除, 不被渲染; //在vue(v-if)/angularjs(n-if)
3. 伪元素:
背景
:before{
content: "";
position: absolute;
top: 0px;right: 0px;
width: 20px;height: 20px;
background: url(/img/pic.png) no-repeat;
}
3. 优先级
强制优先: left: auto !important; /*!important*/
4. CSS 事件
屏蔽鼠标事件: pointer-events: none;
拖拽事件: draggable:false;
hover事件: li:hover{cursor: pointer;}
5. 选择器
li:last-child; &:first-child; /*less 写法: &: 当前的元素*/
li:nth-child(n+6) {display: none;} /*隐藏第5以后的元素*/
li:nth-child(3n) {display: none;} /*隐藏3的倍数的元素*/
6. 其他
鼠标样式: cursor: pointer/default;
scroll样式:
/*scroll body*/
scrollBody{
overflow-y: scroll;
overflow-x: visible;
}
/*定义滚动条轨道 轨道背景*/
#class::-webkit-scrollbar-track
{
width: 10px;
background-color: #CCC;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景 滚动条整体部分*/
#class::-webkit-scrollbar
{
width: 10px;
background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条 下移动的滑块*/
#class::-webkit-scrollbar-thumb
{
background-color: #DBDBDB;
border-radius: 10px;
}
列出来整体例子
Html
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-6">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-7">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-8">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-9">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-10">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-11">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-13">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-14">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-15">
<div class="force-overflow"></div>
</div>
</div>
CSS
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info
{
font-size: 18px;
color: #555;