CSS 拾遗

1.元素内容，后代超出设置的长宽，可以用overflow处理 在父标签里面设置overflow:hidden，让子标签超出的内容隐藏。
2.设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
3.每个标签都是一个盒子
4.clear:left 不允许左边有浮动对象，就是不受浮动影响
5.float:left 当前块漂浮起来
6.相对定位，postion:relative left:10px 相对于原来位置
7.绝对定位，postion:absolute left:20px 相对于父辈的relative
8.z-index 数值越大 越上层
9.块级元素相对父元素居中，magin:0 auto; 元素要设置长度
10. log div->h1 text-indent:1000em 让搜索引擎搜索到
11.子标签飘起来后 ，父标签没有设置长宽，父标签则无法撑起来，通过父标签应用下面的样式，可以撑起来

    .clearfix:after{
        content:111;
        display:block;
        clear:both;
        visibility:hidden; 
        hight:0;
}

12. display:none 与 visibility:hidden;区别
　　前者不占高度，后者占高度

13.hover 使用
父标签感应，子标签响应
.touch:hover .content{
color: red;
}

14.hover 鼠标一上去 出现阴影覆盖

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .touch{
            width:200px ;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .touch:hover .content{
            visibility: visible;
            opacity: 0.6;
        }
        .content{
            position: absolute ;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #2459a2;
            text-align: center;
            line-height: 200px;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="touch">
        <div>
            <img src="image/homepage_download.png">
        </div>
        <div class="content">
            <div>666</div>
        </div>
    </div>
</body>

15.鼠标移上去，箭头变化

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .change{
            border-top: 10px solid gold;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
            display: inline-block;
            margin-top: 10px;
        }
        .change:hover{
            border: 10px solid transparent;
            border-bottom: 10px solid green;
            margin-top: 0px;
        }
        .box{
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="change"></div>
    </div>
</body>

 16.图标

　　1.来源于图片

　　2.来源于css

　　3.来源于 font-awesome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
    <div class="fa fa-amazon"></div>
</body>
</html>
View Code

 

17.！important

　　添加!important后，后面再次定义则无效,如果没有添加important 则应用bcd样式

　　.abc{

　　color:black !important

}

　　.bcd{

　　color:red

}

<div class='abc bcd'>666</div>

18.实例分析

　　1.后台页面布局

　　　　overflow:auto;

　　　　position:absolute;

　　2.提示框

　　　　边缘标签：relative,absolute

　　3.Tab

　　　　display:none

　　4.登陆

　　　　relative,absolute

　　　　padding

posted @ 2017-05-16 15:47  1916  阅读(106)  评论(0)    收藏  举报