一、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. 【转载】Redis sort 排序命令详解

    转载地址:http://www.jb51.net/article/69131.htm 本文介绍redis排序命令 redis支持对list,set,sorted set元素的排序 sort 排序命令格 ...

  2. 【转载】rabbitmq的发布确认和事务

    地址:https://my.oschina.net/lzhaoqiang/blog/670749 摘要: 介绍confirm的工作机制.使用spring-amqp介绍事务以及发布确认的使用方式.因为事 ...

  3. Java Decompiler(Java反编译工具)

    参考:http://blog.csdn.net/yulei_qq/article/details/24175547 Java Decompiler可以对整个jar包进行反编译,也可以将其集成到ecli ...

  4. 通过面试题学习零散知识：Java面试题整理

     一.如何看待面试题 对于喜欢学习的开发者来说,我们抛开工作和生活的时间,剩余的时间并不多,如果都用于学习的话,也不可能学的下所有感兴趣的技术点,精力也跟不上,我是深感如是.而面试题一般都是零碎的知识 ...

  5. 搭建python+PyQt+Eric平台

    搭建python+PyQt+Eric平台 预备安装程序: 2.1.下载Python3.2 官方网站:http://www.python.org/ 下载地址:http://www.python.org/ ...

  6. LightOJ 1044 Palindrome Partitioning(简单字符串DP)

    A palindrome partition is the partitioning of a string such that each separate substring is a palind ...

  7. Discuz!和jQuery冲突的解决办法

    Common.js是官方自带的,我没改过它,所以不可能出错,所以问题就应该是两者冲突了.导致的结果我也发现了,前台的DIY功能不能用了.   我还花了很多时间在那里研究冲突的地方,后来还是没能解决.之 ...

  8. ASP .Net Core 2.0 修改默认端口

    ASP .Net Core 的默认端口是5000,如果想在同一台服务器上运行多个实例,就不能都监听5000端口了,需要每一个实例都监听不同的端口.当然,如果您正在使用IIS或者Jexus来托管,可以不 ...

  9. 一步一步教你如何制件 ZKEACMS 的扩展组件/插件

    前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...

  10. WordCloud 简介

    WordCloud 简介 GitHub GitHub:https://github.com/amueller/word_cloud example:https://github.com/amuelle ...