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

搜索
博主信息
博文 100
粉絲 8
評論 2
訪問量 173505
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
html盒子模型屬性、定位、計(jì)算大小、獲取寬高及案例
lilove的博客
原創(chuàng)
4280人瀏覽過

一、html盒模型具有3個(gè)重要屬性：

  • margin ：包含 margin-top,margin-left,margin-right,margin-bottom ；

  • border ：可以定義邊框?qū)挾?、邊框線樣式、顏色、形狀等；

  • padding ：包含 padding-top,padding-left,padding-right,padding-bottom ;

在html代碼中是這樣定義的：

  1. <style>
  2.     div {
  3.       width: 100px;
  4.       height: 100px;
  5.       /* 設(shè)置4周外邊距為20px, margin: 20px 20px 20px 20px;的簡寫*/
  6.       margin: 20px;
  7.       /* 設(shè)置邊框?yàn)?px，實(shí)線，黑色 */
  8.       border: 2px solid black;
  9.       /* 設(shè)置4周內(nèi)邊距為10px, padding: 10px 10px 10px 10px;的簡寫*/
  10.       padding: 10px;
  11.       background-color: lightblue;
  12.     }
  13.   </style>
  14.   <body>
  15.     <div>
  16.       盒子
  17.     </div>
  18.   </body>

運(yùn)行效果示意：

二、盒模型大小計(jì)算方式

我們來看一個(gè)盒子模型示意：

其中：

width = 100px

margin = 20px

border = 2px

padding = 10px

  • 盒子內(nèi)容的寬度 = width + (border + padding) * 2 = 124px；
  • 盒子內(nèi)容的高度 = height + (border + padding) * 2 = 124px；

如果增加padding或者border 的值，那么盒子大小會隨之改變；
這樣會影響頁面布局，那么不想讓盒子大小隨屬性變化而變化則需要給盒子樣式增加一個(gè)屬性：

box-sizing: border-box; 重新計(jì)算盒子大小，以邊框?yàn)闇?zhǔn)，布局中會經(jīng)常用到這個(gè)屬性。

  • 常用的html初始化樣式：

* {margin: 0;padding: 0;box-sizing: border-box;}

三、塊元素垂直居中

我們可以利用定位和視口實(shí)現(xiàn)子元素在父元素中的垂直居中

例如：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小剛開發(fā)日志：塊元素垂直居中</title>
  7.   </head>
  8.   <style>
  9.     .box1 {
  10.       width: 200px;
  11.       height: 200px;
  12.       background-color: lightblue;
  13.       /* 水平居中 */
  14.       margin: auto;
  15.       /* 設(shè)置父元素為定位參照 */
  16.       position: relative;
  17.     }
  18.     .box2 {
  19.       width: 100px;
  20.       height: 100px;
  21.       background-color: red;
  22.       /* 左右居中 */
  23.       margin: auto;
  24.       /* 參照父元素調(diào)整位置 */
  25.       position: absolute;
  26.       /* 設(shè)置視口：從父元素的左上頂點(diǎn)到右下頂點(diǎn) */
  27.       top: 0;
  28.       left: 0;
  29.       right: 0;
  30.       bottom: 0;
  31.     }
  32.   </style>
  33.   <body>
  34.     <div class="box1">
  35.       box1
  36.       <div class="box2">box2</div>
  37.     </div>
  38.   </body>
  39. </html>

運(yùn)行效果：

  • 還可以使用flex布局實(shí)現(xiàn)，后續(xù)課程再詳細(xì)解析flex布局。

四、利用javascript獲取元素大?。?/h2>
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .box {
  10.       width: 200px;
  11.       height: 200px;
  12.       background-color: lightcoral;
  13.       padding: 10px;
  14.       margin: 20px;
  15.       border: 2px solid black;
  16.       background-clip: content-box;
  17.     }
  18.   </style>
  19.   <body>
  20.     <div id="box" class="box"></div>
  21.     <div id="box" class="box"></div>
  22.     <div id="box" class="box"></div>
  23.     <div id="box" class="box"></div>
  24.     <div id="box" class="box"></div>
  25.     <div id="box" class="box"></div>
  26.     <div id="box" class="box"></div>
  27.     <div id="box" class="box"></div>
  28.     <div id="box" class="box"></div>
  29.     <div id="box" class="box"></div>
  30.   </body>
  31.   <script>
  32.     const box = document.querySelector("#box");
  33.     // clientWidth = width + 左右padding
  34.     console.log(box.clientWidth);
  35.     // clientHeight = height + 上下padding
  36.     console.log(box.clientHeight);
  37.     // 當(dāng)前視口寬度
  38.     console.log(document.documentElement.clientWidth);
  39.     // 當(dāng)前視口高度
  40.     console.log(document.documentElement.clientHeight);
  41.     // offsetWidth = width + 左右padding + 左右boder
  42.     console.log(box.offsetWidth);
  43.     // offsetHeight = height + 上下padding + 上下boder
  44.     console.log(box.offsetHeight);
  45.     // 獲取定位父級
  46.     console.log(box.offsetParent);
  47.     // 距離定位父級頂部距離
  48.     console.log(box.offsetTop);
  49.     // scrollWidth：獲取指定標(biāo)簽內(nèi)容層的真實(shí)寬度（可視區(qū)域?qū)挾?被隱藏區(qū)域?qū)挾龋?/span>
  50.     console.log(box.scrollWidth);
  51.     // scrollHeight：獲取指定標(biāo)簽內(nèi)容層的真實(shí)高度（可視區(qū)域高度+被隱藏區(qū)域高度）
  52.     console.log(box.scrollHeight);
  53.     // scrollTop：內(nèi)容層頂部 到 可視區(qū)域頂部的距離
  54.     console.log(box.scrollTop);
  55.   </script>
  56. </html>

運(yùn)行結(jié)果

五、使用盒子模型及獲取寬高方式實(shí)現(xiàn)動畫

代碼如下

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小剛的日志：小動畫</title>
  7.   </head>
  8.   <style>
  9.     button {
  10.       width: 50px;
  11.       height: 30px;
  12.     }
  13.     .box {
  14.       width: 200px;
  15.       height: 300px;
  16.       position: absolute;
  17.       top: 50px;
  18.       left: 20px;
  19.     }
  20.     .box img {
  21.       width: 100%;
  22.     }
  23.   </style>
  24.   <body>
  25.     <div class="box"><img src="img.png" alt="刀劍神域" /></div>
  26.     <button>go</button>
  27.     <button>stop</button>
  28.   </body>
  29.   <script>
  30.     const img = document.querySelector(".box");
  31.     const imggo = document.querySelector("button:first-of-type");
  32.     const imgstop = document.querySelector("button:last-of-type");
  34.     // 監(jiān)聽事件
  35.     imggo.addEventListener("click", go);
  36.     imgstop.addEventListener("click", stop);
  38.     // 動畫開始及停止方法
  39.     let timer = null;
  40.     function go() {
  41.       console.log(img.offsetLeft);
  42.       timer = setInterval(function () {
  43.         img.style.left = img.offsetLeft + 10 + "px";
  44.         img.style.top = img.offsetTop + 10 + "px";
  45.       }, 200);
  46.     }
  47.     function stop() {
  48.       clearInterval(timer);
  49.     }
  50.   </script>
  51. </html>

運(yùn)行效果

總結(jié)

  1. 塊級元素3個(gè)重要屬性意義；
  2. 塊級元素使用定位水平垂直居中的方法，特別是垂直居中使用的視口定位方式；
  3. 盒子模型大小計(jì)算模式；
  4. 獲取html視口大小及html大小的方法及應(yīng)用；
批改老師：WJWJ

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

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

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

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