整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS 父元素中的絕對(duì)定位

          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偽類的方式。


          主站蜘蛛池模板: 韩国福利影视一区二区三区| 精品一区二区三区免费 | 中文人妻av高清一区二区| 精品国产鲁一鲁一区二区| 91麻豆精品国产自产在线观看一区| 精品无码一区二区三区在线| 亚洲AV无一区二区三区久久 | 亚洲av日韩综合一区久热| 寂寞一区在线观看| 久久精品国产第一区二区| 日韩AV在线不卡一区二区三区 | 国精品无码一区二区三区在线 | 亚洲国产精品一区二区第一页 | 无码人妻一区二区三区兔费| 亚洲综合无码一区二区| 国产亚洲一区二区在线观看| 上原亚衣一区二区在线观看| 亚洲日本一区二区一本一道| 无码毛片一区二区三区中文字幕| av一区二区三区人妻少妇| 精品一区狼人国产在线| 精品国产日韩亚洲一区91| 国产精品免费视频一区| 国产成人AV区一区二区三| 免费人妻精品一区二区三区| 日韩国产一区二区| 久久精品无码一区二区app| 中文无码AV一区二区三区| 国产亚洲一区二区在线观看| 亚洲日本一区二区三区在线| 91在线一区二区| 色窝窝免费一区二区三区| 日韩三级一区二区| 国产成人精品一区在线| 中文字幕色AV一区二区三区| 一区二区在线观看视频| 免费一本色道久久一区| 亚洲国产成人久久综合一区77| 国产精品一区在线观看你懂的| 国产视频一区在线观看| 久久伊人精品一区二区三区|