2020-12-07

最新推荐文章于 2024-11-08 06:12:14 发布

wzx_2725259197

最新推荐文章于 2024-11-08 06:12:14 发布

阅读量70

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wzx_2725259197/article/details/110790526

版权

HTML中position能够实现网页页面中的一部分不随着页面的下拉而移动

任何标记样式都有position而且默认属性是static

定位距离使用right，left ，top和bottom在div标签中的style中进行设置

下面代码中将蓝色方块定位到据右边界10px，下边界30px的距离

<div style="border: 1px solid red ;width: 300px;height: 300px;">
			<div class="in" style="background-color: greenyellow;"></div>
			<div class="in" style="background-color: cornflowerblue;position: fixed;right: 10px; bottom: 30px;"></div>
			<div class="in" style="background-color: lightgoldenrodyellow;"></div>
		</div>

relative不会使当前标记脱离文档流而是相对于原来文字定位

<div style="border: 1px solid red ;width: 300px;height: 300px;">
			<div class="in" style="background-color: greenyellow;"></div>
			<div class="in" style="background-color: cornflowerblue; position: relative;bottom: 10px;"></div>
			<div class="in" style="background-color: lightgoldenrodyellow;"></div>
		</div>

absolute会使当前标记脱离文档流相对于最近的且position为非static的父标记定位

<div style="border: 1px solid red ;width: 300px;height: 300px; position: relative;">
			<div class="in" style="background-color: greenyellow;"></div>
			<div class="in" style="background-color: cornflowerblue;position: absolute;bottom: 10px;"></div>
			<div class="in" style="background-color: lightgoldenrodyellow;"></div>
	    </div>

margin用于调整与其他标记之间的距离，只能用于块级元素

margin简写只输入一个值时上右下左相同，输入两个值时上下左右相同，输入三个值时第一个值是上

第二个值是左右第三个值是下，输入四个值时顺时针上右下左

margin: 10px 20px;

padding用于调整标记内元素距离边界的间距

<style type="text/css">
			div{background-color: cornflowerblue;}
			span{background-color: greenyellow;}
			div{
				background-color: yellowgreen;
				padding: 10px 20px 10px 30px;
				margin: 10px 20px;
			}
		</style>

hower能够使网页中的文字在鼠标指针浮动到上面时，在标签内选择文字的链接，可以进行文字的超链接，链接到其他网页

p:hover{ color: #f50;
			         text-decoration: underline;}

<body>
		<p href="https://tv.cctv.com/epg/index.shtml?spm=C31267.PFsKSaKh6QQC.EEfEAhEnQFPl.3">00:19	人口-2020-47</p>
	    <p href="https://tv.cctv.com/epg/index.shtml?spm=C31267.PFsKSaKh6QQC.EEfEAhEnQFPl.3">00:48	生活提示</p>
		<p href="https://tv.cctv.com/epg/index.shtml?spm=C31267.PFsKSaKh6QQC.EEfEAhEnQFPl.3">00:52	动物世界-2020-195</p>
		<p href="https://tv.cctv.com/epg/index.shtml?spm=C31267.PFsKSaKh6QQC.EEfEAhEnQFPl.3">01:23	晚间新闻</p>
		<p href="https://tv.cctv.com/epg/index.shtml?spm=C31267.PFsKSaKh6QQC.EEfEAhEnQFPl.3">01:55	正大综艺-动物来啦2020-39</p>
		<p href="https://tv.cctv.com/epg/index.shtml?spm=C31267.PFsKSaKh6QQC.EEfEAhEnQFPl.3">02:45	精彩一刻-2020-191新航拍中国河北城郭</p>
	</body>