CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

时间：2022-09-23 19:00:51

web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

一、CSS3概要

CSS（Cascading Style Sheet）是层叠样式表的意思，CSS3就是在CSS2.1的基础上升级的CSS新版本，属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

1.1、特点

1.2、效果演示

纯CSS3画出小黄人并实现动画效果

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

HTML页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>drawLittleHuang</title>

    <link rel="stylesheet" type="text/css" href="drawLittleHuang.css">

</head>

<body>

    <div class="wrapper"><!-- 容器 -->

        <div class="littleH"><!-- 小黄人 -->

            <div class="bodyH"><!-- 身体 -->

                <div class="trousers"><!-- 裤子 -->

                    <div class="condoleBelt"><!-- 吊带 -->

                        <div class="left"></div>

                        <div class="right"></div>

                    </div>

                    <div class="trousers_top"></div><!-- 裤子突出的矩形部分 -->

                    <div class="pocket"></div><!-- 裤袋 -->

                    <!-- 三条线 -->

                    <span class="line_left"></span>

                    <span class="line_right"></span>

                    <span class="line_bottom"></span>

                </div>

            </div>

            <div class="hair"><!-- 头发 -->

                <span class="left_hair_one"></span>

                <span class="left_hair_two"></span>

            </div>

            <div class="eyes"><!-- 眼睛 -->

                <div class="leftEye"><!-- 左眼 -->

                    <div class="left_blackEye">

                        <div class="left_white"></div>

                    </div>

                </div>

                <div class="rightEye"><!-- 右眼 -->

                    <div class="right_blackEye">

                        <div class="right_white"></div>

                    </div>

                </div>

            </div>

            <div class="mouse"><!-- 嘴巴 -->

                <div class="mouse_shape"></div>

            </div>

            <div class="hands"><!-- 双手 -->

                <div class="leftHand"></div>

                <div class="rightHand"></div>

            </div>

            <div class="feet"><!-- 双脚 -->

                <div class="left_foot"></div>

                <div class="right_foot"></div>

            </div>

            <div class="groundShadow"></div><!-- 脚底阴影 -->

        </div>

    </div>

</body>

</html>

CSS样式：

@charset "utf-8";

body{

    margin:;

    padding:;

}

.wrapper{

    width: 300px;

    margin:100px auto;

}

.litteH{

    position: relative;

}

.bodyH{

    position: absolute;

    width: 240px;

    height: 400px;

    border:5px solid #000;

    border-radius: 115px;

    background: rgb(249,217,70);

    overflow: hidden;

    z-index:;

}

.bodyH .condoleBelt{

    position: absolute;

}

.bodyH .condoleBelt .left,

.bodyH .condoleBelt .right{

    width: 100px;

    height: 16px;

    border:5px solid #000;

    background: rgb(32,116,160);

    position: absolute;

    top:-90px;

    left:-35px;

    z-index:;

    -webkit-transform:rotate(45deg);

}

.bodyH .condoleBelt .left{

    top:-88px;

    left:165px;

    -webkit-transform:rotate(-45deg);

}

.bodyH .condoleBelt .left:after,

.bodyH .condoleBelt .right:after{

    content: '';

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #000;

    position: absolute;

    top:4px;

    left:88px;

}

.bodyH .condoleBelt .left:after{

    left:5px;

}

.bodyH .trousers{

    position: absolute;

    bottom:;

    width: 100%;

    height: 100px;

    border-top: 6px solid #000;

    background: rgb(32,116,160);

}

.trousers_top{

    width: 160px;

    height: 60px;

    border:6px solid #000;

    border-bottom: none;

    border-radius: 0 0 5px 5px;

    background: rgb(32,116,160);

    position: absolute;

    bottom: 100px;

    left:34px;

}

.pocket{

    width: 60px;

    height: 45px;

    border:6px solid #000;

    border-radius: 0px 0px 25px 25px;

    position: absolute;

    bottom:65px;

    left:84px;

}

.line_right{

    width: 30px;

    height: 30px;

    border-bottom-left-radius: 100px;

    border-bottom:6px solid #000;

    border-left:6px solid #000;

    position: absolute;

    left:;

    bottom:60px;

    -webkit-transform:rotate(-75deg);

}

.line_left{

    width: 30px;

    height: 30px;

    border-bottom-right-radius: 100px;

    border-bottom:6px solid #000;

    border-right:6px solid #000;

    position: absolute;

    right:;

    bottom:63px;

    -webkit-transform:rotate(75deg);

}

.line_bottom{

    height: 40px;

    border:3px solid #000;

    border-radius: 3px;

    position: absolute;

    left:118px;

    bottom: 0px;

}

.hair{

    position: relative;

}

.left_hair_one{

    width: 130px;

    height: 100px;

    border-radius: 50%;

    border-top:8px solid #000;

    position: absolute;

    left:17px;

    top:-17px;

    -webkit-transform:rotate(27deg);

    -webkit-animation: lefthair 2s ease-in-out infinite;

}

@-webkit-keyframes lefthair{

    0%,25%,31%,100%{

    }

    30%{

        -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);

    }

}

.left_hair_two{

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border-top:6px solid #000;

    position: absolute;

    left:45px;

    top:-10px;

    -webkit-transform:rotate(15deg);

}

.eyes{

    position: relative;

    z-index:;

}

.eyes .leftEye,.eyes .rightEye{

    width: 85px;

    height: 85px;

    border-radius: 50%;

    border:6px solid #000;

    background: #fff;

    position: absolute;

    top:60px;

    left: 27px;

}

.eyes .leftEye{

    left: 124px;

}

.eyes .leftEye .left_blackEye,

.eyes .rightEye .right_blackEye{

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #000;

    position: absolute;

    top:24px;

    left:22px;

    -webkit-animation: blackeye 5s ease-in infinite;

}

@-webkit-keyframes blackeye{

    0%,20%,50%,70%,100%{

        -webkit-transform: translateX(0px);

    }

    30%,40%{

        -webkit-transform: translateX(15px);

    }

    80%,90%{

        -webkit-transform: translateX(-15px);

    }

}

.eyes .leftEye .left_blackEye .left_white,

.eyes .rightEye .right_blackEye .right_white{

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #fff;

    position: absolute;

    top:7px;

    left:17px;

    -webkit-animation: whiteeye 5s ease-in-out infinite;

}

@-webkit-keyframes whiteeye{

    0%,20%,50%,70%,100%{

        -webkit-transform: translateX(0px);

    }

    30%,40%{

        -webkit-transform: translate3d(3px,4px,0);

    }

    80%,90%{

        -webkit-transform: translate3d(-15px,4px,0);

    }

}

.eyes .leftEye .left_blackEye .left_white{

    top:4px;

    left:17px;

}

.eyes .leftEye:after,

.eyes .rightEye:after{

    content: '';

    width: 28px;

    height: 18px;

    background: #000;

    position: absolute;

    left:-30px;

    top:37px;

    -webkit-transform:skewX(20deg) rotate(7deg);

}

.eyes .leftEye:after{

    left:89px;

    top:37px;

    -webkit-transform:skewX(-20deg) rotate(-7deg);

}

.mouse{

    position: relative;

}

.mouse .mouse_shape{

    width: 55px;

    height: 35px;

    border:5px solid #000;

    border-bottom-left-radius: 30px;

    background: #fff;

    position: absolute;

    top:175px;

    left:98px;

    z-index:;

    -webkit-transform:rotate(-35deg);

    -webkit-animation: mouse 5s ease-in-out infinite;

}

@-webkit-keyframes mouse{

    40%,43%{

        width: 45px;

        height: 25px;

        top:180px;

    }

    0%,35%,48%,100%{

        width: 55px;

        height: 35px;

        top:175px;

        -webkit-transform:rotate(-35deg);

    }

}

.mouse .mouse_shape:after{

    content: '';

    width: 70px;

    height: 32px;

    border-bottom:5px solid #000;

    border-radius:35px 26px 5px 5px;

    background: rgb(249,217,70);

    position: absolute;

    top:-16px;

    left:3px;

    -webkit-transform:rotate(34deg);

    -webkit-animation: mouse_mask 5s ease-in-out infinite;

}

@-webkit-keyframes mouse_mask{

    40%,43%{

        width: 60.5px;

        top:-19.3px;

        left:1.5px;

    }

    0%,35%,48%,100%{

        width: 70px;

        top:-16px;

        left:3px;

        -webkit-transform:rotate(33deg);

    }

}

.hands{

    position: relative;

}

.hands .leftHand,

.hands .rightHand{

    width: 80px;

    height: 80px;

    border:6px solid #000;

    border-radius: 25px;

    background: rgb(249,217,70);

    position: absolute;

    top:220px;

    left:-23px;

    -webkit-transform:rotate(40deg);

    -webkit-animation:rightHand .8s ease-in-out infinite;

}

@-webkit-keyframes rightHand{

    0%,50%,100%{

        -webkit-transform: rotate(40deg);

    }

    30%{

        -webkit-transform: rotate(37deg) translateX(1px);

    }

}

.hands .leftHand{

    left:182px;

    top:220px;

    -webkit-transform:rotate(-40deg);

    -webkit-animation:leftHand .8s ease-in-out infinite;

}

@-webkit-keyframes leftHand{

    0%,50%,100%{

        -webkit-transform: rotate(-40deg);

    }

    80%{

        -webkit-transform: rotate(-37deg) translateX(-1px);

    }

}

.hands .leftHand:after,

.hands .rightHand:after{

    content: '';

    width: 6px;

    border:3px solid #000;

    border-radius: 3px;

    position: absolute;

    left:13px;

    top:50px;

    -webkit-transform:rotate(90deg);

}

.hands .leftHand:after{

    left:53px;

    top:50px;

    -webkit-transform:rotate(-90deg);

}

.feet{

    position: relative;

}

.feet .left_foot,

.feet .right_foot{

    width: 36px;

    height: 50px;

    border-bottom-right-radius: 6px;

    border-bottom-left-radius: 9px;

    background: #000;

    position: absolute;

    top: 406px;

    left:88px;

    -webkit-transform-origin: right top;

    -webkit-animation: rightfoot .8s ease-in-out infinite;

}

@-webkit-keyframes rightfoot{

    0%,50%,100%{

        -webkit-transform: rotate(0deg);

    }

    80%{

        -webkit-transform: rotate(10deg);

    }

}

.feet .left_foot{

    border-bottom-right-radius: 9px;

    border-bottom-left-radius: 6px;

    left:130px;

    -webkit-transform-origin: left top;

    -webkit-animation: leftfoot .8s ease-in-out infinite;

}

@-webkit-keyframes leftfoot{

    0%,50%,100%{

        -webkit-transform: rotate(0deg);

    }

    30%{

        -webkit-transform: rotate(-10deg);

    }

}

.feet .left_foot:after,

.feet .right_foot:after{

    content: '';

    width: 60px;

    height: 35px;

    border-radius: 20px 10px 21px 15px;

    background: #000;

    position: absolute;

    left:-36px;

    top:14.4px;

    -webkit-transform:rotate(5deg);

}

.feet .left_foot:after{

    border-radius: 10px 20px 15px 21px;

    left:13px;

    -webkit-transform:rotate(-5deg);

}

.groundShadow{

    width: 200px;

    height: 2px;

    border-radius: 50%;

    background: rgba(0,0,0,0.3);

    box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);

    position: relative;

    top: 455px;

    left:25px;

}

相册演示的代码可以在示例中下载到。

1.3、帮助文档与学习

权威的帮助文档是最好的学习资料，CSS2的帮助，非常详细：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3的帮助文档：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

如果打开时右边全是空白，请右键->"属性"—>“解除锁定”

点击下载帮助文档，上课示例的“文档”文件夹中也包含了两个关键的CSS文档

二、选择器

在使用CSS时我们首先要做的事情是找到元素，在写相应的样式，在CSS2.1中最常使用的是三种选择器：

a)、ID选择器：以#开始，引用时使用id，如id="div1"

#div1

{

   color:red;

}

b)、类选择器：以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"

.cls1

{

   background-color:#99ccff;

}

优先级不以cls1 cls2 cls3在class中出现的顺序判断，而是以定义时的先后，就近原则。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <style type="text/css">

            .red {

                color: red;

            }

            .green {

                color: green;

            }

            .blue {

                color: blue;

            }

        </style>

        <h2 class="red blue green">Hello CSS3!</h2>

    </body>

</html>

结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

c)、标签选择器：以标签名称开始，如p,span,div,*

div span

{

   font-size:14px;

}

当然还有如伪类选择，a:hover，a:link，a:visted，a:active。

在CSS3中新增了很多的选择器，如果大家会jQuery，jQuery中多数选择器在CSS3中都可以直接使用。

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 <input> 元素。 3
:disabled input:disabled 选择每个禁用的 <input> 元素 3
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3

1.1、基础的选择器

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

红色字体中选择器的区别是：p.info的意思是p元素中必须有class="info"属性将被选择，p .info是选择后代元素，示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>选择器</title>

        <style type="text/css">

            p.info{

                color: red;

            }

            p .info{

                color: blue;

            }

        </style>

    </head>

    <body>

        <h2>选择器</h2>

        <p class="info">p1</p>

        <p>

                <span class="info">span1</span>

                <p>p3</p>

        </p>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

1.2、组合选择器

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>组合选择器</title>

        <style type="text/css">

             #div1 span

             {

                 color: red;

             }

        </style>

    </head>

    <body>

        <h2>组合选择器</h2>

        <div id="div1">

            <span>span1</span>

            <div id="div2">

                <span>span2</span>

            </div>

        </div>

        <span>span3</span>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>组合选择器</title>

        <style type="text/css">

             #div1 > span

             {

                 color: red;

             }

        </style>

    </head>

    <body>

        <h2>组合选择器</h2>

        <div id="div1">

            <span>span1</span>

            <div id="div2">

                <span>span2</span>

            </div>

        </div>

        <span>span3</span>

    </body>

</html>

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>组合选择器</title>

        <style type="text/css">

             #div1 + span

             {

                 color: red;

             }

        </style>

    </head>

    <body>

        <h2>组合选择器</h2>

        <div id="div1">

            <span>span1</span>

            <div id="div2">

                <span>span2</span>

            </div>

        </div>

        <span>span3</span>

        <span>span4</span>

    </body>

</html>

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

1.3、属性选择器

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>属性选择器</title>

        <style type="text/css">

            div[id][class~=cls1] {

                background: lightgreen;

            }

        </style>

    </head>

    <body>

        <h2>组合选择器</h2>

        <span>span0</span>

        <div id="div1" class="cls1">

            div1

        </div>

        <div id="div2" class="cls1 cls2">

            div2

        </div>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

1.4、伪类

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>伪类</title>

        <style type="text/css">

           td:first-child

           {

                 background: lightcoral;

           }

        </style>

    </head>

    <body>

        <h2>组合选择器</h2>

        <table border="1" width="100%">

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

        </table>

        <hr />

        <table border="1" width="100%">

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

            </tr>

        </table>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

练习：实现隔行换色，当鼠标悬停在每一行上时高亮显示为黄色，按下时高亮红色。

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

        <style type="text/css">

           tr:nth-child(2n+1){

                background:lightblue;

           }

           tr:hover{

               background: yellow;

           }

           tr:active{

               background: orangered;

           }

        </style>

1.5、伪元素

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

标准的伪元素应该使用::，但单:也行，只是为了兼容。

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>伪类</title>

        <style type="text/css">

            a::before {

                content: "网站";

                display: inline-block;

                background: red;

                color: white;

            }

        </style>

    </head>

    <body>

        <h2>伪元素</h2>

        <a href="http://www.baidu.com">百度</a>

        <a href="http://best.cnblogs.com">博客园</a>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

content的特殊值

none：不生成任何内容
attr：插入标签属性值

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>伪元素</title>

        <style type="text/css">

            a:before {

                content: attr(title);

            }

            a:after {

                content: attr(href);

            }

        </style>

    </head>

    <body>

        <h2>我喜欢的网站</h2>

        <a href="http://www.cnblogs.com" title="技术">博客园</a>

        <a href="http://www.baidu.com" title="国内">百度</a>

        <a href="http://www.google.com" title="国外">谷歌</a>

    </body>

</html>

结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

url：使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>伪元素</title>

        <style type="text/css">

            a:before {

                content: url(../img/success.png);

            }

            a:after {

                content: url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png);

            }

        </style>

    </head>

    <body>

        <h2>我喜欢的网站</h2>

        <a href="http://www.cnblogs.com" title="技术">博客园</a>

        <a href="http://www.baidu.com" title="国内">百度</a>

        <a href="http://www.google.com" title="国外">谷歌</a>

    </body>

</html>

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

string：插入字符串

插入的伪元素可以作为一个元素使用，元素是被插入在指定元素内部，是父子关系：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>伪元素</title>

        <style type="text/css">

            #div1{

                background: red;

            }

            #div1:before {

                content: " ";

                display: block;

                background: lightgreen;

                border-radius: 50px;

                width: 100px;

                height: 100px;

            }

        </style>

    </head>

    <body>

        <h2>我喜欢的网站</h2>

        <div id="div1">

            Div1

        </div>

    </body>

</html>

结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

三、特殊性（优先级）

a)、同类型，同级别的样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
d)、具体 > 泛化的，特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

内嵌样式：内嵌在元素中，<span style="color:red">span</span>

内部样式表：在页面中的样式，写在<style></style>中的样式

外联样式表：单独存在一个css文件中，通过link引入或import导入的样式
f)、!important 权重最高，比 inline style 还要高

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>优先级</title>

        <style type="text/css">

            * {

                color: yellow;

            }

            p {

                color: red !important;

            }

            .cls1 {

                color: deeppink;

            }

            .cls2{

                color: blueviolet;

            }

            #p1{

                color:blue;

            }

        </style>

    </head>

    <body>

        <div>

            <p id="p1" class="cls2 cls1" style="color:#ccc">p1</p>

            <span>span1</span>

        </div>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

3.2、计算特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法：
CSS样式选择器分为4个等级，a、b、c、d
1.如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0
2.b为ID选择器的总数 0,1,0,0
3.c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0

4.d为标签、伪元素选择器的数量 0,0,0,1

5.!important 权重最高，比 inline style 还要高

比如结果为：1093比1100，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>优先级</title>

        <style type="text/css">

            html body #div1

            {

                background: red;

            }

            .cls1 #div1{

                background: blue;

            }

        </style>

    </head>

    <body>

        <div class="cls1">

            <div id="div1">div1

            </div>

            <div id="div2">div2

            </div>

        </div>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

因为html body #div1的特殊性值为：0102，而.cls1 #div1的特殊性值为0110，后者胜出。

四、刻度

在CSS中刻度是用于设置元素尺寸的单位。

特殊值0可以省略单位。例如：margin:0px可以写成margin:0
一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

4.1、绝对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

4.1.1、动态计算长度值

calc() = calc(四则运算)
用于动态计算长度值。
  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • calc()函数使用标准的数学运算优先级规则；

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #container{

                background: yellow;

                width: calc(100% - 40px);

                margin: 0 auto;

                height: 400px;

            }

        </style>

    </head>

    <body>

        <div id="container">

        </div>

    </body>

</html>

结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

4.2、文本相对长度单位

em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }

浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>em与rem</title>

        <style type="text/css">

            #div2{

                background: blue;

                height: 5em;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <div id="div2">

                Hello em

            </div>

        </div>

    </body>

</html>

结果：CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

div2的高度为80px，是因为user agent stylesheet默认样式中字体大小为16px，按照这个规则我们可以手动修改字体大小，div2的高度将发生变化。

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>em与rem</title>

        <style type="text/css">

            #div1 {

                font-size: 20px;

            }

            #div2 {

                color: white;

                background: blue;

                height: 5em;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <div id="div2">

                Hello em

            </div>

        </div>

    </body>

</html>

结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

rem

rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>em与rem</title>

        <style type="text/css">

            #div1 {

                font-size: 20px;

            }

            #div2 {

                color: white;

                background: blue;

                height: 5rem;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <div id="div2">

                Hello em

            </div>

        </div>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>em与rem</title>

        <style type="text/css">

            html {

                font-size: 10px;

            }

            body {

                font-size: 16px;

            }

            #div1 {

                font-size: 20px;

            }

            #div2 {

                color: white;

                background: blue;

                height: 5rem;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <div id="div2">

                Hello em

            </div>

        </div>

    </body>

</html>

结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

按理说高度为5*10px=50像素高度，但这里为60，是因为chrome浏览器限制了最小字体大小为12px，从上图可以看出。

4.3、Web App与Rem

为了实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的tmall就使用这种办法，示例如下：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例一：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>rem phone test</title>

        <!--

            描述：视口

        -->

        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <style>

            html {

                height: 100%;

                width: 100%;

                font-family: 'Heiti SC', 'Microsoft YaHei';

                font-size: 20px;

                overflow: hidden;

                outline: 0;

                -webkit-text-size-adjust: none;

                -moz-text-size-adjust: none;

                -ms-text-size-adjust: none;

            }

            body {

                height: 100%;

                margin: 0;

                overflow: hidden;

                -webkit-user-select: none;

                /*取消用户选择*/

                width: 100%;

            }

            header,

            footer {

                width: 100%;

                line-height: 1.5rem;

                font-size: 1rem;

                color: #000;

                border: 1px solid #ccc;

                text-align: center;

                background-color: #ccc;

            }

            .bd {

                margin-top: 1rem;

                margin-bottom: .5rem;

                margin-right: -.5rem;

                font-size: 0;

            }

            .bd:after {

                clear: both;

            }

            .box {

                width: 5rem;

                height: 5rem;

                display: inline-block;

                margin-right: .5rem;

                margin-bottom: .5rem;

            }

            .blue-box {

                background-color: #06c;

            }

            .org-box {

                background-color: #1fc195;

            }

        </style>

    </head>

    <body>

        <header>我是头部</header>

        <div class="bd">

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

            <div class="box blue-box"></div>

            <div class="box org-box"></div>

        </div>

        <footer>我是页脚</footer>

        <script>

           /*

           ;(function(win){

              win.alert("Hello IIEF");

           })(window);

           */

             //定义一个方法并执行

            (function(doc, win) {

                //获得文档的根节点html

                var docEl = doc.documentElement;

                //如果window中存在orientationchange对象，则取orientationchange,否则取resize

                //为了事件绑定

                resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';

                //定义一个方法，重新计算font-size大小

                var recalc = function() {

                    //页面的宽度

                    var clientWidth = docEl.clientWidth;

                    //如果没有宽度则退出

                    if (!clientWidth) return;

                    //重新计算font-size大小，假定320的宽度时字体大小为20;，当页面变化时重新设置字体大小

                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

                };

                //如果浏览器不支持添加事件监听则结束

                if (!doc.addEventListener) return;

                //添加事件监听，指定事件处理函数的时期或阶段(boolean)true表示在捕获事件执行，false表示冒泡时执行

                win.addEventListener(resizeEvt, recalc, false);

                //当Dom树加载完成时执行计算，DOMContentLoaded事件要在window.onload之前执行

                doc.addEventListener('DOMContentLoaded', recalc, false);

            })(document, window);

        </script>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

参考代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>rem phone test</title>

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <style>

        *

        {

            margin: 0;

            padding: 0;

            font-family: "Microsoft YaHei";

            color: white;

        }

        html{

            font-size:62px;

            width: 100%;

        }

        .bd{

            font-size: 0;

            overflow: hidden;

            position: absolute;

            top: 1.5rem;

            padding-bottom: 1rem;

        }

        .box{

            width:5rem;

            height: 5rem;

            background: dodgerblue;

            display: inline-block;

            font-size: 0;

            margin-right: .5rem;

            margin-bottom: .5rem;

        }

        body .box:nth-child(3n){

            margin-right: 0;

        }

        header,footer{

            text-align: center;

            height: 1rem;

            line-height: 1rem;

            background: #1fc195;

            position: fixed;

            width: 100%;

            font-size: .6rem;

            z-index: 999;

        }

        footer{

            bottom: 0;

        }

    </style>

</head>

<body>

<header>我是头部</header>

<div class="bd">

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

    <div class="box blue-box"></div>

    <div class="box org-box"></div>

</div>

<footer>我是页脚</footer>

<script>

    function resetFontSize() {

        var w = document.documentElement.clientWidth;

        document.documentElement.style.fontSize = w / (320 / 20) + "px";

    }

    window.onresize=function() {

        resetFontSize();

    }

    resetFontSize();

</script>

</body>

</html>

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

示例二：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>web app 与rem</title>

        <style type="text/css">

            html {

                font-size: 20px;

            }

            body {

                font-size: 16px;

            }

            #div2 {

                color: white;

                background: blue;

                height: 3rem;

                width: 3rem;

                font-size: .7rem;

            }

        </style>

    </head>

    <body>

        <div id="div2">

            Hello rem

        </div>

        <script type="text/javascript">

            function resize() {

                var w = document.documentElement.clientWidth;

                document.documentElement.style.fontSize = w * 20 / 290 + "px";

            }

            window.onresize =resize;

            resize();

        </script>

    </body>

</html>

运行结果：

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

变屏幕变宽时元素大小也随之发生变化，但这里并没有考虑高度，但为响应式布局与hack提供了思路。

4.4、vh、vw

有点像width和height属性，v（viewpoint）也就是说vh、vw直接对应的是当前视口的尺寸。

width:100vh;
height:100vh;

width:100%;
height:100%;
以上两种表达有什么区别呢。如果浏览器高度为1000px，宽度为800px，那么1vh=1000/100=10px，1vw=800/100=8px；而%要受到父元素的约束，并不能直接根据浏览器的尺寸计算。

什么是视口？

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。

根据CSS3规范，视口单位主要包括以下4个：

1.vw：1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>VW&VH</title>

</head>

<style>

    * {

        padding: 0;

        margin: 0

    }

    .left {

        float: left;

        width: 50vw;

        height: 100vh;

        background-color: blue;

        text-align: center;

        line-height: 100vh;

        font-size: 3rem

    }

    .right {

        float: right;

        width: 50vw;

        height: 100vh;

        background-color: green;

        text-align: center;

        line-height: 100vh;

        font-size: 3rem

    }

</style>

<body>

<div class="left">left</div>

<div class="right">right</div>

</body>

</html>

4.5、vmin、vmax

vmin表示当前宽和高的小者，vmax则表示当前宽和高的大者。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

五、示例与帮助下载

https://git.coding.net/zhangguo5/CSS301.git

https://git.coding.net/zhangguo5/HTML5_143.git

帮助文档与示例下载

六、视频下载

https://www.bilibili.com/video/av16530230/

七、作业

1.1、请完成所有上课示例

1.2、请完成下面的手机页面，当浏览器大小变化时图片与字体的大小发生变化，图标请使用字体图标，注意设定一个下限与上限值

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

文字必须一样，图标颜色必须一样，图片可以自行准备。

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位的更多相关文章

  1. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  2. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  3. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  5. （转载）CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  6. CSS3与页面布局学习笔记（四）——页面布局大全&lpar;负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局&rpar;

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  8. CSS3与页面布局学习总结（四）——页面布局的多种方法

    一.负边距与浮动布局   1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的 ...

  9. CSS3与页面布局学习总结——多种页面布局

    一.负边距与浮动布局 1.1.负边距 所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见 ...

随机推荐

  1. mysql5&period;7导入csv文件

    环境: Windows10企业版X64 mysql5.7免安装版(从5.6版本开始,官方不再提供64位的msi版本) 运行mysqld.exe启动mysql进程. 用root登录mysql: mysq ...

  2. Swift使用注意

    二.函数的可选参数 参数名:参数类型? = 默认值 // 调用的时候会发现生成了两个函数,一个带imageName,一个不带,选择不带的,调用此函数时将使用参数值nil convenience ini ...

  3. 【UOJ &num;147】【NOIP 2015】斗地主

    http://uoj.ac/problem/147 搜索时先枚举三顺子,双顺子和单顺子,然后贪心带牌和成三成双成单出. #include<cstdio> #include<cstri ...

  4. 一步一步来做WebQQ机器人-&lpar;二&rpar;&lpar;第一次登陆&rpar;

    // 预计会有这些步骤,当然某些步骤可能会合并: 验证码 第一次登陆 第二次登陆 保持在线和接收消息 获取好友和群列表 发送消息 变成智能的(*ﾟ∀ﾟ*) webqq的登陆,分为2步,本文主要讲第一次 ...

  5. javascript 倒计时获取验证码

    var wait=60;function reSendCode(id) { var obj = $("#"+id); if (wait == 0) { obj.attr(&quot ...

  6. C语言基础学习运算符-基本算术运算符

    C语言中用于基本算术运算的运算符有:+,-,*,%,/.这些运算符的用法和你想像到的基本无异: 加法运算符 “+”使得它两侧的值被加到一起. 减法运算符“-”用它前面的数减去后面的数. 乘法由“*”表 ...

  7. &lpar;转&rpar;iOS消息推送机制中pem文件的生成

    转自:http://2015.iteye.com/blog/1567777 以前写了一篇文章:iOS消息推送机制的实现,这篇文章中生成的是p12文件,但是php是用的pem文件,生成的方法和p12文件 ...

  8. Oracle字符函数&lpar;转换大小写，替换等&rpar;

    在oracle中,有一些字符函数: upper(字符串):转换为大写lower(字符串):转换为小写initcap(字符串):首字母大写replace(字符串1,字符串2,字符串3):将串1中所有的串 ...

  9. BAPI&lowbar;GOODSMVT&lowbar;CREATE 移动类型201 CODE &equals; &&num;39&semi;03&&num;39&semi; 代码

    DATA: MAT_DOC LIKE BAPI2017_GM_HEAD_RET-MAT_DOC.      "物料凭证编号   DATA: GMHEAD LIKE BAPI2017_GM_H ...

  10. zookeeper&lpar;1&rpar;

    参考文档:zookeeper中文网 一.介绍安装 zookeeper 是一个高效的分布式协调服务,它暴露了一些公用服务,比如命名/配置/同步控制/群组服务等.我们可以使用ZK来实现一些功能,例如:达成 ...

相关文章