CSS常用记录 - 爱码网

1、两个div在一行排列

<div>
    <div class="fl">左</div>
    <div class="fr">右</div>
</div>

.fl {float: left;}
.fr {float: right;}

2、设置版心，margin: 0 auto;上下外边距为0，左右自动，加上宽，则可以居中显示

.w { 
    width: 1190px;
    margin: 0 auto;
}

3、清除默认边距

* {
    margin: 0;
    padding: 0;
}

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,
input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0;
}

　　有默认边距的元素：body,ul,body,h1-h6... ...

4、ul去除前面的点，并且使元素横着排列

<ul>
    <li>aaaaa</li>
    <li>bbbbb</li>
    <li>ccccc</li>
    <li>ddddd</li>
</ul>

ul {
     list-style-type: none;
}
 
li{
   float: left;
}

5、去掉a标签的下划线

a {text-decoration: none;}

6、居中，文字在div中水平居中、竖直居中

<div>你好</div>

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: skyblue;           
}

　　水平居中：text-align: center。竖直居中：height与line-height设置一样

7、小竖线可以用li来代替，如下宽为1，高位10的竖线

.space {
    width: 1px;
    height: 10px;
    background-color: #cccccc;
    margin: 10px 12px;
}

8、点击图标跳转<a href="#"><img src=""></img></a>

9、相对定位（relative）与绝对定位（absolute）

　　父元素：relative

　　子元素：absolute

　　子元素的位置相对于父元素，而不是浏览器左上角，子元素不占用空间，仿佛浮动

<div class="p">父元素
    <div class="c">子元素</div>
</div>

.p {
    width: 300px;
    height: 200px;
    background-color: skyblue;
    position: relative;
}

.c {
    width: 100px;
    height: 100px;
    background-color: slateblue;
    position: absolute;
    bottom: 0;
    right: 0;
}
</style>

　　效果如图：

CSS常用记录

10、去掉点击input、button时默认出现的边框

input,button {
    border: 0;
    outline: none;/*去掉鼠标点击的边框*/
}

11、鼠标经过，改变背景色

ul li:hover {
    background-color: #5e5959;
}
ul a:hover {
    color: #e2231a;
}

12、透明度

rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

13、鼠标经过变成手的形状

cursor: pointer;

14、设置圆形:宽高一样、border-radius设置为50%

width: 300px;
height: 300px;
border-radius: 50%;

15、文字不换行、溢出部分隐藏、超出部分显示省略号

<div class="p">
    你好，123456789
</div>
.p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    white-space: nowrap; /*强制不换行*/
    overflow: hidden; /*溢出部分隐藏*/
    text-overflow: ellipsis; /*超出的部分显示省略号*/
}

CSS常用记录

16、使div居页面中间

<body>
  <div class="box"></div>
</body>
<style>
　　.box{
　　　　width: 100px;
　　　　height: 100px;
　　　　position: absolute;
　　　　top: 50%;
　　　　left: 50%;
　　　　transform: translate(-50%,-50%);
　　　　background-color: skyblue;
　　}
</style>

　　如果没有transform: translate(-50%,-50%);则只是让div的左上角居页面中间，translate属性分别是水平移动、垂直移动，负号是相反方向。

18、:nth-child、:nth-last-child选择器

.box :nth-child(1) {/*选择.box下第一个子元素*/
    background-color: yellow;
}
.box :nth-last-child(2) {/*选择.box下倒数第二个子元素*/
     background-color: yellow;
}

19、使a标签有宽度、文字居中，span标签换行。display: block 行元素转块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
  <div class="box">
    <a href="#">链接</a>
    <span>2</span>
  </div>
</body>
<style>
    .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: skyblue;
    }

    a {
        width: 100px;
        display: block;
        background-color: red;
        text-align: center;
    }

    span {
        display: block;
    }
</style>
</html>

View Code