一、display

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			a{

				background-color: #bfa;

				/*

				 * 将一个内联元素变成块元素，

				 * 	通过display样式可以修改元素的类型

				 * 		可选值：

				 * 			inline：可以将一个元素作为内联元素显示

				 * 			block: 可以将一个元素设置块元素显示

				 * 			inline-block：将一个元素转换为行内块元素

				 * 					- 可以使一个元素既有行内元素的特点又有块元素的特点

				 * 						既可以设置宽高，又不会独占一行

				 * 			none: 不显示元素，并且元素不会在页面中继续占有位置

				 */

				display: none;

				/*为其设置一个宽和高*/

				width: 500px;

				height: 500px;

			}

			.box{

				width: 100px;

				height: 100px;

				background-color: orange;

				/*

				 * display: none;

				 * 	使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置

				 */

				/*display: none;*/

				/*

				 * visibility

				 * 	- 可以用来设置元素的隐藏和显示的状态

				 * 	- 可选值：

				 * 		visible 默认值，元素默认会在页面显示

				 * 		hidden 元素会隐藏不显示

				 *

				 * 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，

				 * 		但是它的位置会依然保持

				 */

				visibility:hidden ;

			}

		</style>

	</head>

	<body>

		<div class="box"></div>

		<a href="#">我是一个大大的超链接</a>

		<span>hello</span>

	</body>

</html>

二、overflow

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			.box1{

				width: 200px;

				height: 200px;

				background-color: #bfa;

				/*

				 * 子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小

				 * 	如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容

				 *  父元素默认是将溢出内容，在父元素外边显示，

				 * 	通过overflow可以设置父元素如何处理溢出内容：

				 * 		可选值：

				 * 			visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示

				 * 			hidden, 溢出的内容，会被修剪，不会显示

				 * 			scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容

				 * 					该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条

				 * 			auto，会根据需求自动添加滚动条，

				 * 						需要水平就添加水平

				 * 						需要垂直就添加垂直

				 * 						都不需要就都不加

				 */

				overflow: auto;

			}

			.box2{

				width: 100px;

				height: 500px;

				background-color: red;

			}

		</style>

	</head>

	<body>

		<div class="box1">

			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。

这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。

我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。

枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。

鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。

哇的一声，夜游的恶鸟飞过了。

我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。

后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。

猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。

我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。

一九二四年九月十五日。

		</div>

	</body>

</html>

display和overflow的更多相关文章

  1. 前端（七）—— 盒模型之display、overflow、隐藏、border、margin、样式支持，层级结构

    display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...

  2. display:none,overflow:hidden,visibility:hidden之间的区别

    一,display:none; 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着) 二,overflow:hidden; 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高 ...

  3. position,display,float,overflow,margin,padding之间的相互影响

    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...

  4. 同行span标签设置display:inline-block;overflow:hidden垂直对齐问题

    1 问题描述:一个div包含 三个span 当span2 类样式设置如下图时,将导致垂直方向不对齐的情况 2解决方案: 将前面的也设置同样的样式 overflow:hidden; display:in ...

  5. display总结 overflow知识

    # display总结:# inline总结: # 1.同行显示, 就相当于纯位文本, 当一行显示不下, 如就是一字显示不下, 那么显示不下的那个字会自动换行;# 和纯文本的区别就是有纯文本的概念, ...

  6. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...

  7. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  8. display:table-cell的应用

    一.display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6 ...

  9. 几种display:table-cell的应用

    一.display:table-cell属性简述 display:table- cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE ...

随机推荐

  1. JavaScript语言精粹 笔记02 函数

    函数函数对象函数字面量调用参数返回异常给类型增加方法递归作用域闭包回调模块级联套用记忆   函数 1 函数对象 在JS中函数就是对象.对象是“名/值”对的集合并拥有一个连接到原型对象的隐藏连接.对象字 ...

  2. 编写高质量代码改善C#程序的157个建议——建议110：用类来代替enum

    建议110:用类来代替enum 枚举(enum)用来表示一组固定的值.例如,为了表示星期信息,我们可以定义枚举Week: enum Week { Monday, Tuesday, Wednesday, ...

  3. 洛谷 P2596 [ZJOI2006]书架 (splay)

    题目描述 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿下一本.由于这些 ...

  4. 每天多学一个Linux命令--man

    今天学习的是“有问题,找男人”.man是manual(操作说明)的简写.它提供强大的帮助文档,当你需要查看某个命令的参数时不必到处上网查找,只要man一下即可. 第一列代表的是章节代号,第二列代表的是 ...

  5. linux 管道与重定向

    命令行shell数据流有如下定义: 通过管道和重定向可以控制CLI的数据流

  6. .net 异步函数 Async await

    .net  异步函数  Async await 一旦为函数添加async关键字 该函数就是一个异步函数. 异步方法必须返回 void 或 Task<> 类型. public static ...

  7. java-02 JDK安装与环境变量配置&安装编程IDE

    1.JDK下载安装与环境变量的配置 1.1 官方JDK 下载地址 大家可以到Oracle中国官方网站下载JDK,也可已 通过这个链接下载 (推荐大家下载1.8版本,这个版本是当前比较流行的版本) 也可 ...

  8. 在Centos 7 上面 安装MySQL 5.7 简录

    In a web browser, visit mysql.com page: https://dev.mysql.com/downloads/repo/yum/ Locate the desired ...

  9. Ubuntu安装python

    一.下载 手动或者命令都行 wget http://www.python.org/ftp/python/2.7.12/Python-2.7.12.tar.xz 二.解压: #xz -d Python- ...

  10. POJ 3522 最小差值生成树（LCT）

    题目大意:给出一个n个节点的图,求最大边权值减去最小边权值最小的生成树. 题解 Flash Hu大佬一如既往地强 先把边从小到大排序 然后依次加入每一条边 如果已经连通就把路径上权值最小的边删去 然后 ...