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

来源：互联网发布：广数g90编程实例编辑：程序博客网时间：2024/06/05 02:34

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

①边框属性：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

5 0