亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 37
粉絲 0
評(píng)論 0
訪問量 43380
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
定位的類型與應(yīng)用
手機(jī)用戶1607314868
原創(chuàng)
1525人瀏覽過

浮動(dòng)的本質(zhì)

浮動(dòng)本質(zhì)是為了解決圖文并排顯示的問題
浮動(dòng)要解決的兩個(gè)問題：
1.浮動(dòng)元素的高度對(duì)于它的包含塊不可見
2.浮動(dòng)元素可以BFC塊使它不影響到后面的元素布局
左浮動(dòng)：float:left; 右浮動(dòng)：float:right;
清除浮動(dòng)：clear:both;

定位的種類

定位的屬性是position
定位類型：靜態(tài)定位static,相對(duì)定位relative,絕對(duì)定位absolute,固定定位fixed。

  1. 靜態(tài)定位，”position:static” 是默認(rèn)定位
  2. 相對(duì)定位：relative 相對(duì)于該元素在文檔流中的原始位置進(jìn)行偏移
    不脫離文檔流，原來(lái)位置留下空白，如果想要盒子偏離自己原本的位置，卻保留在文檔流中，可以使用relative
  3. 絕對(duì)定位：absolute 相對(duì)于它的祖先中離它最近的‘定位元素’的位置發(fā)生偏移。會(huì)脫離文檔流
  • 定位元素：只要這個(gè)元素中有position：relative 或者 position：absolute就稱為定位元素
  • 如果祖先中沒有定位元素，就參考根元素html定位
    如果我們想實(shí)現(xiàn)一個(gè)子元素，在父元素內(nèi)部水平居中，那么父元素可以設(shè)置為relative，子元素設(shè)置為absolute
  1. 固定定位：position:fixed 絕對(duì)定位的一個(gè)特例,參考對(duì)象是瀏覽器。當(dāng)需要一個(gè)元素在固定不變的位置時(shí)，就是用固定元素。

模態(tài)框案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>模態(tài)框</title>
  7.     <style>
  8.       *{
  9.           margin: 0;
  10.           padding: 0;
  11.           box-sizing: border-box;
  12.       }
  13.       header{
  14.           background-color: lightgreen;
  15.           padding: 0.5em 2em;
  16.           overflow: hidden;
  17.       }
  18.       header h2{
  19.           float: left;
  20.       }
  21.       header button{
  22.           float: right;
  23.           width: 10em;
  24.           height: 2.5em;
  25.       }
  26.      .modal .modal-backdrop{
  27.          background-color: rgb(0,0,0,0.5);
  28.          position: fixed;
  29.          top: 0;
  30.          bottom: 0;
  31.          left: 0;
  32.          right: 0;
  33.      }
  34.      .modal .modal-body{
  35.         padding: 1em;
  36.         min-width: 25em;
  37.         border: 1px solid #000;
  38.          background: linear-gradient(to right, lightcyan, #fff);
  39.          position: fixed;
  40.          top:10em;
  41.          left:30em;
  42.          right: 30em;
  43.      }
  44.      .modal form table {
  45.             width: 80%;
  47. }
  49. .modal form table caption {
  50.     font-weight: bold;
  51.     margin-bottom: 1em;
  52. }
  53. .modal form table {
  54.    text-align: center;
  55. }
  56.      .modal-body{
  57.          position: relative;
  58.      }
  59.      .modal-body .close{
  60.          position: absolute;
  61.          width: 4em;
  62.          height: 2em;
  63.          top: 1em;
  64.          right: 1em;
  65.      }
  67.     .modal{
  68.         display: none;
  69.     } 
  70.     </style>
  71. </head>
  72. <body>
  73.     <header>
  74.         <h2>php中文網(wǎng)</h2>
  75.         <button>消息</button>
  76.     </header>
  77.     <div class="modal">
  78.      <div class="modal-backdrop"></div>
  79.      <div class="modal-body">
  80.          <button class="close">關(guān)閉</button>
  81.          <form action="">
  82.              <table>
  83.              <caption>消息列表</caption>
  84.              <tr>
  85.                  <th>系統(tǒng)消息</th><th>好友消息</th>
  86.             </tr>
  87.              <tr>
  88.                  <td>xxxxx</td><td>yyyyy</td>
  89.             </tr>
  90.         </table>
  91.          </form>
  92.      </div>
  94.     </div>
  95.     <script>
  96.         const btn = document.querySelector('header button');
  97. const modal = document.querySelector('.modal');
  98. const close = document.querySelector('.close');
  100. btn.addEventListener('click', setModal, false);
  101. close.addEventListener('click', setModal, false);
  103. function setModal(ev) {
  104.     ev.preventDefault();
  105.     let status = window.getComputedStyle(modal, null).getPropertyValue('display');
  106.     modal.style.display = status === 'none' ? 'block' : 'none';
  107. }
  108.     </script>
  109. </body>
  110. </html>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：彈層有點(diǎn)任性了
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)