关于CSS常用用法(持续更新)

本文纯属个人笔记，如有错误谢谢指出！

①边框属性：border-bottom: 1px solid #D8D8D8;

②div内元素水平居中：margin: 0 auto;

③文字垂直居中：line-height: 26px;  (前提：行高为26px,可配合无序列表使用)

④不换行块级元素：display: inline-block;   

⑤块级元素居中：vertical-align: middle;(设置④后使用可居中)

⑥增加右内边距：padding-right: 10px;   (右边元素偏移、产生距离) 其中padding:1px 1px 1px 1px; (顺时针转 上->右->下->左)

⑦去除超链接下划线：text-decoration: none;

⑧去除li前圆点：list-style:none;

⑨浮动div：float: left;  (常用)

⑩元素堆叠次序：z-index:-1; (仅能在定为元素下使用)

img {
position:absolute;
left:100px;
top:0px;
z-index:-2;
}

①①清除边框自带1.8px并重设：

border: none;  /*mark-去除边框自带2px  同时需要将width与height相应 -2px*/

border:1px solid #C9C9C9;

①②文字置后,seo优化：text-indent: -1000em;     /*mark-将文字滞后，用于seo优化--->将div换成h1并在其中写文字<h1>我被隐藏了</h1>*/

①③鼠标悬浮触发：xxx:hover;

.nav ul li:hover {
background: #0266A3;
}
.nav ul li:hover a{
color: white;
}

①④隐藏溢出(如图片溢出)：overflow:hidden;

①⑤让一个div在另一个div中居中

<div><div style="margin-left:auto; margin-right:auto;"></div></div>

①⑥清除浮动

.clearfix::before,
.clearfix::after{
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;  /*！！清除两边*/
}

①⑦防止边框超出百分比溢出，以边框作为边界一部分

分析：即如果不设置，我设置了宽度为80px,在设置边框就会造成整个块为80px+边宽度，设置后就依旧是80px

box-sizing: border-box;
-webkit-box-sizing: border-box;

①⑧box-shadow突出层次感

box-shadow: 0 2px 3px rgba(0,0,0,0.15);

效果对比如下：


<有加---------没加>


①⑨透明遮盖层实现，能看不能动

background-color:#000;opacity:0.01;text-align:center

②⑩相对定位与绝对定位的联合使用

<div style="border:1px solid #000;position:relative">
<div style="position: absolute;top: 10px;left: 50px">
<div>标题</div>
<div>评论内容！！！！！</div>
</div>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #000;z-index:-1"></canvas>
</div>

注：如果最上层div不加position:relavite;则下一层div会相对于 window位置
②①悬浮突出效果

效果图：http://y.dobit.top/upload/demo/20150718202131228515/scale.html