如何使html中的din居中,HTML+CSS－－position大法好
其實在HTML和CSS的學(xué)習(xí)中，css的position屬性應(yīng)該是難點之一，難在你需要靜下心來仔細(xì)搞清楚它的每一個值的意義、效果和用法。但是它的功能很強(qiáng)大，效果也是很令人驚艷的，因為你可以用它去實現(xiàn)一些float很難去實現(xiàn)的定位效果，比如下圖：
等等，今天我們就以第一個圖的樣式為例，講講position的用法。
首先定義一個div，然后在里面插入底層圖片
(其中center-block是Bootstrap自帶的居中類)
CSS定義：
.Service_pic{
margin-top: 100px;
position: relative;
}
.Service_pic_img{
width: 30%;
}
Service_pic類的margin-top設(shè)置只是為了讓它與頂部有一定的距離，這樣比較美觀。Service_pic_img的寬度定義則是為了讓圖片寬度變成總div寬度的30%，height則隨著圖片寬度大小按比例縮放。這里的Service_pic還設(shè)置了position屬性，其屬性值為relative。
那么這里我們要說明一下，position屬性的默認(rèn)值是static，就是說當(dāng)你沒有定義position屬性的值的時候，元素的position值就是static。
官方解釋static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。也就是說你不能給position：static的元素定義top, bottom, left, right 或者 z-index 屬性，它們是無效的。
官方解釋relative：
生成相對定位的元素，相對于其正常位置進(jìn)行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
也就是說當(dāng)你不給position：relative定義top, bottom, left, right值的時候，它跟原來的位置是沒有任何區(qū)別的。
那么我們這里是給外面的div定義了一個position：relative的值的，但是卻沒有給出其?top, bottom, left, right 或者 z-index 屬性定義，這是為什么呢？后面你就知道了哈哈
這里要注意的一點是relative是不脫離文檔流的，也就是說無論你把它移動到哪里，它原有的位置還是會留著的。
生成效果如下圖：
然后當(dāng)然就是把圖片文字啥的加進(jìn)去，代碼如下：
0 1
需求分析
效果如下圖：
最后當(dāng)然是來調(diào)整最后的樣式啦，代碼如下：
.step1{
font-family: DIN Condensed;
color: #494949;
}
.step1_num{
position: absolute;
top:-0.1%;
left: 60.4%;
color: white;
font-size: 4rem;
}
.step1_header{
position: absolute;
top:0.2%;
left: 68%;
font-size: 2.5rem;
}
.step1_img{
position: absolute;
top:-4%;
left: 21.6%;
width: 19%;
}
其中step1類是最外層的div，定義字體的樣式和顏色。
step1_num?類定義的是數(shù)字
的位置與樣式，字體大小和顏色這些我們就先不說了，我們來說說position: absolute。
官方解釋?absolute：
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
通過上文我們知道，position的默認(rèn)值是static，那么也就是說，absolute只會根據(jù)非static的第一個父元素進(jìn)行定位。舉例則為，h3 .step1_num采用了position: absolute，而它的父元素div .step1是采用position默認(rèn)值static的，所以h3?.step1_num并不會相對div .step1進(jìn)行定位。所以h3 .step1_num會繼續(xù)向他的上一級父元素查找，直到找到div .Service_pic這個采用position: relative;定位的父元素以后，h3 .step1_num才會根據(jù)他定位。否則它就一直查找上去，如果最終還是沒找到position不為static的元素，就以瀏覽器窗口為基準(zhǔn)定位。再貼一下代碼你們自己琢磨一下：
0 1
需求分析
所以一開始我們把最外層的div .Service_pic設(shè)置成position: relative;是因為我們想讓其中的內(nèi)容(div .step1)根據(jù)這個div .Service_pic的位置進(jìn)行定位而不是最外層的瀏覽器窗口，這樣子當(dāng)窗口和圖片都縮放的時候才不會產(chǎn)生錯位。
div .Service_pic采用position: relative;的原因是?relative相對于其正常位置進(jìn)行定位，而我們并不需要div .Service_pic有任何位移，只需要它呆在原來的地方，為它的子元素提供一個定位的基準(zhǔn)。
那你可能會問干嘛那么麻煩，直接把div .step1設(shè)置成position: relative;不就好了嘛。但是你別忘了position: relative;是不脫離文本流的，下面幾個白大洞這樣好看？
對這里還要說position: absolute是脫離文本流的，也就是正常文本中并不會為它保留位置，有點像float但又比float好控制。
然后效果如下圖：
(位置和大小只能自己慢慢調(diào)整一下咯)
這個頁面的后幾步內(nèi)容與方法大體相同，這里不再贅述。
position一共有五種值：absolute、relative、static、inherit、fixed
前面三種我們一般用的比較多，前面也介紹過了，最后來說說inherit與fixed
fixed：
生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
position屬性的fixed值比較煩，我們在很多網(wǎng)站上看到那種往下拉滑動條還在同一個位置的小廣告就是用它做的，因為它根據(jù)瀏覽器窗口進(jìn)行定位，所以無論內(nèi)容如何改變它的位置都是不能動搖的。
inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
inherit其實沒啥好說的，它父元素的position是啥值它就是啥值。
今天的分享就到這里！每天進(jìn)步多一點，每天都有好心情！
css position的使用
css position的使用 css 的 position 屬性是用來設(shè)置元素的位置的,它還能設(shè)置一個元素出現(xiàn)在另一個元素的下層元素能用 top,bottom,left 和 right 屬性設(shè)置位置 ...
CSS position絕對定位absolute relative
常常使用position用于層的絕對定位,比如我們讓一個層位于一個層內(nèi)具體什么位置,為即可使用position:absolute和position:relative實現(xiàn). 一.position語法與結(jié) ...
jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position
定位應(yīng)用:點擊一個按鈕,然后在按鈕的右邊彈出一個提示框 1,提示框相對于屏幕進(jìn)行定位,那么使用offset來取得當(dāng)前按鈕相對于body的top和left,然后通過$('body').prepend(t ...
[CSS]position定位
CSS position 屬性 通過使用?position 屬性,我們可以選擇 4 種不同類型的定位,這會影響元素框生成的方式. position 屬性值的含義: static 元素框正常生成.塊級元 ...
jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法:
CSS position(定位)屬性
關(guān)于CSS position,來自MDN的描述: CSS position屬性用于指定一個元素在文檔中的定位方式.top.right.bottom.left?屬性則決定了該元素的最終位置. 然后來看看 ...
CSS position &;居中(水平，垂直)
css position是個很重要的知識點: 知乎Header部分: 知乎Header-inner部分: position屬性值: fixed:生成絕對定位的元素,相對瀏覽器窗口進(jìn)行定位(位置可通過: ...
CSS position屬性absolute relative等五個值的解釋
DIV CSS?position絕對定位absolute relative教程篇 常常使用position用于層的絕對定位,比如我們讓一個層位于一個層內(nèi)具體什么位置,為即可使用position:abs ...
前端開發(fā)必知必會：CSS Position 全解析
此文根據(jù)Steven Bradley的所譯,整個譯文帶有我自己的理解與思想,如果譯得不好或不對之處 ...
jquery 獲取css position的值
jquery 獲取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示
總結(jié)
以上是生活随笔為你收集整理的如何使html中的din居中,HTML+CSS－－position大法好的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 乐享计算机会计学院,EMBA
- 下一篇： 服务器不响应Ajax,web前端：解决在