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

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

一、CSS3概要

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

1.1、特点

1.2、效果演示

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

HTML页面：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drawLittleHuangtitle>
    <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: 0;
    padding:0;
}
.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: 2;
}
.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: 2;
    -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: 0;
    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: 0;
    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: 0;
    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: 3;
}
.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: 3;
    -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的帮助文档：

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

点击下载帮助文档，上课示例的“文档”文件夹中也包含了两个关键的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>

结果：

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	选择所有元素。	1
element,element	div,p	选择所有元素和所有元素。	1
element element	div p	选择元素内部的所有元素。	1
element>element	div>p	选择父元素为元素的所有元素。	2
element+element	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	选择每个元素的首字母。	1
:first-line	p:first-line	选择每个元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:before	p:before	在每个元素的内容之前插入内容。	2
:after	p:after	在每个元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个元素。	2
element1~element2	p~ul	选择前面有元素的每个元素。	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。	3
[attribute=value*]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的元素。	3
:disabled	input:disabled	选择每个禁用的元素	3
:checked	input:checked	选择每个被选中的元素。	3
:not(selector)	:not(p)	选择非元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

1.1、基础的选择器

红色字体中选择器的区别是：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">p1p>
        <p>
                <span class="info">span1span>
                <p>p3p>
        p>
    body>
html>

运行结果：

1.2、组合选择器

示例：

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>span1span>
            <div id="div2">
                <span>span2span>
            div>
        div>
        <span>span3span>
    body>
html>

运行结果：

示例：

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>span1span>
            <div id="div2">
                <span>span2span>
            div>
        div>
        <span>span3span>
    body>
html>

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>span1span>
            <div id="div2">
                <span>span2span>
            div>
        div>
        <span>span3span>
        <span>span4span>
    body>
html>

1.3、属性选择器

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>span0span>
        <div id="div1" class="cls1">
            div1
        div>
        <div id="div2" class="cls1 cls2">
            div2
        div>
    body>

html>

运行结果：

1.4、伪类

示例：

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> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
        table>
        <hr />
        <table border="1" width="100%">
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
            <tr>
                <td> td><td> td><td> td><td> td><td> td><td> td>
            tr>
        table>
    body>

html>

运行结果：

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

1.5、伪元素

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

示例：

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>

运行结果：

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>

结果：

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>

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>

结果：

三、特殊性（优先级）

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

内嵌样式：内嵌在元素中，span

内部样式表：在页面中的样式，写在中的样式

外联样式表：单独存在一个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">p1p>
            <span>span1span>
        div>
    body>
html>

运行结果：

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，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。

示例：

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>

运行结果：

因为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

4.1、绝对长度单位

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

4.1.1、动态计算长度值

calc() = calc(四则运算)

用于动态计算长度值。

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

示例：

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>

结果：

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不能直接修改，可以被用户样式覆盖。

示例代码：

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与remtitle>
        <style type="text/css">
            #div2{
                background: blue;
                height: 5em;
            }
        style>
    head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            div>
        div>
    body>
html>

结果：

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

示例：

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与remtitle>
        <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>

结果：

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与remtitle>
        <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>

运行结果：

示例：

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与remtitle>
        <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>

结果：

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

4.3、Web App与Rem

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

示例一：

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>rem phone testtitle>
        
        <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>

运行结果：

参考代码：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>rem phone testtitle>
    <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>

示例二：

DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>web app 与remtitle>
        <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>

运行结果：

变屏幕变宽时元素大小也随之发生变化，但这里并没有考虑高度，但为响应式布局与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。

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&VHtitle>
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">leftdiv>
<div class="right">rightdiv>
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与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

一、CSS3概要

1.1、特点

1.2、效果演示

1.3、帮助文档与学习

二、选择器

1.1、基础的选择器

1.2、组合选择器

1.3、属性选择器

1.4、伪类

1.5、伪元素

三、特殊性（优先级）

3.2、计算特殊性值

四、刻度

4.1、绝对长度单位

4.1.1、动态计算长度值

4.2、文本相对长度单位

4.3、Web App与Rem

4.4、vh、vw

4.5、vmin、vmax

五、示例与帮助下载

六、视频下载

七、作业

相关

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

nodejs 一个简单的web服务器，用于前端自己快速测试部署

深入理解前端跨域方法和原理

【前端单元测试入门04】Karma

前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库

前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

web前端面试题

箭头流程图--前端实现

GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结

第十一章前端基础

前端性能优化

前端开发框架Vue之findIndex() 的使用

标签