CSS2.0层叠样式表—CSS元素显示和隐藏、继承和优先级、HackCSS中可以通过display属性来控制前端元素的显

元素显示和隐藏

学习目标

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。

display 显示隐藏。
visibility 显示隐藏。
overflow 溢出显示隐藏。

display 属性

display 属性用于设置一个元素应如何显示。

display: none ；隐藏对象。
display：block ；除了转换为块级元素之外，同时还有显示元素的意思。

display 隐藏元素后，不再占有原来的位置。后面应用及其广泛，搭配 JS 可以做很多的网页特效。类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。

<!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>显示隐藏元素之display</title>
    <style>
        .peppa {
            display: none;
            /* display: block; */
            width: 200px;
            height: 200px;
            background-color: pink;

        }
        .george {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="peppa">佩奇</div>
    <div class="george">乔治</div>
</body>
</html>

visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 元素可视。
visibility：hidden; 元素隐藏。

visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用 visibility：hidden ;

如果隐藏元素不想要原来位置，就用 display：none ;

<!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>显示隐藏元素之display</title>
    <style>
        .baba {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;

        }
        .mama {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="baba">猪爸爸</div>
    <div class="mama">猪妈妈</div>
</body>
</html>

overflow溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出不分隐藏掉
scroll	不管是不是超出内容，都显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

<!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>显示隐藏元素之overflow</title>
    <style>
        .peppa {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="peppa">
        《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
        Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、
    </div>
</body>
</html>

课程总结

CSS继承和优先级

学习目标

CSS的继承

继承是CSS的一个主要特征，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

示例：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                color:yellow;
            }
        </style>
    </head>
    <body>
        <p>
            我的颜色会被改变
        </p>
    </body>
</html>

但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                color:yellow;
                border:1px solid red; /*边框属性不能被继承*/
            }
        </style>
    </head>
    <body>
        <p>
            我的颜色会被改变
        </p>
    </body>
</html>

可以被继承的css属性

1.字体系列属性:font、font-family、font-weight、font-size、fontstyle; 2.文本系列属性: 2.1 内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase所有字符强制转为大写，lowercase转小写，capitalize首字符强制转为大写); 2.2 块级元素：text-indent、text-align; 3.元素可见性：visibility 4.表格布局属性：caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）; 5.列表布局属性：list-style 不可以被继承的css属性

1.display：规定元素应该生成的框的类型； 2.文本属性：vertical-align、text-decoration(用于设置文本的修饰线外观包括上/下划线，管穿线，删除线，闪烁 ); 3.盒子模型的属性：width、height、margin、border、padding; 4.背景属性：background、background-color、background-image; 5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、maxwidth、max-height、overflow、clip;

CSS的优先级

在学习CSS优先级之前我们先来了解一个概念权重。

权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。

权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。

CSS中的权重：

每一个CSS的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”。
CSS通过CSS选择器的权重占比，来计算CSS选择规则的总权值，从而确定定义样式规则的优先级次序。
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，样式表中的特殊性描述了不同规则的相对权重。

CSS优先级规则：

CSS选择规则的权值不同时，权值高的优先。
CSS选择规则的权值相同时，后定义的规则优先。
CSS属性后面加 !important 时，无条件绝对优先。

权值等级划分，一般来说是划分5个等级：

内联样式，如 style=""，权值为 1,0,0,0。
ID选择器，如 #id="", 权值为 0,1,0,0。
class | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0。
标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1。
通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0。

权值计算公式：

权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数。

权值比较规则：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。例如你有11个Class选择器控制颜色改变那么权值是110，权值超过了ID选择器的100，那我就应该应用class类型的样式吗？那肯定不是的，我们还是会应用ID选择器的样式。所以一定注意他们之间并不是简单的相加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        /*给body的所有内容加上样式*/
        body{
            color: crimson;
            border: 2px solid;
            border-color: aqua;
        }
        /*子类有设置样式就用子类的，没有就继承了父类的*/
        p{
            color: red;
        }
        #s2{
            color: blue;
        }

        /*不能被继承,它会用自己的边框，而不会用父类的边框*/
        p{
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="c1" id="s1">
    div
    <div class="c2" id="s2">
        <div class="c3" id="s3">苍茫的天涯是我的爱</div>
        <p>火辣辣的太阳</p>
    </div>
    <p>哎呀呀哎呀呀呀</p>
</div>
<div>hello haiyan</div>
<p>nis</p>
</body>
</html>

总结：

先从高等级进行比较，高等级相同时，再比较低等级的，以此类推。
完全相同的话，就采用后者优先原则（也就是样式覆盖）。
CSS属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）。

课程总结

CSS Hack

学习目标

CSS初始化

因为默认样式导致的错乱问题，而且每个浏览器的CSS默认样式不尽相同，所以最简单有效的方式就是对其进行初始化（覆盖默认样式）。

*{
    margin: 0;
    padding: 0;
}

关于浏览器CSS样式初始化，经验不丰富的话，推荐一个库给大家，Normalize.css，github star数量接近4万，自行选取展示其中几个样式设置，如下：

html {
    line-height: 1.15; /* Correct the line height in all browsers */
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}
body {
    margin: 0;
}
a {
    background-color: transparent; /* Remove the gray background on active links in IE 10. */
}
img {
    border-style: none; /*  Remove the border on images inside links in IE 10. */
}

CSS hack

除了以上的默认样式覆盖及私有属性添加，有时我们还需要针对不同的浏览器甚至不同版本编写特定的CSS样式，这一过程就叫做CSS hack。

CSS hack的写法大致可以归纳为以下几种：条件hack、属性级hack、选择符级hack。

条件hack：主要针对IE浏览器进行一些特殊的设置

<!--[if <keywords>? IE <version>?]>
    代码块，可以是html，css，js
<![endif]-->

关键词

if后面跟的条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本。

是否：指定是否IE或IE某个版本。关键字：空。
大于：选择大于指定版本的IE版本。关键字：gt（greater than）。
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）。
小于：选择小于指定版本的IE版本。关键字：lt（less than）。
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）。
非指定版本：选择除指定版本外的所有IE版本。关键字：! 。

IE浏览器版本，如6、7、8，但IE10及以上版本已将条件注释特性移除，使用时需注意。

示例：

<!--[if IE]>
    <p>你在非IE中将看不到我</p>
<![endif]-->

<!--[if IE]>
<style>
    .test{color:red;}
</style>
<![endif]-->

<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->