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

搜索
博主信息
博文 70
粉絲 4
評(píng)論 5
訪問量 122083
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
演示box-sizing功能并實(shí)例/演示相對(duì)定位與絕對(duì)定位的區(qū)別與聯(lián)系
JiaJieChen
原創(chuàng)
1009人瀏覽過

演示box-sizing功能并實(shí)例

1.首先了解盒模型

在 CSS 中，所有的元素都被一個(gè)個(gè)的“盒子（box）”包圍著，理解這些“盒子”的基本原理，是我們使用CSS實(shí)現(xiàn)準(zhǔn)確布局、處理元素排列的關(guān)鍵。
CSS中組成一個(gè)塊級(jí)盒子需要:
content box: 這個(gè)區(qū)域是用來顯示內(nèi)容，大小可以通過設(shè)置 width 和 height.
padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域； 大小通過 padding 相關(guān)屬性設(shè)置。
border box: 邊框盒包裹內(nèi)容和內(nèi)邊距。大小通過 border 相關(guān)屬性設(shè)置。
margin box: 這是最外面的區(qū)域，是盒子和其他元素之間的空白區(qū)域。大小通過 margin 相關(guān)屬性設(shè)置。如下圖：

這個(gè)圖片內(nèi)部200*200的地方是content內(nèi)容區(qū)域,padding是內(nèi)邊距,border是邊框,,margin是外邊距。相信大家看了這個(gè)簡(jiǎn)介之后對(duì)于盒模型有一定的理解。下面來介紹一下padding和margin的語法

2.padding和margin語法

①padding/內(nèi)邊距全寫和簡(jiǎn)寫
屬性 幾值 語法/含義
padding-top 是設(shè)置上內(nèi)邊距，大小用數(shù)值表示
padding-right 是設(shè)置右內(nèi)邊距，大小用數(shù)值表示
padding-buttom 是設(shè)置下內(nèi)邊距，大小用數(shù)值表示
padding-left 是設(shè)置左內(nèi)邊距，大小用數(shù)值表示
padding 四值 0px(上) 0px(右) 0px(下) 0px(左) 順時(shí)針編寫
padding 三值 0px(上) 0px(左右相等) 0px(下)
padding 兩值 0px(上下相等) 0px(左右相等)
padding 一值 0px(上下左右相等)
②margin/外邊距全寫和簡(jiǎn)寫
屬性 幾值 語法/含義
margin-top 是設(shè)置上外邊距，大小用數(shù)值表示
margin-right 是設(shè)置右外邊距，大小用數(shù)值表示
margin-buttom 是設(shè)置下外邊距，大小用數(shù)值表示
margin-left 是設(shè)置左外邊距，大小用數(shù)值表示
margin 四值 0px(上) 0px(右) 0px(下) 0px(左) 順時(shí)針編寫
margin 三值 0px(上) 0px(左右相等) 0px(下)
margin 兩值 0px(上下相等) 0px(左右相等)
margin 一值 0px(上下左右相等)

3.box-sizing功能

屬性 含義
box-sizing-border-box 可以改變這個(gè)屬性盒子原本計(jì)算大小的規(guī)則，將文本內(nèi)容，內(nèi)邊距，邊框，外邊距的大小值計(jì)算方式合成一個(gè)主體
box-sizing-content-box 還原這個(gè)屬性盒子的計(jì)算方式，只能將文本內(nèi)容，外邊距，邊框大小值計(jì)算在內(nèi)，外邊框大小值不計(jì)算在內(nèi)

細(xì)說box-sizing功能和實(shí)列

①瀏覽器原本計(jì)算盒模型大小方式

我們可以從這張圖片里面看到瀏覽器的默認(rèn)計(jì)算盒模型大小的方式，我們給盒子設(shè)置了高200px，寬200px，邊框上下高左右寬1px，內(nèi)邊距上下高10px，左右寬5px，外邊距上下寬10px，上下高10px，但是瀏覽器的計(jì)算方式不會(huì)把外邊距給計(jì)算到內(nèi)，所以設(shè)計(jì)網(wǎng)頁頁面的時(shí)候往往外邊距會(huì)破壞整個(gè)網(wǎng)頁布局，所以我們要用到box-sizing-border-box功能，請(qǐng)往下看。

②設(shè)置box-sizing:border-box改變?cè)竞心Ｐ陀?jì)算大小方式

設(shè)置好box-sizing:border-box后，計(jì)算方式改變成了把文本內(nèi)容，內(nèi)邊距，邊框，外邊距的大小值計(jì)算方式合成了一個(gè)主體，就是原本設(shè)置好的寬200像素，高200像素，這樣可以更好的設(shè)計(jì)頁面布局大小。

③*{}初始化小技巧

我們一般會(huì)用這個(gè)代碼進(jìn)行頁面的初始化，把所有元素的外邊距，內(nèi)邊距設(shè)置為0，計(jì)算方式設(shè)置為box-sizing：border-box

  1.   <style type="text/css">
  2.      * {
  3.         padding: 0px;
  4.         margin: 0px;
  5.         box-sizing: border-box;
  6.       }
  7.     </style>
④代碼塊
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>box-sizing功能并實(shí)例</title>
  8.     <style type="text/css">
  9.       * {
  10.         padding: 0px;
  11.         margin: 0px;
  12.         box-sizing: border-box;
  13.       }
  14.       #box {
  15.         /* 設(shè)置盒子邊框大小為1個(gè)像素 */
  16.         border: 1px solid;
  17.         background: aqua;
  18.         /* 設(shè)置盒子寬度為200像素 */
  19.         width: 200px;
  20.         /* 設(shè)置盒子高度為200像素 */
  21.         height: 200px;
  22.         /* 設(shè)置內(nèi)邊距上下高度為10像素 左右寬度為5像素 */
  23.         padding: 10px 5px;
  24.         /* 設(shè)置外邊距上下高度/左右寬度為10像素 */
  25.         margin: 10px;
  26.         /* box-sizing: border-box; */
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div id="box">box</div>
  32.   </body>
  33. </html>

演示相對(duì)定位與絕對(duì)定位的區(qū)別與聯(lián)系

1.定位屬性

屬性 含義
position: static 默認(rèn)定位
position：relative 相對(duì)定位，相對(duì)自己的定位元素位置，沒有脫離文檔流
position：absolute 絕對(duì)定位，相對(duì)自己的原始定位位置，脫離文檔流
position:fixed 固定定位，相對(duì)html位置，脫離文檔流

2.定位屬性演示

①relative相對(duì)定位演示

從這個(gè)圖片我們可以看出，用相對(duì)定位去定位一個(gè)盒子，我們可以定位它距離html的頂邊，左邊，距離大小，還可以證明relative相對(duì)定位屬性沒有把這個(gè)盒子脫離文檔流，盒子還在文檔流中。

②absolute絕對(duì)定位演示

從這個(gè)圖片我們可以看出，absolute絕對(duì)定位把第一個(gè)盒子脫離文檔流了，第二個(gè)盒子代替了它原先的位置。它和相對(duì)定位不同的是，相對(duì)定位沒有脫離文檔流，二絕對(duì)定位脫離了文檔流，絕對(duì)定位是相對(duì)自己原始的位置。

③fixed固定定位演示

從圖片上可以看出，固定定位也脫離了文檔流，而且還固定在設(shè)置好的坐標(biāo)上不會(huì)動(dòng)彈，就算是自己滑動(dòng)滾輪使得頁面上下滑動(dòng)，它還是在這個(gè)坐標(biāo)上不會(huì)隨意動(dòng)彈。

④代碼塊
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>相對(duì)定位與絕對(duì)定位的區(qū)別與聯(lián)系</title>
  8.     <style type="text/css">
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       :root {
  15.         border: 2px solid;
  16.       }
  17.       /* 我這邊設(shè)置了兩個(gè)盒子來演示定位元素的區(qū)別
  18.         1.相對(duì)定位元素：position：relative */
  19.       /*#box1 {
  20.          設(shè)置盒子邊框大小
  21.         border: 1px solid;
  22.          設(shè)置盒子寬度大小
  23.         width: 200px;
  24.          設(shè)置盒子高度大小
  25.         height: 200px;
  26.          設(shè)置盒子背景顏色
  27.         background: aqua;
  28.         設(shè)置相對(duì)定位元素：position：relative
  29.         position: relative;
  30.          距離相對(duì)html頂部50像素距離
  31.         top: 50px;
  32.          距離相對(duì)html左部50像素距離
  33.         left: 50px;
  34.       }*/
  35.       /* 2.絕對(duì)定位元素:position:absolute
  36.        #box1 {
  37.         /* 設(shè)置盒子邊框大小
  38.         border: 1px solid;
  39.         /* 設(shè)置盒子寬度大小
  40.         width: 200px;
  41.         /* 設(shè)置盒子高度大小
  42.         height: 200px;
  43.         /* 設(shè)置盒子背景顏色
  44.         background: aqua;
  45.         /* 設(shè)置絕對(duì)定位元素:position:absolute
  46.         position: absolute;
  47.         top: 3em;
  48.         left: 3em;
  49.       } */
  51.       #box1 {
  52.         /* 設(shè)置盒子邊框大小  */
  53.         border: 1px solid;
  54.         /* 設(shè)置盒子寬度大小  */
  55.         width: 200px;
  56.         /* 設(shè)置盒子高度大小  */
  57.         height: 200px;
  58.         /* 設(shè)置盒子背景顏色  */
  59.         background: aqua;
  60.         /*設(shè)置盒子是固定定位：position：fixed**/
  61.         position: fixed;
  62.         left: 220px;
  63.       }
  65.       #box2 {
  66.         /* 設(shè)置盒子邊框大小 */
  67.         border: 1px solid;
  68.         /* 設(shè)置盒子寬度大小 */
  69.         width: 200px;
  70.         /* 設(shè)置盒子高度大小 */
  71.         height: 2000px;
  72.         /* 設(shè)置盒子背景顏色 */
  73.         background: palevioletred;
  74.         /* position: relative;
  75.         top: 3em; */
  76.       }
  77.     </style>
  78.   </head>
  79.   <body>
  80.     <div id="box1">我是固定定位</div>
  81.     <div id="box2">我是默認(rèn)定位</div>
  82.   </body>
  83. </html>
批改老師：天蓬老師天蓬老師

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

老師批語：
本博文版權(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é)