一、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. WordPaster-Drupal 7.34-CKEditor4x

    1.1. 集成到drupal 7x-ck4 插件下载:Drupal 7x, 1.1.1. 安装ckeditor4x 下载插件 说明:下载并解压 CKEditor4x插件:https://yunpan. ...

  2. CodeForces 588E A Simple Task(线段树)

    This task is very simple. Given a string S of length n and q queries each query is on the format i j ...

  3. 从Entity Framework的实现方式来看DDD中的repository仓储模式运用

    一:最普通的数据库操作 static void Main(string[] args) { using (SchoolDBEntities db = new SchoolDBEntities()) { ...

  4. Linq转换操作之OfType,Cast,AsEnumerable,ToLookup源码分析

    Linq转换操作之OfType,Cast,AsEnumerable,ToLookup源码分析 一:Tolookup 1. 从方法的注解上可以看到,ToLookup也是一个k,v的形式,那么问题来了,它 ...

  5. 加密--HashPasswordForStoringInConfigFile过时问题

    最近公司在对一套代码进行重构,把原本的web form换成mvc. 刚刚好几天打算开始做下登录,登录则必然会涉及到密码加密的问题. 原本打算用旧的加密方法就行了,哪里知道其中的md5加密出现了这样的问 ...

  6. Linux下卸载删除.Net Core

    最近在技术博客和技术交流群遇到很多小伙伴们在Linux下更新或者安装.Net Core SDK后dotnet命令无法识别等问题,现如下解决: 卸载SDK命令 sudo yum remove dotne ...

  7. Android Get方式发送信息

    程序需要用到Internet权限,所以需要在AndroidManifest.xml添加 <uses-permission android:name="android.permissio ...

  8. 网易严选的wkwebview测试之路

    本文来自网易云社区 作者:孙娇 UIWebView是苹果继承于UIView封装的一个加载web内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作.不过苹果在 ...

  9. Winfrom 桌面弹窗拦截 关闭进程简易程序 源代码下载

    ***********************2019 2.7更新 v 2.0*************************************************** 程序 源代码 交互 ...

  10. 四，Smarty模板技术/引擎-----内建函数

    内建函数是smarty提供的函数,不允许修改,只能被调用: 自定义函数是自己编写函数,注册成为smarty的函数,之后可以被调用. PHP的自建函数很多,讲解下<foreach>和< ...