前端笔记--css样式笔记

一、浮动定位布局

1、浮动布局

left 元素向左浮动

right 元素向右浮动

例如：设置2个按钮，要使得按钮在同一行位置摆放，可以使用浮动，令按钮浮动到右边。注意，先设置float的按钮，例如：a先设置float：right，b也设置float：right，那么a在b的右边，先设置float的位置在float的方向。

both：清除浮动

2、定位布局

position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

position:relative;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:relative;”使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始位置

position:absolute;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:absolute;”使得元素成为绝对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

3、常见的设置文本水平垂直居中

通常可通过设置line-height 和height 相同，然后设置text-aline：center实现。但如果居中在高度变化的时候也要跟着居中，则可以使用：box-pack和box-alin来设置。

box-pack属性可以在水平方向上对盒子的富余空间进行管理。

box-align属性可以在垂直方向上对盒子的富余空间进行管理。

例如：

div

        {

            width:200px;

            height:160px;

            display:-webkit-box;

            -webkit-box-align:center;

            -webkit-box-pack:center;

            background-color:pink;

        }

二、UI元素伪类选择器结构伪类选择器

结构伪类选择器:

常用：E:not（selector）选择某个元素之外的所有元素

举例：

*{padding:;margin:;}

        ul

        {

            display:inline-block;

            width:200px;

            list-style-type:none;

        }

        ul li

        {

            height:20px;

        }

        ul li:first-child{background-color:red;}

        ul li:nth-child(2){background-color:orange;}

        ul li:nth-child(3){background-color:yellow;}

        ul li:nth-child(4){background-color:green;}

        ul li:last-child{background-color:blue;}

UI元素伪类选择器：

举例：

<head>

    <title>CSS3 :focus选择器</title>

    <style type="text/css">

        input:focus

        {

            outline:1px solid red;

        }

    </style>

</head>

<body>

    <p><label for="name">姓名：</label><input type="text" name="name"/></p>

    <p><label for="email">邮箱：</label><input type="text" name="email"/></p>

</body>

</html>

::selection选择器”来改变被选择的网页文本的显示效果

<style type="text/css">

        div::selection

        {

            background-color:red;

            color:white;

        }

        p::selection

        {

            background-color:orange;

            color:white;

        }

    </style>

使用::before和::after这两个选择器在元素前面或后面添加内容

<style type="text/css">

        div::before

        {

            content:"学习学习";

        }

    </style>

三、文字和颜色渐变、边框

文字：

其中常见的是text-shadow文字阴影。

text-shadow:x-offset y-offset blur color; x-offset是x轴阴影，blur是模糊距离。

可以指定多个阴影：

 div

    {

            display:inline-block;

            padding:20px;

            font-size:40px;

            font-family:Verdana;

            font-weight:bold;

            background-color:#CCC;

            color:#ddd;

            text-shadow:-1px 0 #333, /*向左阴影*/

                         0 -1px #333,/*向上阴影*/

                         1px 0 #333, /*向右阴影*/

                         0 1px #333 ;/*向下阴影*/

     }

color:transparent; /*设置文字颜色为透明*/

颜色：

opacity:透明度

<head>

    <title>CSS3 opacity属性</title>

    <style type="text/css">

        a

        {

            display:inline-block;

            padding:5px 10px;

            font-family:微软雅黑;

            color:white;

            background-color:#45B823;

            border-radius:4px;

            cursor:pointer;

        }

        a:hover

        {

            opacity:0.8;

        }

    </style>

</head>

<body>

    <a>调试代码</a>

</body>

rgba(R,G,B,A)：A指的是透明度。

对于设置元素的透明度，RGBA比透明度opacity属性更好，因为RGBA不会影响元素中的内容以及子元素的不透明度

线性渐变 linear-gradient和径向渐t变radial-gradient

线性渐变

举例：

 <title>CSS3线性渐变</title>

    <style type="text/css">

        div

        {

            width:200px;

            height:150px;

            background:linear-gradient(to right,blue,yellow);

        }

    </style>

径向渐变：

举例：

#div1

        {

            margin-bottom:10px;

            background:-webkit-radial-gradient(orange,blue);

        }

        #div2

        {

            background:-webkit-radial-gradient(top,orange,blue);

        }

边框:最常见的border-radius

举例：

如果宽高都是100px的div，那么可以通过border-radius设置使得我们可以得到半圆或者正圆。其中规律：上右下左，设置2个值时，上下、左右

得到上半圆。

#div1

    {

        width:200px;

        height:100px;

        border:1px solid red;

        border-radius:100px 100px 0 0;

        background-color:#FCE9B8;

    }

四、背景大小、变形(transform) 过渡（transition）动画（animation）

背景大小：background-size取值共有2种，一种是使用长度值（如px、百分比）；另外一种是使用关键字。

举例：

<head>

    <title>CSS3 background-size属性</title>

    <style type="text/css">

        div

        {

           width:160px;

           height:100px;

           border:1px solid red;

           margin-bottom:10px;

           background-image:url("../App_images/lesson/run_css3/css3.png");

           background-repeat:no-repeat;

        }

        #div2{background-size:160px 100px;}

　　　#div3{background-size:cover}

        #div4{background-size:contain}

    </style>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

</body>

CSS动画效果共3部分：

其中变形注重结果，过渡注重过程，动画则和过渡类似也是以过程为主

变形：

使用举例：transform：translate()、transform:translateX(20px)、transform：scale(30deg)、

<head>

    <title>CSS3旋转rotate()方法</title>

    <style type="text/css">

        /*设置原始元素样式*/

        #origin

        {

            margin:100px auto;/*水平居中*/

            width:200px;

            height:100px;

            border:1px dashed gray;

        }

        /*设置当前元素样式*/

        #current

        {

            width:200px;

            height:100px;

            line-height:100px;

            color:white;

            background-color: #007BEE;

            text-align:center;

            transform:rotate(30deg);

            -webkit-transform:rotate(30deg);  /*兼容-webkit-引擎浏览器*/

            -moz-transform:rotate(30deg);     /*兼容-moz-引擎浏览器*/

        }

    </style>

</head>

<body>

    <div id="origin">

        <div id="current">顺时针旋转30度</div>

    </div>

</body>

过渡：

使用举例：

<head>

    <title>CSS3 transition-property属性</title>

    <style type="text/css">

        div

        {

            display:inline-block;

            width:100px;

            height:50px;

            background-color:#14C7F3;

            transition-property:height;

            transition-duration:0.5s ;

            transition-timing-function:linear;

            transition-delay:;

        }

        div:hover

        {

            height:100px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

其中：transition-property，指定要设置的属性名字，transition-duration，指定过渡的时间，transition-timiing-fuction，指定过渡的效果的方法，有linear，ease，等，transition-delay，指定延迟时间

动画：animation

使用动画有2个步骤：

（1）定义动画；
（2）调用动画；

定义动画：需使用@keyframes，其中百分比是定义过程，一般可以分为：0% 30% 60% 100%

@keyframes 动画名

{

    0%

    {

        ……

    }

    ……

    100%

    {

    }

}

举例使用：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>CSS3 animation-name属性</title>

    <style type="text/css">

        @-webkit-keyframes mycolor

        {

            0%{background-color:red;}

            30%{background-color:blue;}

            60%{background-color:yellow;}

            100%{background-color:green;}

        }

        @-webkit-keyframes mytransform

        {

            0%{border-radius:;}

            50%{border-radius:50px; -webkit-transform:translateX(0);}

            100%{border-radius:50px; -webkit-transform:translateX(50px);}

        }

        div

        {

            width:100px;

            height:100px;

            background-color:red;

        }

        div:hover

        {

            -webkit-animation-name:mytransform;

            -webkit-animation-duration:5s;

            -webkit-animation-timing-function:linear;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

上面定义了2个动画，实际只调用了一个动画mytransform，当0-50%时，border-radius从0到50px，当50%-100%时，border-radius保持50不变，然后translateX，水平向右移动50px。

代码举例：

#div1

        {

            width:40px;

            height:40px;

            border-radius:20px;

            background-color:red;

            -webkit-animation-name:mytranslate;

            -webkit-animation-timing-function:linear;

            -webkit-animation-duration:2s;

            -webkit-animation-iteration-count:infinite;

        }

　animation-name：调用的动画名，animation-timing-fuction：动画的方法，即改动画的效果是什么，方法有linear和ease等，animation-duration，动画从持续时间，animation-iteration-count，动画的执行次数，infinite表示无数次

animation-delay：动画延迟时间，animation-direation：动画执行放向，animation-play-state：动画执行状态，可以让动画停止和继续，animation-fill-mode：时间外属性，即动画执行完，停止在哪个位置。

五、多列布局和弹性盒子模型

弹性盒子模型：指的是设置某个属性后，使得div或者其他标签具备弹性盒子的效果

举例：

<head>

    <title>CSS3 box-orient属性</title>

    <style type="text/css">

        body

        {

            display:-webkit-box;    /*定义元素为盒子显示，注意书写*/

            -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/

        }

        div{height:100px;}

        #box1{background:red;}

        #box2{background:blue;}

        #box3{background:yellow;}

    </style>

</head>

<body>

    <div id="box1">盒子1</div>

    <div id="box2">盒子2</div>

    <div id="box3">盒子3</div>

</body>

上面定义了放向为横向，盒子1、2、3、分别从左到右排列。

box-direction属性取值：normal和reverse，正向显示，和反向显示

box-flex：取值为正数，如果总数是4，取值是1，那么div占盒子的四分之一