CSS入门

css介绍

SS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

 

css语法

 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的

 

css的注释

/*这是注释*/

 

css的引入方式

现在的互联网前端分三层：

  • HTML：超文本标记语言。从语义的角度描述页面结构。
  • CSS：层叠样式表。从审美的角度负责页面样式。
  • JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

 

 

HTML的缺陷：

  1. 不能够适应多种设备
  2. 要求浏览器必须智能化足够庞大
  3. 数据和显示没有分开
  4. 功能不够强大

CSS的优点：

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

 

 内行样式

  行内式：顾名思义，在标签内部的样式设置。是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red; font-size: 16px">行内样式</p>

 

 内部样式

 内接式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{                           #此时所有的p标签都会应用次标签的属性
            background-color: #2b99ff;
        }
    </style>
</head>

 

 

 

 外接样式

 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式

 

链接式

<link rel="stylesheet" href="./index.css">

 

导入式 

<style type="text/css">
        @import url('./index.css');
</style>

 

 

 css的选择器

 基本选择器

 元素选择器

元素选择器就是"标签"选择器

div{
            color: #009f95;
            font-size: 30px;
        }
        /*所有div标签都会被修改颜色和字体大小*/

 

 id选择器

 通过id找到要操作的某个标签

 #a {
            color: #009f95;
            font-size: 30px;
        }
        /*id 为 a 的标签会被修改颜色和字体大小*/

 

 类选择器

 给设置了同意class属性值的标签改变样式.

.abc {
            color: #009f95;
            font-size: 30px;
        }
        /*class="abc"的所有标签会被修改颜色和字体大小*/

 

 通配符选择器

* {
       color: #009f95;
       font-size: 30px;
   }
    /*所有标签会被修改颜色和字体大小*/

 

组合选择器

 后代选择器

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说：我想让某个区域内的某一类标签包裹的内容变色，改变字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div span {
            color: #009f95;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div>
    <h1>
        <span>
            div 中的 span 标签
        </span>
    </h1>
</div>
<span>
    body 中的 span 标签
</span>
</body>
</html>
后代选择器示例

 

 子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 > strong {
            color: red;
        }
    </style>
</head>
<body>
<h1>这个h1 <strong>非常</strong> <strong>非常</strong> 重要.</h1>
<h1>这个h1 <em>的确 <strong>非常</strong></em> 重要.</h1>
</body>
</html>
子元素选择器示例

这个规则会吧第一个h1下面的两个strong元素变为红色,但是第二个h1中的strong不受影响

 

毗(pi)邻选择器

毗邻选择器也可以叫做相邻弟弟选择器。

既然是相邻弟弟兄弟，也就意味着紧邻的下一个/多个标签都算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html > body > div p + p {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    <p>我是大娃</p>
    <p>我是二娃</p>
    <p>我是三娃</p>
    <span>
        我是四娃
    </span>
    <p>我是五娃</p>
</div>
<p>我是六娃</p>
</body>
</html>
毗邻选择器示例

 

弟弟选择器

在毗邻选择器中我们发现，一旦不是紧挨着的弟弟，就无法受影响。

那我我们的弟弟选择器就可以实现，不相邻，但是只要是弟弟就能被影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html > body > div p ~ p {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    <p>我是大娃</p>
    <p>我是二娃</p>
    <p>我是三娃</p>
    <span>
        我是四娃
    </span>
    <p>我是五娃</p>
</div>
<p>我是六娃</p>
</body>
</html>
弟弟选择器示例

 

 

属性选择器

  <style>
    p[title]{   /* 用于选取带有指定属性的元素*/
      color: red;
    }
    p[title='nb']{/*用于选取带有指定属性和值的元素*/
      color: yellow;
    }
  </style>
</head>
<body>
<p title="nb">asd</p>
<p title>asd</p>

通过属性或者属性的值来查找，这个属性是我们自己定义的，不是id啊class啊这种html自带的属性

 

 

选择器分组

通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

白话点说就是，当某几个标签通过CSS改变的样式是一样的时候，可以用分组，很简洁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span, h1 {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>我是大娃</p>
    <p>我是二娃</p>
    <p>我是三娃</p>
    <span>
        我是四娃
    </span>
    <p>我是五娃</p>
</div>
<p>我是六娃</p>
<h1>我是七娃</h1>

</body>
</html>
选择器分组

 

结合元素选择器

类选择器可以结合元素选择器来使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1.cala, p.cala {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p class="cala">我是大娃</p>
    <p>我是二娃</p>
    <p>我是三娃</p>
    <span class="cala">
        我是四娃
    </span>
    <p>我是五娃</p>
</div>
<p>我是六娃</p>
<h1 class="cala">我是七娃</h1>
</body>
</html>
结合元素选择器示例

 

伪类选择器

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态（active），已被访问状态（visited），未被访问状态（link），和鼠标悬停状态（hover）。

使用标签的伪类选择器，我们一定要遵循"爱恨准则"  LoVe HAte

爱恨准则：

a:link {color: #blue}    /* 未访问的链接 */
a:visited {color: #yellow}  /* 已访问的链接 */
a:hover {color: #green}    /* 鼠标移动到链接上 */
a:active {color: #red}   /* 选定的链接 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: blue;
        }

        a:visited {
            color: yellow;
        }

        a:hover {
            color: green;
        }

        a:active {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">link 未访问的链接</a></br>
<a href="#">visited 已访问的链接</a></br>
<a href="#">hover 鼠标悬浮上的效果</a></br>
<a href="#">active 鼠标点击时的效果</a></br>
</body>
</html>
伪类选择器示例

 

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

tips：伪类选择器的效果在a标签中最常用，hover&active也适用于其他标签。

 

伪元素选择器

:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-line {
            color: red;
        }

        p:first-letter {
            color: blue;
        }

        p:before {
            content: "在原文本之前添加一句话";
        }

        p:after {
            content: url("01.png");
        }
    </style>
</head>
<body>
<p>
    这里面要有很多文字，
    多到能撑起来至少一行，
    实现自动换行就行。
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>
</body>
</html>
伪元素选择器示例

示例中的图片自己弄一个放到跟html页面在同一个文件夹内就能看到效果了

 

 

css选择器的继承和有限级

面向对象中有继承，CSS样式中也有继承，比如说你给body设置了颜色，那么body内的所有标签都会默认显示这个颜色。

但是来自继承的权重特别低，但凡你又对body内的任意一个标签重新设定属性，那么来自于继承的相同属性就会被废弃掉。

可是众多的CSS选择器，运用不同的手法对一个标签做一些相同的更改（比如说变红、变绿、变紫等），最终显示的不是七彩的标签，而是单一颜色的标签。

那么问题来了，到底应该显示谁设置的颜色呢。我们来看下面一串代码，你来猜一猜颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*设置所有p标签的样式*/

        p {
            color: darkmagenta;
            font-size: 100px;
        }

        /*重新设置所有p标签的样式*/
        p {
            color: green;
            font-size: 50px;
        }

        #dawa , #erwa{
            color: orange;
        }

        .calabash {
            color: yellow;
        }

    </style>
</head>
<body>
<p style="color: red" class="calabash" id="dawa">大娃</p>
<p id="erwa" class="calabash">二娃</p>
<p class="calabash">三娃</p>
<p>四娃</p>
<p>五娃</p>
<p>六娃</p>
<p>七娃</p>
</body>
</html>
css选择器优先级示例

 

我们通过示例不难发现：

  • 代码从上至下执行（p）标签的设置能体现出来
  • class设置的权重大于元素（在例子中是p标签）
  • id的权重大于class的权重
  • 而内联样式设置的权重大于一切
  • 来自于继承的属性权重小于一些

 

tips：

有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

 

 

 css样式属性

标准文档流

你像往常一样，打开电脑，打开pycharm，写了一个p标签，写了一句话，敲了很多空格、tab、回车，排版排的明明白白的，然后在浏览器中打开你写的内容。

！！！！！所有的排版操作（空格、tab、回车）被压缩成了一个空格！

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<img src="01.png" alt=""><img src="01.png" alt="">
<img src="01.png" alt="">
<img src="01.png" alt="">这是路飞的广告图片，这不是咏鹅的配图。
<p>
            咏鹅
                    骆宾王
    鹅，鹅，鹅，曲项向天歌。
    白毛浮绿水，红掌拨清波。
</p>
</body>
</html>
唐诗欣赏

 

通过唐诗赏析代码的排版和渲染，我们能够得出以下结论：

  • 空白折叠现象：HTML文件中代码的排版，浏览器把所有的空格 + tab + 回车识别为一个空格。
  • img之间的间隔：想让img之间不自带间隔，把两个img标签写到一行就不会有间隔了。
  • 高矮不齐、底边对齐：图片比图片后边的文字高很多，但是他们的底边是在一条线上。
  • 自动换行：当一行显示不完时，会自动换行。

 

字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            font-family:Serif ;
        }
        h2{
            font-family:Sans-Serif ;
        }
        h3{
            font-family: Monospace ;
        }
        h4{
            font-family: Cursive ;
        }
        h5{
            font-family: Fantasy ;
        }
        body{
            font-size: 40px;
        }
    </style>
</head>
<body>
<h1>Serif(衬线) 字体</h1>
<h2>Sans-serif(无衬线字体，灯芯体) 字体</h2>
<h3>Monospace(等宽字体) 字体</h3>
<h4>Cursive(手写体) 字体</h4>
<h5>Fantasy(范特西字体) 字体</h5>
</body>
</html>
字体类型示例代码

具体在开发时使用什么具体，要按照需求来选择。

更多字体参考：http://www.w3school.com.cn/css/css_font-family.asp

 

 字体大小

 字体大小用font-size属性,单位是px.

 

body{
            font-size: 40px;
        }

字体大小可继承。默认继承父级字体大小。自己想设置字体继承，则写入：font-size: inherit;即可。

 

字体粗细

 font-weight属性来调节字体的粗细

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-weight: 600;
        }

        #a {
            font-weight: normal;
        }

        #b {
            font-weight: bold;
        }

        #c {
            font-weight: bolder;
        }

        #d {
            font-weight: lighter;
        }

        #e {
            font-weight: inherit;
        }

        #f {
            font-weight: 800;
        }
    </style>
</head>
<body>
<div id="a">normal 默认值标准粗细</div>
</br>
<div id="b">bold 粗体</div>
</br>
<div id="c">bolder 更粗的粗体</div>
</br>
<div id="d">light 更细</div>
</br>
<div id="e">inherit 继承父级字体粗细</div>
</br>
<div id="f">100-900 设置具体的字体粗细，400=normal，700=bold</div>
</br>
</body>
</html>
字体粗细代码示例

 

 字体颜色

 

颜色是CSS很常用的样式，常见的有以下四种表现形式：

  • 颜色的英文名：red、yellow、blue、green
  • 十六进制值：#000000 ~ #FFFFFF
  • RGB值：0,0,0 ~ 255,255,255，书写方式示例 color:rgb(255,0,0)
  • RGBA值：A是alpha的简写，在这里指代颜色的透明度，范围从0.0~1.0之间，书写方式示例：rgba（255,0,0,0.5）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: rgb(255, 0, 0);
        }

        body {
            color: rgba(255, 0, 0, 0.5);
        }

        p {
            color: #fff000;
        }

        span {
            color: green;
        }

    </style>
</head>
<body>
<div>我是div的字体颜色</div>
<p>我是p标签的字体颜色</p>
<span>我是span标签的字体颜色</span><br>
我是body的字体颜色
</body>
</html>
css颜色示例代码

 

 

文本属性

6.3.1 文本的对齐方式

text-align 属性来设置元素的对齐方式。

属性值：left（默认）| center（居中对齐）| right（右对齐）| justify（两端对齐）

6.3.2 文本的缩进形式

text-indent 属性来设置元素的缩进形式。

属性值：px或者em，16px=1em，可接受负值。

6.3.3 文本内容的间距

word-spacing属性来设置元素文本间的间距。

属性值：px或者em，16px=1em，可接受负值。（英文文本见效）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin: 5em;
        }

        p {
            text-align: justify;
            text-indent: -16px;
            word-spacing: 50px;
        }
    </style>
</head>
<body>
<div>
    <p>文本属性之对齐方式</p>
    <p>this is some words</p>
</div>
</body>
</html>
文本内容间距示例代码

 

 

6.3.4 文本的大小写

text-transform 属性来设置文本的大小写。

属性值：none | uppercase | lowercase | capitalize

6.3.5 文本的装饰

text-decoration 属性，这是一个很有意思的属性，它提供了很多有趣的行为。

属性值：none | underline（下划线） | overline（上划线） | line-through（中划线） | blink（闪烁，主流浏览器已废弃）

6.3.6 文本的方向

如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

6.3.7 文本的宽高

块级标签可以设置宽高，内联（行内）标签的宽高由内容决定。

宽：width；高：height；行高：line-height。

单位：px或者em，16px=1em，可接受负值。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin: 5em;
        }

        p {
            text-align: justify;
            text-indent: -16px;
            word-spacing: 50px;
            text-transform: lowercase;
            text-decoration: blink;
            line-height: 100px;
            /*width: 100px;*/
            height: 50px;
            direction: rtl;
            unicode-bidi: embed;
        }
    </style>
</head>
<body>
<div>
    <p>文本属性之对齐方式</p>
    <p>this is some words</p>
</div>
<p>this is some words</p>
</body>
</html>
文本属性示例代码综合

 

 

背景属性

背景设置在CSS中非常的常见，一些个花花绿绿的效果，离不开背景的设置。

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

CSS 在这方面的能力远远在 HTML 之上。

6.4.1 背景色

background-color 属性用来设置背景色，这种设置接受任何一种合法的颜色设置。

颜色设置参考本文6.2.4 中的颜色设置。

当然背景色的设置还可以在文本之外进行延伸。加上padding、或者margin，显示不一样的效果。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #fff000;
        }

        p {
            background-color: gray;
            padding: 50px;
            background-color: #1E9FFF;
            margin: 50px;  /*会覆盖掉上边padding的设置*/
        }
    </style>
</head>
<body>
<p>CSS 之背景设置 背景色</p>
</body>
</html>
css背景色示例代码

 

 

 

6.4.2 背景图像

 background-image 属性用来把图像放入背景。

如果要设置一个背景图像，必须为这个属性设置一个URL值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*background-color: #fff000;*/
            background-image: url("01.png"); /* 背景图像和颜色同时设置时仅显示背景图像的效果*/
        }

        p {
            background-color: gray;
            padding: 50px;
            background-color: #1E9FFF;
            margin: 50px; /*会覆盖掉上边padding的设置*/
        }
    </style>
</head>
<body>
<p>CSS 之背景设置 背景色</p>
</body>
</html>
背景图片示例代码

背景图像也可以为行内元素设置。

如果背景图像比较小，不能横向或者纵向填满，需要重复，则需要用到另一个属性：background-repeat。

background-repeat的属性值：repeat-x 或者 repeat-y 或者 no-repeat 分别代表x轴铺满或者y轴铺满或者不铺满。

 

 

6.4.3 背景定位

background-position 属性用来改变图像在背景中的位置。

单一关键字属性值：center | top | bottom | left | right。

其他等价关键字属性值：center center | top center 或 center top | bottom center 或 center bottom | left center 或 center left | right center 或 center right | top left（相邻坐标组合）。

 

display属性

 

display 属性用来控制HTML元素的显示效果。

在介绍display属性之前，我们先来总结一下块级标签和行级标签的区别。

6.5.1 块级标签

特征：

  • 独占一行，且自带换行，不与其他元素共享一行。
  • 能设置宽高。
  • 有align属性。

常见块级标签：<div>、<h1> ~ <h6>、<p>、<hr>（水平线）、<br>、<ol>（有序列表）、<ul>（无序列表）等。

6.5.2 行内标签

特征：

  • 不占一行，不换行，能与其他元素共享一行。
  • 没有宽高，宽高由内容决定。
  • 没有align属性。

常见行级标签：<span>、<i>、<strong>、<img>、<a>

6.5.3 块级元素&行级元素之间的互相转换

块级元素转行级元素：display:inline

行级元素转块级元素：display:block

块级元素&行级元素属性同时具备：display:inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: inline;
            width: 300px;
            height: 50px;
            text-align: center;
            background: #fff000;
            line-height: 50px;
        }

        span {
            display: block;
            width: 300px;
            height: 50px;
            text-align: center;
            background: #fff000;
            line-height: 50px;
        }

        .inline-block {
            display: inline-block;
            width: 49%;
            height: 50px;
            text-align: center;
            background: #ff0000;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div>
    我是一个能设置宽高的块级元素
</div>
<span>
    我是一个不能设置宽高的行级元素
</span>
<div class="inline-block">
    我是一个div标签包裹的文本，我既是块级元素，我也是行内元素
</div>
<span class="inline-block">
    我是一个span标签包裹的文本，我既是块级元素，我也是行内元素
</span>
</body>
</html>
display属性示例

 

display属性之隐身术

display 属性用来控制HTML的显示效果，它除了能改变标签的块级或者行内属性外，还能实现隐藏标签的功能。

如果想隐藏标签则需要设置display:none

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: inline;
            width: 300px;
            height: 50px;
            text-align: center;
            background: #fff000;
            line-height: 50px;
        }

        span {
            display: block;
            width: 300px;
            height: 50px;
            text-align: center;
            background: #fff000;
            line-height: 50px;
        }

        .inline-block {
            display: inline-block;
            width: 49%;
            height: 50px;
            text-align: center;
            background: #ff0000;
            line-height: 50px;
        }

        .liuwa {
            display: none;/*放开注释，六娃即可实现隐身*/
        }

        .qiwa {
            visibility: hidden;/*放开注释，七娃即可实现隐身*/
        }
    </style>
</head>
<body>
<div>
    我是一个能设置宽高的块级元素
</div>
<span>
    我是一个不能设置宽高的行级元素
</span>
<div class="inline-block">
    我是一个div标签包裹的文本，我既是块级元素，我也是行内元素
</div>
<span class="inline-block">
    我是一个span标签包裹的文本，我既是块级元素，我也是行内元素
</span>
<h1 class="liuwa">我是六娃，我怕是会隐身哟。我的隐身术是纯正的，页面中找不到我这个标签了。</h1>
<h1 class="qiwa">我是七娃，我怕是也会隐身哟。</h1>
<h1 class="liuwa">我是六娃，我怕是会隐身哟。我的隐身术是纯正的，页面中找不到我这个标签了。</h1>
<hr>
</body>
</html>
示例

 

 

通过示例代码的效果我们能够得到以下结论：

  • display:none 的隐身，能把整个标签都隐藏掉，隐藏掉的标签在页面中不会占用空间。
  • visibility: hidden 的隐身，能把标签内的内容隐身了，标签本身没有被隐身，在页面中还会占据空间。

 

posted on 2019-03-13 15:02  &#128051;️南栀倾寒&#128051;️  阅读(216)  评论(0)  编辑  收藏  举报

导航