一、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. 32 取一个整数a从右端开始的4-7位

    题目:取一个整数a从右端开始的4-7位 public class _032FetchDigit { public static void main(String[] args) { fetchDigi ...

  2. Alpha冲刺（八）

    Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修 ...

  3. IIC接口总线

    转载:http://www.eefocus.com/article/08-07/48416s.html图11-1给出一个由MCU作为主机,通过IIC总线带3个从机的单主机IIC总线系统.这是最常用.最 ...

  4. [LeetCode 题解]: Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...

  5. Arduino I2C + 温湿度传感器AM2321

    (2015.5.17:本日志的内容有所更新,参见<使用Arduino Wire Library读取温湿度传感器AM2321>.) AM2321是广州奥松电子生产的数字式温湿度传感器.虽是国 ...

  6. Data Base Mysql迁移到SqlServer 2008工具使用方法

    Data Base  Mysql迁移到SqlServer 2008工具使用方法 一.下载及安装: 二.

  7. IO模型《六》IO模型比较分析

    IO模型比较分析 到目前为止,已经将四个IO Model都介绍完了.现在回过头来回答最初的那几个问题:blocking和non-blocking的区别在哪,synchronous IO和asynchr ...

  8. link和@import的区别是什么 ？

    1.link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS. 2.link引入CSS是,在页面载入时间同时加载:@import页面网页完全 ...

  9. [USACO17DEC]Standing Out from the Herd（广义后缀自动机）

    题意 定义一个字符串的「独特值」为只属于该字符串的本质不同的非空子串的个数.如 "amy" 与 “tommy” 两个串,只属于 "amy" 的本质不同的子串为 ...

  10. Shell中反引号和$()的区别

    Shell中可以用来实现变量代换的命令有两种,一种是由反引号括起来的一条命令另一种是由$()括起来一条命令,shell先执行这条命令,然后见输出结果立刻代换到当前命令行中. 例如定义一个变量存放dat ...