整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
position屬性實(shí)現(xiàn)絕對(duì)定位
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%;
height:100%;
}
#block{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute; /* absolute絕對(duì)定位 */
left:20px; /* 塊的左邊框離頁(yè)面左邊界20px */
top:40px; /* 塊的上邊框離頁(yè)面上邊界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>以上的代碼我們可以看出父塊#father沒(méi)有設(shè)置position屬性,而子塊#block采用的是絕對(duì)定位,經(jīng)過(guò)測(cè)試發(fā)現(xiàn)子塊#block參照瀏覽窗口左上角
為原點(diǎn),子塊左邊框相對(duì)頁(yè)面<body>左邊的距離為20px,子塊的上邊框相對(duì)頁(yè)面<body>上面的距離為40px
為父塊這是position屬性
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
position:relative;
width:100%;
height:100%;
}我們發(fā)現(xiàn)子塊的參照物為父塊的#father,距左側(cè)20px,距上端40px
注意top、right、bottom、left這4個(gè)CSS屬性，它們都是配合position屬性使用的，表示的是塊的各個(gè)邊界離頁(yè)面邊框(position設(shè)置為absolute時(shí))
或者原來(lái)的位置(position設(shè)置為relative)的距離。只有當(dāng)position屬性設(shè)置為absolute或者relative時(shí)才能生效；
用position屬性實(shí)現(xiàn)相對(duì)定位
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%; height:100%;
padding:5px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相對(duì)定位 */
left:15px; /* 子塊的左邊框距離它原來(lái)的位置15px */
top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>我們可以看到字塊的左邊框相對(duì)于其父塊的左邊框(它原來(lái)所在的位置)距離為15px,上邊框也是一樣的道理,為10%;
理解"它原來(lái)的位置":子塊和父塊原先的位置的是一致的(因?yàn)楦笁K包含字塊,視覺(jué)上看是幾乎重疊的)
此時(shí)子塊的寬度依然是未移動(dòng)前的寬度,撐滿未移動(dòng)前父塊的內(nèi)容。只是由于向右移動(dòng)了，因此右邊框超出了父塊。
如果希望子塊的寬度僅僅為其內(nèi)容加上自己的padding值，可以將它的float屬性設(shè)置為left，或者指定其寬度width；
案例: 文本在圖片上顯示
看下問(wèn)題的截圖：
大家可以先想一想
下面是我總結(jié)的方法：
方法一：子元素浮動(dòng)float:left；（考慮脫離文檔流后后面元素不易控制，故不首選）
方法二：子元素：display: inline-block; --->會(huì)有空隙
原因：因?yàn)樾袃?nèi)元素或者行內(nèi)塊元素?fù)Q行后之間會(huì)有一個(gè)間隙只要換行會(huì)有5px的間距--->解決 : 文本不換行
問(wèn)題：https://blog.csdn.net/qq_39189819/article/details/90813184
原理
行內(nèi)元素和行內(nèi)塊元素?fù)Q行后之間會(huì)有一個(gè)間隙
方法三：子元素寫(xiě)display: inline-block; 給父元素寫(xiě)font-size:0; 把所有間距都去了
方法四：彈性盒子是 CSS3 的一種新的布局模式，給父元素加display:flex;是標(biāo)準(zhǔn)文檔流---可以高效的布局 IE10以下不支持
、問(wèn)題：元素浮動(dòng)導(dǎo)致的父元素高度塌陷
父元素在文檔流中高度默認(rèn)是被子元素?fù)伍_(kāi)的，當(dāng)子元素脫離文檔流以后，將無(wú)法撐起父元素的高度，也就會(huì)導(dǎo)致父元素的高度塌陷。父元素的高度一旦塌陷, 所有標(biāo)準(zhǔn)流中元素的位置將會(huì)上移，導(dǎo)致整個(gè)頁(yè)面的布局混亂。
例如：
的效果是：
二、為了解決問(wèn)題，這里先介紹一下浮動(dòng)元素的特點(diǎn)：
（1）元素浮動(dòng)以后會(huì)完全脫離文檔流，浮動(dòng)以后元素會(huì)一直向父元素的最上方移動(dòng)，直到遇到父元素的邊框或者其他的浮動(dòng)元素，會(huì)停止移動(dòng)。
（2）如果浮動(dòng)元素的上邊是一個(gè)塊元素，則浮動(dòng)元素不會(huì)覆蓋塊元素。
（3）浮動(dòng)元素不會(huì)超過(guò)它上邊的浮動(dòng)的兄弟元素，最多一邊齊。
（4）浮動(dòng)元素不會(huì)覆蓋文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周圍，可以通過(guò)浮動(dòng)來(lái)實(shí)現(xiàn)文字環(huán)繞的效果。
（5）塊元素脫離文檔流以后，不會(huì)獨(dú)自占一行，寬度和高度都被內(nèi)容撐開(kāi)。
（6）內(nèi)聯(lián)元素脫離文檔流以后會(huì)變成塊元素
三、解決方法
(1)浮動(dòng)元素后添加<div class="clear"></div>添加清除浮動(dòng)樣式，使用這種方式會(huì)在頁(yè)面中添加多余的結(jié)構(gòu)。
(2)使用after偽類，向父元素后添加一個(gè)塊元素，并對(duì)其清除浮動(dòng)。該種方式的原理和方法一原理一樣，但是不用向頁(yè)面中添加多余的結(jié)構(gòu)。
(3)為父元素添加樣式overflow:hidden。這種方法對(duì)于有子元素有定位并且要求超出父容器范圍的情況不適用。
(4)手動(dòng)為父元素添加高度，需要計(jì)算內(nèi)容的高度，不便于頁(yè)面調(diào)整。
四種方法都可以實(shí)現(xiàn)調(diào)整，調(diào)整后的效果：
這里推薦第二種方法，使用after偽類的方式。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
