整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

十天学会html+css第九天 悬浮窗口固定定位 #网站

天学会html+css,第九天固定定位。

Redmi手机电视笔记本。

今天的学习目标是右侧悬浮工具栏用固定定位实现,它是相对于浏览器窗口的定位方式。

·盒子里的内容用a标签,一个图片加一行文字,此时它的位置在最底部。

·然后给它写上固定定位样式,右侧距离0,下面距离70像素,加上背景颜色,看下效果。

·开始给a标签写样式,固定宽高,text-renderin默认下划线去掉,里面内容居中,看下效果。

·图片写样式之前也要加上这行代码,然后让它的尺寸变小一点,并且左右居中,看下效果。

·文字的颜色、大小也调整一下。

·最后给a标签加上边框、内边距,让里面内容往下挪一挪。

到此,今天的学习完成。

1),弹窗及参数说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="打开新窗口" onclick="openNewWin()" />
	
</body>
<script type="text/javascript">

	function openNewWin() {
		
		var openWindow = window.open("newTest.html",
			"弹到新窗口",
			"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
		
	}
	
	/***
		(00) window.open    弹出新窗口的命令
		(01) newTest.html   弹出窗口的文件名,或请求地址
		(02) 弹出窗口的名字(不是文件名),非必须,可用空''代替
		(03) height=100     窗口高度
		(04) width=400      窗口宽度
		(05) top=0          窗口距离屏幕上方的像素值
		(06) left=0         窗口距离屏幕左侧的像素值
		(07) toolbar=no     是否显示工具栏,yes为显示
		(08) menubar        表示菜单栏
		(09) scrollbars     表示滚动栏
		(10) resizable=no   是否允许改变窗口大小,yes为允许
		(11) location=no    是否显示地址栏,yes为允许
		(12) status=no      是否显示状态栏内的信息(通常是文件已经打开),yes为允许
	***/
	
</script>
</html>

(2),弹窗并居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="弹出的窗口居中" onclick="testOpenCenterWindow()" />
	
</body>
<script type="text/javascript">

	function testOpenCenterWindow() {
		
		// 窗口垂直位置水平位置
		var iTop = (window.screen.availHeight - 30 - 500) / 2;
		var iLeft = (window.screen.availWidth - 10 - 800) / 2; //减width
		var openWindow = window.open("newTest.html"
			,"测试弹窗口并居中"
			,"height=500, width=800, top="+ iTop
			+", left="+ iLeft
			+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
				);
	}
	
</script>
</html>

(3),窗口 location属性

window对象location属性是引用Location对象,它表示该窗口显示文档的URL
window.location.href="page1.jsp";  //当前窗口显示指定页面
window.close();                                 //关闭本页面

(4),窗口与父窗口通信

对于使用CSS属性使得元素水平垂直居中问题,基本是在前端面试问题中必问的一个问题。由于这个问题的回答要分好几种情况,我也会写几篇文章分别讲述。

今天这篇文章我们首先看看,只有一个元素的时候采用绝对定位如何实现水平垂直居中的。

我已经将代码放到github上,感兴趣的同学可以去看看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/position-center/position-absolute-center.html

CSS

场景

我们假定页面只有一个div元素,目的是通过CSS属性控制该div元素的水平垂直居中。

因为这篇文章讲述的是绝对定位方法,因此要将div的position设置为absolute。为了让div的水平垂直居中看起来更形象,我们添加border属性。

通用属性

接下来我们看看两种实现方法吧。

方法1

在方法1中,我们首先需要使用margin: auto;在普通内容流中,margin: auto;相当于margin-top:0;margin-bottom:0。

其次因为div已经被设置为absolute,脱离文档流,因此可以方便设置left,top,right,bottom四个值。

将left,top,right,bottom四个之都设置为0,浏览器会重新分配一个边界框,这样整个元素就会填充body所有可用空间。

为了让元素能呈现水平垂直居中的状态,必须给div元素设置高度和宽度,添加height和width属性。

通过以上描述,我们可以得到以下的CSS属性。

css属性

通过在页面上测试,我们可以得到以下的效果。而且不管浏览器窗口大小怎么变化,这个div元素始终是水平垂直居中的状态。

方法1效果图

方法2

方法2更好理解一些,首先给div设定高度和宽度。

由于position设置为absolute;给div设定left和top属性都为50%

最后将div的margin-left和margin-top设置为宽度和高度的一半。

通过以上描述,得到以下的CSS代码。

CSS代码

通过在页面上测试,我们可以得到以下效果图。而且不管浏览器窗口大小怎么变化,这个div元素始终是水平垂直居中的状态。

方法2效果图

方法优点

  1. 上述两种方法的CSS属性都未曾使用CSS3特性,因此不用担心兼容性问题。

  2. 两种方法均只需要这一个类,就可实现在任何内容块的水平垂直居中。

  3. 是否设置padding值对居中效果没有影响

方法缺点

  1. 元素必须设置高度和宽度,不设置的话将不会有任何效果。

  2. 由于必须设置高度,相当于定高,因此为了防止内容边界溢出,一般需要设置overflow属性。

方法的优点很明显,效果也很容易达到;但是方法缺点也是很明显的,因为有很多元素都未必是定高和定宽的。总的来说还是应该看看实际应用场景。

结束语

今天这篇文章只是讲解了,使用绝对定位让元素水平垂直居中。后面会继续讲解其他元素水平垂直居中的情况,敬请期待吧。