整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天學(xué)會(huì)html+css，第九天固定定位。
Redmi手機(jī)電視筆記本。
今天的學(xué)習(xí)目標(biāo)是右側(cè)懸浮工具欄用固定定位實(shí)現(xiàn)，它是相對(duì)于瀏覽器窗口的定位方式。
·盒子里的內(nèi)容用a標(biāo)簽，一個(gè)圖片加一行文字，此時(shí)它的位置在最底部。
·然后給它寫上固定定位樣式，右側(cè)距離0，下面距離70像素，加上背景顏色，看下效果。
·開始給a標(biāo)簽寫樣式，固定寬高，text-renderin默認(rèn)下劃線去掉，里面內(nèi)容居中，看下效果。
·圖片寫樣式之前也要加上這行代碼，然后讓它的尺寸變小一點(diǎn)，并且左右居中，看下效果。
·文字的顏色、大小也調(diào)整一下。
·最后給a標(biāo)簽加上邊框、內(nèi)邊距，讓里面內(nèi)容往下挪一挪。
到此，今天的學(xué)習(xí)完成。
1），彈窗及參數(shù)說明
<!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 彈出窗口的文件名，或請(qǐng)求地址
(02) 彈出窗口的名字（不是文件名），非必須，可用空''代替
(03) height=100 窗口高度
(04) width=400 窗口寬度
(05) top=0 窗口距離屏幕上方的像素值
(06) left=0 窗口距離屏幕左側(cè)的像素值
(07) toolbar=no 是否顯示工具欄，yes為顯示
(08) menubar 表示菜單欄
(09) scrollbars 表示滾動(dòng)欄
(10) resizable=no 是否允許改變窗口大小，yes為允許
(11) location=no 是否顯示地址欄，yes為允許
(12) status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），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對(duì)象location屬性是引用Location對(duì)象，它表示該窗口顯示文檔的URL
window.location.href="page1.jsp"; //當(dāng)前窗口顯示指定頁面
window.close(); //關(guān)閉本頁面（4），窗口與父窗口通信
對(duì)于使用CSS屬性使得元素水平垂直居中問題，基本是在前端面試問題中必問的一個(gè)問題。由于這個(gè)問題的回答要分好幾種情況，我也會(huì)寫幾篇文章分別講述。
今天這篇文章我們首先看看，只有一個(gè)元素的時(shí)候采用絕對(duì)定位如何實(shí)現(xiàn)水平垂直居中的。
我已經(jīng)將代碼放到github上，感興趣的同學(xué)可以去看看。
https://github.com/zhouxiongking/article-pages/blob/master/articles/position-center/position-absolute-center.html
CSS
我們假定頁面只有一個(gè)div元素，目的是通過CSS屬性控制該div元素的水平垂直居中。
因?yàn)檫@篇文章講述的是絕對(duì)定位方法，因此要將div的position設(shè)置為absolute。為了讓div的水平垂直居中看起來更形象，我們添加border屬性。
通用屬性
接下來我們看看兩種實(shí)現(xiàn)方法吧。
在方法1中，我們首先需要使用margin: auto;在普通內(nèi)容流中，margin: auto;相當(dāng)于margin-top:0;margin-bottom:0。
其次因?yàn)閐iv已經(jīng)被設(shè)置為absolute，脫離文檔流，因此可以方便設(shè)置left，top，right，bottom四個(gè)值。
將left，top，right，bottom四個(gè)之都設(shè)置為0，瀏覽器會(huì)重新分配一個(gè)邊界框，這樣整個(gè)元素就會(huì)填充body所有可用空間。
為了讓元素能呈現(xiàn)水平垂直居中的狀態(tài)，必須給div元素設(shè)置高度和寬度，添加height和width屬性。
通過以上描述，我們可以得到以下的CSS屬性。
css屬性
通過在頁面上測試，我們可以得到以下的效果。而且不管瀏覽器窗口大小怎么變化，這個(gè)div元素始終是水平垂直居中的狀態(tài)。
方法1效果圖
方法2更好理解一些，首先給div設(shè)定高度和寬度。
由于position設(shè)置為absolute;給div設(shè)定left和top屬性都為50%
最后將div的margin-left和margin-top設(shè)置為寬度和高度的一半。
通過以上描述，得到以下的CSS代碼。
CSS代碼
通過在頁面上測試，我們可以得到以下效果圖。而且不管瀏覽器窗口大小怎么變化，這個(gè)div元素始終是水平垂直居中的狀態(tài)。
方法2效果圖
上述兩種方法的CSS屬性都未曾使用CSS3特性，因此不用擔(dān)心兼容性問題。
兩種方法均只需要這一個(gè)類，就可實(shí)現(xiàn)在任何內(nèi)容塊的水平垂直居中。
是否設(shè)置padding值對(duì)居中效果沒有影響
元素必須設(shè)置高度和寬度，不設(shè)置的話將不會(huì)有任何效果。
由于必須設(shè)置高度，相當(dāng)于定高，因此為了防止內(nèi)容邊界溢出，一般需要設(shè)置overflow屬性。
方法的優(yōu)點(diǎn)很明顯，效果也很容易達(dá)到；但是方法缺點(diǎn)也是很明顯的，因?yàn)橛泻芏嘣囟嘉幢厥嵌ǜ吆投▽挼摹？偟膩碚f還是應(yīng)該看看實(shí)際應(yīng)用場景。
今天這篇文章只是講解了，使用絕對(duì)定位讓元素水平垂直居中。后面會(huì)繼續(xù)講解其他元素水平垂直居中的情況，敬請(qǐng)期待吧。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
