元素显示效果：display

块级元素，会导致换行：p、div、h...
内联元素，不会导致换行：span、strong...

修改属性

让span标签换行

让指定div不换行

元素可见性：visibility

一：影藏内容和位置：display: none

二：正常显示：visibility: visible

三：影藏内容，不影藏位置：visibility: hidden

css

  1. /* 元素显示 */
    /*让span标签换行*/
    /*span{ display: block; }*/
  2.  
  3. /*让div不换行*/
    #div_2{ display: inline; }
  4.  
  5. /*元素可见性 visibility*/
  6.  
  7. /*none：位置和内容不显示*/
    /*display: none*/
  8.  
  9. /*visible正常显示*/
    /*visibility: visible*/
  10.  
  11. /*hidden元素内容不显示，位置显示*/
    /*visibility: hidden*/

html

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文字样式</title>
        <link rel="stylesheet" href="../css/css08.css">
    </head>
    <body>
    <h1>元素显示和可见性</h1>
  2.  
  3. <p>这是<strong>p标签</strong>的内容</p>
    <div>
        这是 <span style="color: red">第一层div</span>的内容
        <div id="div_2">
            这是 <span style="color: blue; visibility: hidden">第二层div</span>的内容
        </div>
    </div>
  4.  
  5. </body>
    </html>

测开之路九十六：css进阶之元素显示和可见性的更多相关文章

  1. 测开之路九十：css的引用方式

    第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护 第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 第三种:外联,样式表链接,单独 ...

  2. 测开之路九十五：css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  3. 测开之路九十四：css之盒子模型

    盒子模型 为了演示方便,把内容放到盒子里面 引用css 演示内容 外边距: 4个方向分开写 简写为一条指令,顺序为上右下左 简写为一条指令,第一个值为上下,第二个值为左右 简写为一条指令,只有一个值时 ...

  4. 测开之路九十二：css之背景色和背景

    引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ col ...

  5. 测开之路九十九：js函数、事件、window窗体对象

    函数:function 函数名(参数列表) 事件 单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:w ...

  6. 测开之路九十八：js变量和语句

    这里为了方便调试,在jsbin网站上面编写js脚本:https://jsbin.com/?js,console 可以点击增加/减少对应展示分页,Console为控制台部分,Output为页面部分 变量 ...

  7. 测开之路十六：@classmethod与@staticmethod

    @classmethod 类方法 和属性一样,所有实例化的对象都共享类方法 @staticmethod 静态方法,可以理解为和类没有任何关系,只是放在了类里面 参数可以任意定义,根据自己的定义传参,也 ...

  8. 测开之路一百零三：jquery元素和标签的插入与删除

    标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  9. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

随机推荐

  1. go & log

    更多日志库 https://github.com/golang/glog github.com/astaxie/beego/logs ... 这里有一个讨论 Golang的log包哪个好用? 参考 G ...

  2. Springboot+Mybatis AOP注解动态切换数据源

    在开发中因需求在项目中需要实现多数据源(虽然项目框架是SpringCloud,但是因其中只是单独的查询操作,觉得没必要开发一个项目,所以采用多数据源来进行实现) 1.在配置文件中创建多个数据连接配置 ...

  3. mysql随机取一条记录

    function getTodayLook($limit) { $sql = "select * from `tvhome_movie_today` order by rand() limi ...

  4. java创建对象的5种方法

    java是面向对象的,所以在使用中经常会去创建对象,而我们一般创建对象只会使用new关键字去创建,这里给大家总结一下在java中创建对象的5中方法: 使用new关键字 } → 调用了构造函数 使用Cl ...

  5. Java并发——线程间通信与同步技术

    传统的线程间通信与同步技术为Object上的wait().notify().notifyAll()等方法,Java在显示锁上增加了Condition对象,该对象也可以实现线程间通信与同步.本文会介绍有 ...

  6. （最新）2019年ICPC东亚地区-区域赛赛站网络赛以及现场赛时间安排

  7. go语言学习——变量、常量、循环、条件、switch、数组和切片

    1.变量 package main import "fmt" func main() { 个或者多个变量. var a string = "initial" f ...

  8. vector auto

    #include <iostream>#include <vector>#include <string>using namespace std;using std ...

  9. “jps”命令的用处？

    jps位于jdk的bin目录下,其作用是显示当前系统的java进程情况,及其id号. jps相当于Solaris进程工具ps.不像”pgrep java” 或”ps -ef grep java”,jp ...

  10. CCF201412-2 Z字形扫描 java（100分）

    试题编号: 201412-2 试题名称: Z字形扫描 时间限制: 2.0s 内存限制: 256.0MB 问题描述: 问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag ...