元素显示效果：display

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

修改属性

让span标签换行

让指定div不换行

元素可见性：visibility

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

二：正常显示：visibility: visible

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

css

/* 元素显示 */
/*让span标签换行*/
/*span{ display: block; }*/

/*让div不换行*/
#div_2{ display: inline; }

/*元素可见性 visibility*/

/*none：位置和内容不显示*/
/*display: none*/

/*visible正常显示*/
/*visibility: visible*/

/*hidden元素内容不显示，位置显示*/
/*visibility: hidden*/

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字样式</title>
    <link rel="stylesheet" href="../css/css08.css">
</head>
<body>
<h1>元素显示和可见性</h1>

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

</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. vue中使用better-scroll滚动条插件

    应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...

  2. JavaScript设计模式 样例一 —— 工厂模式

    工厂模式(Factory Pattern): 定义:定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类.工厂方法让类的实例化推迟到子类中进行. 目的:工厂模式是为了解耦,把对象的创建和使用 ...

  3. LockSupport详解

    concurrent包是基于AQS (AbstractQueuedSynchronizer)框架的,AQS框架借助于两个类: Unsafe(提供CAS操作) LockSupport(提供park/un ...

  4. C#基础知识之扩展方法

    扩展方法需要满足的条件: 1.扩展方法必须定义在静态类里. 2.扩展方法必须是静态方法. 3.扩展方法的第一个参数以this修饰符为前缀. 4.扩展方法必须在使用它的类的扩展方法内,否则必须显示的us ...

  5. mysql 练习笔记

    从一个数据表中找出连续n条满足条件的记录 例子demo 从数据表中找出连续三条或者三次以上分数超过80分的记录 MariaDB [testdatabase]> select * from cla ...

  6. 阅读《Effective Java》每条tips的理解和总结（1）

    <Effective Java>这本书的结构是90来条tips,有长有短,每条tip都值的学习.这里根据对书中每条tip的理解做简短的总结,方便日后回顾.持续更新~ 1. 考虑用静态方法代 ...

  7. Mixly-指令

    串口: 向串口监视器输出数据       十进制       Serial.println(ir_item,HEX); 向串口监视器输出数据---十六进制 通信: 接收11脚的红外信号,把接收到的数据 ...

  8. Java日期时间以及日期相互转换_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 Java日期时间,以及相互转化,供大家参考,具体内容如下 package com.study.string; impor ...

  9. 大数加法(A + B Problem Plus)问题

    解题思路 两个⼤数可以⽤数组来逐位保存,然后在数组中逐位进⾏相加,再判断该位相加后是否需要进位.为了⽅便计算,可以把数字的低位放到数组的前面,高位放在后面. 样例输入 3 18 22 56 744 5 ...

  10. JavaScript自增和自减

    一.自增++ 通过自增运算符可以使变量在自身的基础上加一: 对于一个变量自增以后,原变量的值会立即自增一: 自增符号:++ 自增分为两种:1.后++(a++):2.前++(++a): 共同点:a++ ...