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

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

一、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 的值,那么盒子大小會(huì)隨之改變;
這樣會(huì)影響頁面布局,那么不想讓盒子大小隨屬性變化而變化則需要給盒子樣式增加一個(gè)屬性:

box-sizing: border-box; 重新計(jì)算盒子大小,以邊框?yàn)闇?zhǔn),布局中會(huì)經(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獲取元素大小:

  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. // 獲取定位父級(jí)
  46. console.log(box.offsetParent);
  47. // 距離定位父級(jí)頂部距離
  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)動(dòng)畫

代碼如下

  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>小剛的日志:小動(dòng)畫</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");
  33. // 監(jiān)聽事件
  34. imggo.addEventListener("click", go);
  35. imgstop.addEventListener("click", stop);
  36. // 動(dòng)畫開始及停止方法
  37. let timer = null;
  38. function go() {
  39. console.log(img.offsetLeft);
  40. timer = setInterval(function () {
  41. img.style.left = img.offsetLeft + 10 + "px";
  42. img.style.top = img.offsetTop + 10 + "px";
  43. }, 200);
  44. }
  45. function stop() {
  46. clearInterval(timer);
  47. }
  48. </script>
  49. </html>

運(yùn)行效果

總結(jié)

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

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

老師批語:寫的很不錯(cuò),很認(rèn)真,繼續(xù)加油!
本博文版權(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í)者快速成長!
關(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é)