天学会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中,我们首先需要使用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更好理解一些,首先给div设定高度和宽度。
由于position设置为absolute;给div设定left和top属性都为50%
最后将div的margin-left和margin-top设置为宽度和高度的一半。
通过以上描述,得到以下的CSS代码。
CSS代码
通过在页面上测试,我们可以得到以下效果图。而且不管浏览器窗口大小怎么变化,这个div元素始终是水平垂直居中的状态。
方法2效果图
上述两种方法的CSS属性都未曾使用CSS3特性,因此不用担心兼容性问题。
两种方法均只需要这一个类,就可实现在任何内容块的水平垂直居中。
是否设置padding值对居中效果没有影响
元素必须设置高度和宽度,不设置的话将不会有任何效果。
由于必须设置高度,相当于定高,因此为了防止内容边界溢出,一般需要设置overflow属性。
方法的优点很明显,效果也很容易达到;但是方法缺点也是很明显的,因为有很多元素都未必是定高和定宽的。总的来说还是应该看看实际应用场景。
今天这篇文章只是讲解了,使用绝对定位让元素水平垂直居中。后面会继续讲解其他元素水平垂直居中的情况,敬请期待吧。
*请认真填写需求信息,我们会在24小时内与您取得联系。