h5 bug 小结

最新推荐文章于 2022-06-24 14:27:13 发布

原创最新推荐文章于 2022-06-24 14:27:13 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了CSS中使用inline-block和float实现水平布局的方法，并对比了它们与position属性的区别。通过实例展示了不同属性在实际应用中的效果。

Hbuilder快捷键

div.list{$}*5
ul>li*5>a[href="###"]{按钮$}

inline-block 区别 float##

inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，
即使高度小的元素周围留空，也不回有第二行元素上浮补位。让水平间隙消失就是在父级上加font-size:0;
ex:
	<style type="text/css">
		#myDiv{
			width: 500px;
			height: 300px;
			background: green;
		}
		#myDiv_1{
			width: 200px;
			height: 150px;
			background: palegoldenrod;
			display: inline-block;*********
		}
		#myDiv_2{
			width: 200px;
			height: 100px;
			background: firebrick;
			display: inline-block;
		}
		#myDiv_3{
			width: 10px;
			height: 20px;
			background: fuchsia;
			display: inline-block;
			
		}
	</style>
	</head>
	<body>
		<div id="myDiv">
			<div id="myDiv_1"></div>
			<div id="myDiv_2"></div>
			<div id="myDiv_3"></div>
		</div>
	</body>

float: 
让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，
而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。

float 区别 position##

float:不是完全脱离文本流, 而且底部的文字, 会环绕当前标签, 为了防止文字被挡住
position: 彻底脱离文本流, 会挡住后面的东西
ex:
<style>
	#content {
		width: 500px;
		height: 500px;
		background-color: black;
	}
	
	#one {
		width: 100px;
		height: 100px;
		background-color: yellow;
		/*float: left;*/
		position: absolute;
	}
	
	#two {
		width: 200px;
		height: 400px;
		background-color: green;
		color: white;
	}
</style>
</head>

<body>
<div id="content">
	<div id="one">

	</div>
	<div id="two">
		1231321321我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是
	</div>
</div>
</body>

小知识点##


 1. 复制本页链接
 <input type="text"  id="url" value="http://www.baid.com/">
 
<input type="button" value="copy" onClick="url.select();
	document.execCommand('Copy')">
	
 2. 自定义字体
	@font-face { 
		font-family: "于洪亮硬笔行楷"; 
		src: url("fonts/于洪亮硬笔行楷.ttf"); 
	}     
	#content{	
	    font-family: "于洪亮硬笔行楷"; 		
	}
	
 3.	input 禁止粘贴
	身份证号：<input type="text" />  
	重复输入<input type="text" 
	onpaste="alert('禁止粘贴');return false;" />
	//return false是主要的作用 

 4.文字太长以省略号显示
 
	 .text {
			text-overflow: ellipsis;
			white-space: nowrap; 
			overflow: hidden;
		}

	white-space是设置文本不换行，overflow设置标签超出部分自动隐藏