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 { 
     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 {
     200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: skyblue;           
}

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

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

.space {
     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 {
     300px;
    height: 200px;
    background-color: skyblue;
    position: relative;
}

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

　　效果如图：

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%

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

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

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

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

20、div与img之间有缝隙的问题

<!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">
    <img src="1.png" alt="">
  </div>
</body>
<style>
    .box {
        background-color: skyblue;
    }
</style>
</html>

View Code

/*去掉img与div间的缝隙*/
img {display: block;}
或
img {vertical-align: top;}

21、元素的两种隐藏方式

<!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>这是div</div>
  <span>这是span</span>
</body>
<style>
    div {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      display: none;/*隐藏方式一，不占据页面位置*/
      display: block;/*取消隐藏方式一*/
      visibility: hidden;/*隐藏方式二，占据页面位置*/
      visibility: visible;/*取消隐藏方式二*/
    }
    span {
      width: 100px;
      height: 50px;
      background-color: aqua;
    }
</style>
</html>

View Code

22、外边距合并

<!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 id="father">
    <div id="son"></div>
  </div>
</body>
<style>
    #father {
      width: 300px;
      height: 100px;
      background-color: skyblue;
    }
    #son {
      width: 200px;
      height: 50px;
      background-color: aqua;
      margin-top: 50px;
    }
</style>
</html>

View Code

　　整个外部div也向下移动了，并不是子div距离外边框移动，如下：

　　产生原因就是父div与子div的外边距合并了，所以都向下移动了，解决办法是给父div加边框

<!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 id="father">
    <div id="son"></div>
  </div>
</body>
<style>
    #father {
      width: 300px;
      height: 100px;
      background-color: skyblue;
      border: 1px solid skyblue;
    }
    #son {
      width: 200px;
      height: 50px;
      background-color: aqua;
      margin-top: 50px;
    }
</style>
</html>

View Code

23、使div不因增加了padding而增加宽高

box-sizing: border-box