zoukankan      html  css  js  c++  java
  • display和overflow

    一、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;
    				
    				/*为其设置一个宽和高*/
    				 500px;
    				height: 500px;
    			}
    			
    			.box{
    				 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{
    				 200px;
    				height: 200px;
    				background-color: #bfa;
    				/*
    				 * 子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小
    				 * 	如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容
    				 *  父元素默认是将溢出内容,在父元素外边显示,
    				 * 	通过overflow可以设置父元素如何处理溢出内容:
    				 * 		可选值:
    				 * 			visible,默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示
    				 * 			hidden, 溢出的内容,会被修剪,不会显示
    				 * 			scroll, 会为父元素添加滚动条,通过拖动滚动条来查看完整内容
    				 * 					该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条
    				 * 			auto,会根据需求自动添加滚动条,
    				 * 						需要水平就添加水平
    				 * 						需要垂直就添加垂直
    				 * 						都不需要就都不加
    				 */
    				overflow: auto;
    			}
    			
    			.box2{
    				 100px;
    				height: 500px;
    				background-color: red;
    			}		
    		</style>
    	</head>
    	<body>
    		<div class="box1">
    			在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。
    这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。
    我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。
    枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。
    鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。
    哇的一声,夜游的恶鸟飞过了。
    我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。
    后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。
    猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。
    我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。
    一九二四年九月十五日。 
    		</div>	
    	</body>
    </html>
    
  • 相关阅读:
    Team Queue(队列)
    括号匹配(栈+贪心)
    string操作
    树状数组优化+dp
    最短路径变形(最大值的最小值)
    D. Ehab the Xorcist(异或和关系)
    2019 计蒜之道 第五场 A(set的应用)
    2019 计蒜之道 第三场 D(找规律+欧拉降幂)
    hdu 3507 Print Article(斜率优化dp入门题)
    oj 26319 最大子序和
  • 原文地址:https://www.cnblogs.com/xidian2014/p/10761807.html
Copyright © 2011-2022 走看看