CSS的应用下

样式继承：

就是父类的颜色如果变了，子类下的div（或者其他属性）会继承父类的。

参考代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            color: red;

        }

        p{

            color: green;

        }

        ul li a{

            color: RGB(200,122,111);

        }

    </style>

<body>

<div class="c1">

    DIV1

    <div class="c2">DIV2</div>

    <p>PPP</p>

    <a href="">click</a>

</div>

<ul>

    <li><a href="">11</a></li>

    <li><a href="">22</a></li>

    <li><a href="">2222</a></li>

    <li><a href="">222</a></li>

</ul>

</body>

</html>

line-height:高度

　　文本行高，通俗地讲，文字高度加上文字上下的空白区域的高度（基于字体的高度）50%等于总高度

verticle-align属性：

　　设置元素内容的垂直对其方式，只对行内元素有效，对块级元素无效。

当文字和图片同时存在一行时，是利用底线来对其的，这样的话会造成对不齐的现象。

这时候需要在修改img的属性，在style里边调整：

img{

　　vertical-align:middle;(这里的middle也可以改为其他对齐方式)

}

也可以调像素，改为多少px就行。

其他的一些属性：

text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行缩进150px

letter-spacing: 10px;  字母间距

word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

背景属性：

background-color（背景颜色）

background-image（背景图片）

background-repeat（填充方式：不填充，填充等）

background-position（定位位置）

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;（距离左边多少，距离上面多少）

简写

改变数字前面的标示符可以利用list-style:~~~;来改变

Display属性：可以把一个块级标签设置成内联标签

一共有这么几个属性：

none （常用，部分隐藏，部分显示，none的部分隐藏）

block（设置成块级，然后长宽高有效）

inline（设置成内联，设置的长宽高无效）

inline-block

css布局关键点：如何能够在一行显示多个可以调节长宽的元素。

一个标签即兼具了块级设备可以调长宽的属性，又具备了内联标签在一行显示的特性。

代码示例：

 <style>

        /*.c1{*/

            /*display: inline;*/

            /*width: 200px;*/

            /*height: 200px;*/

            /*background-color: green;*/

        /*}*/

        /*span{*/

            /*width: 200px;*/

            /*height: 200px;*/

            /*background-color: wheat;*/

            /*display: block;*/

        /*}*/

           .c1{

             width: 200px;

            height: 200px;

            background-color: wheat;

            display: inline-block;

           }

        .c2{

             width: 200px;

            height: 200px;

            background-color: goldenrod;

            display: inline-block;

           }

        .c3{

             width: 200px;

            height: 200px;

            background-color: green;

            display: inline-block;

           }

        span{

            margin-left: -4px;

        }

        .Myhide{

            display: none;

        }

     /*===========================*/

        .box{

            border:1px solid red;

        }

        .ico,.egon{

            display: inline-block;

        }

        .box:hover img{

            display: block;

        }

    </style>

</head>

<body>

<!--<div class="c1">DIV</div>-->

<!--<span>SPAN</span>-->

<span class="c1 Myhide"></span>

<span class="c2"></span>

<span class="c3"></span>

<div class="box">

    <div class="text">hkjfdashfkas</div>

    <div class="text">

        <div class="ico">???????????????</div>

        <div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div>

    </div>

</div>

</body>

图片一开始隐藏的，悬浮左边显示右边。

    <style>

   .box{

            border:1px solid red;

        }

        .ico,.egon{

            display: inline-block;

        }

        .box:hover img{

            display: block;

        }

    </style>

<div class="box">

    <div class="text">hkjfdashfkas</div>

    <div class="text">

        <div class="ico">???????????????</div>

        <div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div>

    </div>

</div>

清除浮动：

浮动元素上一个是浮动元素，紧贴着上一个。

上一个不是浮动元素，就在他的下面。

  <style>

        body{

            margin: ;

        }

        .c1{

            width: 100px;

            height: 170px;

            background-color: #53868B;

            float: left;

            clear: left;

        }

        .c2{

            width: 200px;

            height: 70px;

            background-color: cornflowerblue;

            float: left;

            clear: both;

        }

        .c3{

            width: 300px;

            height: 120px;

            background-color: darkmagenta;

            float: left;

        }

            .c4{

            width: 300px;

            height: 300px;

            background-color: green;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

<!--<div class="c4"></div>-->

</body>

clear: both;

clear: left;

clear: right;

Position定位：

position之fix定位：做一个一直在某个位置的按钮（例如返回顶部）

代码：

   <style>

        .c1{

            width: %;

            height: 2000px;

            background-color: wheat;

        }

        .returnTop{

              width: 120px;

            height: 40px;

            background-color: gray;

            color: white;

            text-align: center;

            line-height: 40px;

            position: fixed;

            right: 20px;

            bottom: 20px ;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="returnTop">返回顶部</div>

</body>

清除浮动的应用：

float父级塌陷：

设置的子级元素不跟父级一样，然后就会出现高度不一样的情况（或其他情况）。

  <style>

        *{

            margin: 0;

        }

        .header{

            width: 100%;

            /*height: 80px;*/

            background-color: #53868B;

        }

        .header .item1,.header .item2{

            width: 60px;

            height: 80px;

            background-color: goldenrod;

            float: left;

        }

        .item2{

            background-color: green!important;

        }

        .header .item3{

            width: 60px;

            height: 50px;

            background-color: goldenrod;

            float: right;

        }

        .content{

            width: 100%;

            height: 300px;

            background-color: darkmagenta;

        }

        .clearfix:after{

            content: "";

            display: block;

            clear: both;

        }

    </style>

</head>

<body>

<div class="header clearfix">

    <div class="item1"></div>

    <div class="item2"></div>

    <div class="item3"></div>

</div>

<div class="content"></div>

</body>

relative与absolute定位：

　　fixed：完全脱离文档流，参照物是可视窗口，可以设置top,left,right,bottom

　　relative:不脱离文档流，参照物是自己原本的位置，可以设置top,left,right,bottom

　　absolute：完全脱离文档流，参照物已定位的父级标签，可以设置top,left,right,bottom

一般，

　　（1）给某些元素进行定位，设置absolute；

　　（2）改定位标签的父元素设置定位；

    <style>

        body{

            margin: ;

        }

        .c1{

            width: 200px;

            height: 200px;

            background-color: #53868B;

        }

        .c2{

            width: 200px;

            height:200px;

            background-color: cornflowerblue;

            position: absolute;

            top:200px;

            left: 200px;

        }

        .c3{

            width: 200px;

            height: 200px;

            background-color: darkmagenta;

        }

        .box{

            position: relative;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="box"><div class="c2"></div></div>

<div class="c3"></div>

京东轮播图布局：