一、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. 解决gitosis中authorized_keys不自动更新问题

    1.拷贝一个管理员权限用户的id_rsa.pub到服务器端 这里我拷贝的是yang电脑的key,命令如下: scp  /home/yang/.ssh/id_rsa.pub serveradmin@服务 ...

  2. POJ 1985 Cow Marathon （树形DP，树的直径）

    题意:给定一棵树,然后让你找出它的直径,也就是两点中的最远距离. 析:很明显这是一个树上DP,应该有三种方式,分别是两次DFS,两次BFS,和一次DFS,我只写了后两种. 代码如下: 两次BFS: # ...

  3. Hadoop有点难

    从看<Hadoop权威指南>第一眼开始,我一直觉得Hadoop很难,很难.....看着这本书,我觉得好像是文言文,我是真的看不懂,我的一腔热血瞬间冷了下来!很幸运,但是也不幸运,我来到了一 ...

  4. C++学习--入口函数

    在学习第一个C++程序的时候发现控制台程序的入口函数是int _tmain而不是main,查了资料才发现_tmain()是为了支持unicode所使用的main一个别名,宏定义在<stdafx. ...

  5. NSArray去除重复元素

    直接上代码吧! 1.可以创建一个新的数组,对需要去除重复的数组进行遍历,如果新数组不包含就数组,那么添加元素,如果包含就不添加. NSMutableArray *array = [NSMutableA ...

  6. ubuntun16.0 登陆密码忘记

    1. 开机,如下图所示(没有装虚拟机,手机拍的图片凑合这看把): 2. 此时会有一个选项:Advanced Options for Ubuntu, 选中直接回车 ,如下图: 3. 看到里面有很多选项, ...

  7. 使用pycharm专业版创建虚拟环境

    Location为工程地址 D:\My_python 第二个Location为 虚拟环境放在这个工程下 Base interpreter:基于那个解释器来创建虚拟环境 Create后进入到目录查看下

  8. xshell无法连接Ubuntu的解决办法

    使用workstations14安装完Ubunu后,网络连接方式为NAT模式(N):用于共享主机的IP地址 此时想用xshell连接此虚拟机但是提示连接失败,但是宿主机和虚拟机互相都能ping通,且虚 ...

  9. ASP.NET MVC 全局过滤器（FilterConfig）、标记在控制器上和方法上的筛选器执行顺序

    FilterConfig->控制器上的筛选器-->方法上的筛选器(大-->小,上-->下) 全局-->控制器->个别 尝试的时候记得把返回true protecte ...

  10. 菜鸟的Xamarin.Forms前行之路——绪言

    作者入门时间不是很久,差不多一年,期间自学的东西比较杂乱,到目前为止,编程方面的知识比较薄弱.之所以做这个系列,也只是因为做了两个月的Xamarin.Forms方面的东西,由于资料和自身实力的原因,过 ...