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

搜索
博主信息
博文 13
粉絲 0
評(píng)論 0
訪問量 16510
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
盒模型的大小定位的計(jì)算理解
小追
原創(chuàng)
883人瀏覽過

1.盒模型的常用元素

序號(hào) 代碼 定義
1. margin 外邊距
2. padding 內(nèi)邊距
3. border 邊框
4. top 內(nèi)外邊距邊框?qū)傩?，表示上邊?/td>
5. left 內(nèi)外邊距邊框?qū)傩?，表示左邊?/td>
6. bottom 內(nèi)外邊距邊框?qū)傩?，表示下邊?/td>
7. right 內(nèi)外邊距邊框?qū)傩?，表示表示右邊?/td>
8. box-sizing 重新計(jì)算邊框大小

盒模型代碼演示

  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>盒/框模型</title>
  7.     <style>
  8.         .box{
  9.             /* 寬、高是內(nèi)容區(qū) */
  10.             width:200px;
  11.             height:200px;
  12.         }
  13.         .box.one{
  14.             padding:10px;
  15.             border:2px solid #000;
  16.             background-color:lightgreen;
  17.             background-clip:content-box;
  18.             margin-bottom:20px;
  19.         }
  20.         .box.two{
  21.             padding:10px;
  22.             border:2px solid #000;
  23.             background-color:lightcoral;
  24.             /* background-clip規(guī)定背景的繪制區(qū)域 */
  25.             background-clip:content-box;
  26.             margin-top:30px;
  27.         }
  28.         .box.parent{
  29.             background-color:lightblue;
  30.             /* 相對(duì)定位是相對(duì)自己原來的位置進(jìn)行移動(dòng)，這個(gè)元素在文檔流的原位置不釋放 */
  31.             position:relative;
  32.             left:30px;
  33.             top:50px;
  34.         }
  35.         .son{
  36.             width:100px;
  37.             height:100px;
  38.             background-color:violet;
  39.             /* 絕對(duì)定位會(huì)找到這個(gè)元素有定位的上級(jí)，按照上級(jí)的位置進(jìn)行移動(dòng) */
  40.             position:absolute;
  41.             /* 固定定位，忽略所有的定位上級(jí)，只針對(duì)body進(jìn)行定位移動(dòng) */
  42.             position:fixed;
  43.             left:60px;
  44.             top:80px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <!-- 兩個(gè)盒子之間外邊距會(huì)折疊，會(huì)從兩個(gè)盒子的border邊開始計(jì)算距離 -->
  50.     <div class="box one"></div>
  51.     <div class="box two"></div>
  52.     <hr />
  53.     <div class="box parent">
  54.         <div class="son"></div>
  55.     </div>
  56. </body>
  57. </html>

2.box-sizing屬性的理解

  • border-box值是以邊框進(jìn)行計(jì)算盒子大小，盒子大小等于寬高值；
  • content-box值是以內(nèi)容進(jìn)行計(jì)算盒子大小，盒子大小等于margin+border+padding+寬高；

代碼演示

  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>自定義元素大小的計(jì)算方式</title>
  7.     <style>
  8.         /* 樣式初始化，頁面布局常見，會(huì)經(jīng)常用到 */
  9.         *{
  10.             margin:0;
  11.             padding:0px;
  12.             box-sizing:border-box;
  13.         }
  14.         .box{
  15.             background-color:violet;
  16.             width:200px;
  17.             height:200px;
  18.             border:3px solid #000;
  19.             padding:10px;
  20.             background-clip:content-box;
  21.             /* box-sizing重新計(jì)算邊框大小 */
  22.             /* content-box是默認(rèn)值，意思是以內(nèi)容為準(zhǔn)重新計(jì)算邊框大小 */
  23.              box-sizing:content-box; 
  24.              /* box-sizing:border-box;  */
  25.         } 
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="box"></div>
  30. </body>
  31. </html>

盒子元素的水平垂直居中定位

  • 因?yàn)轱@示器都是有寬度的，很容易讓元素水平居中。但是網(wǎng)頁高度可以往下滑動(dòng)，不容易垂直居中。

  • 我們要將元素進(jìn)行水平垂直居中，就需要定位盒子的4個(gè)角，讓元素以4個(gè)角進(jìn)行定位居中。

演示代碼

  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>margin:auto塊元素的垂直居中</title>
  7.     <style>
  8.         .content{
  9.             width:500px;
  10.             height:600px;
  11.             background-color:lightblue;
  12.             position:relative;
  13.         }
  14.         .item{
  15.             width:100px;
  16.             height:100px;
  17.             background-color:red;
  18.             position:absolute;
  19.             /* 設(shè)置水平垂直都居中 從上邊順時(shí)針到右邊結(jié)束*/
  20.             top:0;
  21.             left:0;
  22.             bottom:0;
  23.             right:0px;
  24.             margin:auto;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="content">
  30.         <div class="item"></div>
  31.     </div>
  32. </body>
  33. </html>
批改老師：WJWJ

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

老師批語：總得來說，寫的不錯(cuò)，建議重要代碼加上效果圖！
本博文版權(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é)