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

搜索
博主信息
博文 49
粉絲 0
評論 0
訪問量 49552
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
盒模型計算方式及偽類選擇器靈活使用與初識媒體查詢
超超多喝水
原創(chuàng)
755人瀏覽過

盒模型計算方式及偽類選擇器靈活使用與初識媒體查詢

盒模型計算方式

盒模型五大常用屬性：

  • width
  • height
  • border
  • margin
  • padding

默認(rèn)情況下，給一個盒模型設(shè)置了樣式后，盒模型默認(rèn)狀態(tài)下的計算方式應(yīng)該是 w3c 標(biāo)準(zhǔn)盒子計算方式，即： 實際寬度=width+height+border+padding，如：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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</title>
  8.     <style>
  9.       .box {
  10.         width: 200px;
  11.         height: 200px;
  12.         padding: 10px;
  13.         border: 10px dashed;
  14.         background-color: hotpink;
  15.         background-clip: content-box;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="box"></div>
  21.   </body>
  22. </html>

該 div 的盒子的實際寬高為 width 或 height 的 200+左右或上下 padding 的 10×2+左右或上下的 border10×2，最終值就為(200+10×2+10×2)=240。

標(biāo)準(zhǔn)盒子

但是按照一般習(xí)慣，也為了方便布局，應(yīng)該是 width 的實際寬度就是 width 的寬度，height 的實際高度就是 height 的高度，此時可以使用box-sizing: border-box;來限制 width 的內(nèi)容區(qū)根據(jù) border 跟 padding 自適應(yīng)，如：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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</title>
  8.     <style>
  9.       .box {
  10.         width: 200px;
  11.         height: 200px;
  12.         padding: 10px;
  13.         border: 10px dashed;
  14.         background-color: hotpink;
  15.         background-clip: content-box;
  16.         box-sizing: border-box;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div class="box"></div>
  22.   </body>
  23. </html>

此時實際寬高就變成了 200，內(nèi)容區(qū)變成了 width 或 height 的 200-左右或上下 padding 的 10×2-左右或上下的 border10×2，最終內(nèi)容區(qū)的值就為(200-10×2-10×2)=160。

border-box

偽類選擇器靈活使用

常用偽類選擇器 注釋
:nth-of-type() 分組匹配,在匹配之前將元素根據(jù)類型進(jìn)行分組后再匹配,常用于選擇同組單個元素或者從上往下選擇
:nth-last-of-type() 分組匹配,在匹配之前將元素根據(jù)類型進(jìn)行分組后再匹配,常用于選擇同組單個元素或者從下往上選擇
:first-of-type 常用于選擇第一個元素
:last-of-type 常用于選擇最后一個元素
:not() 在一個集合中，去掉某一些元素

分組匹配:nth-of-type()與:nth-last-of-type()的參數(shù)都為 an+b，其中 a 是系數(shù)，n 為從 0 開始自增的計數(shù)器，b 為最小值為 1 的偏移量。ps:需要注意元素的有效編號是從 1 開始的，如：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>分組匹配</title>
  8.     <style>
  9.       .l {
  10.         position: relative;
  11.       }
  12.       .l1 {
  13.         width: 300px;
  14.         position: absolute;
  15.         left: 0;
  16.         top: 0;
  17.         border: 6px solid gray;
  18.       }
  19.       .l2 {
  20.         width: 300px;
  21.         top: 0;
  22.         left: 350px;
  23.         position: absolute;
  24.         border: 6px solid gray;
  25.       }
  26.       .l3 {
  27.         width: 300px;
  28.         top: 0;
  29.         left: 700px;
  30.         position: absolute;
  31.         border: 6px solid gray;
  32.       }
  33.       /* :nth-of-type()選中l(wèi)ist類下li同類的正數(shù)第5個子元素 */
  34.       .list > :nth-of-type(5) {
  35.         background-color: hotpink;
  36.       }
  37.       /* :nth-last-of-type()選中l(wèi)ist類下li同類的倒數(shù)第5個元素 */
  38.       .list > :nth-last-of-type(5) {
  39.         background-color: red;
  40.       }
  41.       /* :first-of-type選中l(wèi)ist類中第一個元素，由于li跟p是兩個不同的元素，因此兩個分組會分開取值，這里用:not()排除掉p元素 */
  42.       .list > :first-of-type:not(p:first-of-type) {
  43.         background-color: green;
  44.       }
  45.       /* :last-of-type選中l(wèi)ist類中最后一個元素 */
  46.       .list > :last-of-type:not(p:last-of-type) {
  47.         background-color: lightblue;
  48.       }
  50.       /* 從list2類第9個元素開始從上往下每3個選中1個選中所有元素 */
  51.       .list2 > :nth-of-type(3n + 9) {
  52.         background-color: yellow;
  53.       }
  54.       /* 從list2類倒數(shù)第9個元素開始從下往上每4個選中1個選中所有元素 */
  55.       .list2 > :nth-last-of-type(4n + 9) {
  56.         background-color: slateblue;
  57.       }
  59.       /* 從list2類中的list7類中選取偶數(shù)元素,這里需要注意兩個:nth-of-type()之間要用空格隔開 */
  60.       .list2 .list7 > :nth-of-type(even) {
  61.         background-color: tomato;
  62.       }
  63.       /* 從list2類中的list8類中選取偶數(shù)元素,這里需要注意兩個:nth-of-type()之間要用空格隔開 */
  64.       .list2 .list8 > :nth-of-type(odd) {
  65.         background-color: lightblue;
  66.       }
  67.       /* 從list3中選擇前6個元素 */
  68.       .list3 > :nth-of-type(-n + 6) {
  69.         background-color: lightseagreen;
  70.       }
  71.       /* 從list3中選擇后6個元素 */
  72.       .list3 > :nth-last-of-type(-n + 6) {
  73.         background-color: magenta;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body>
  78.     <div class="l">
  79.       <div class="l1">
  80.         <ul class="list">
  81.           <li>item1</li>
  82.           <li>item2</li>
  83.           <p>------</p>
  84.           <li>item3</li>
  85.           <p>------</p>
  86.           <li>item4</li>
  87.           <p>------</p>
  88.           <li>item5</li>
  89.           <p>------</p>
  90.           <li>item6</li>
  91.         </ul>
  92.       </div>
  93.       <div class="l2">
  94.         <ul class="list2">
  95.           <li>item1</li>
  96.           <li>item2</li>
  97.           <li>item3</li>
  98.           <li>item4</li>
  99.           <li>item5</li>
  100.           <li>item6</li>
  101.           <li>
  102.             item7
  103.             <ul class="list7">
  104.               <li>item7-1</li>
  105.               <li>item7-2</li>
  106.               <li>item7-3</li>
  107.               <li>item7-4</li>
  108.               <li>item7-5</li>
  109.               <li>item7-6</li>
  110.             </ul>
  111.           </li>
  112.           <li>
  113.             item8
  114.             <ul class="list8">
  115.               <li>item8-1</li>
  116.               <li>item8-2</li>
  117.               <li>item8-3</li>
  118.               <li>item8-4</li>
  119.               <li>item8-5</li>
  120.               <li>item8-6</li>
  121.             </ul>
  122.           </li>
  123.           <li>item9</li>
  124.           <li>item10</li>
  125.           <li>item11</li>
  126.           <li>item12</li>
  127.           <li>item13</li>
  128.           <li>item14</li>
  129.         </ul>
  130.       </div>
  131.       <div class="l3">
  132.         <ul class="list3">
  133.           <li>item1</li>
  134.           <li>item2</li>
  135.           <li>item3</li>
  136.           <li>item4</li>
  137.           <li>item5</li>
  138.           <li>item6</li>
  139.           <li>item7</li>
  140.           <li>item8</li>
  141.           <li>item9</li>
  142.           <li>item10</li>
  143.           <li>item11</li>
  144.           <li>item12</li>
  145.           <li>item13</li>
  146.           <li>item14</li>
  147.           <li>item15</li>
  148.           <li>item16</li>
  149.           <li>item17</li>
  150.           <li>item18</li>
  151.         </ul>
  152.       </div>
  153.     </div>
  154.   </body>
  155. </html>

以上代碼中

  • :nth-of-type(5)等同于:nth-of-type(0n+5)
  • :nth-last-of-type(5)等同于:nth-last-of-type(0n+5)
  • :nth-of-type(even)等同于:nth-of-type(2n+0)
  • :nth-of-type(odd)等同于:nth-of-type(2n+1)
  • :nth-of-type(-n + 6)及:nth-last-of-type(-n + 6)n 前面加-號可以實現(xiàn)反選操作，以選中前幾位或后幾位
  • :nth-of-type(an + b)需要注意，b 前面不建議使用-號，雖然會默認(rèn)忽略報錯不影響顯示，但并不符合規(guī)范

初識媒體查詢

使用媒體查詢可以針對不同的屏幕設(shè)置不同的樣式,達(dá)到適配不同型號屏幕的效果

1.從小到大進(jìn)行媒體查詢（移動優(yōu)先）

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>媒體查詢</title>
  8.     <style>
  9.       /* 給頁面加一些初始樣式 */
  10.       html {
  11.         font-size: 10px;
  12.       }
  13.       body {
  14.         font-size: 1.6rem;
  15.       }
  16.       p {
  17.         border: 0.1rem solid red;
  18.         width: 9rem;
  19.         background-color: hotpink;
  20.       }
  21.       /* 開始媒體查詢 */
  22.       /* 以移動優(yōu)先，從小到大進(jìn)行屏幕的媒體查詢 */
  23.       /* 設(shè)置最小480手機(jī)寬度的字體大小 */
  24.       @media (min-width: 480px) {
  25.         html {
  26.           font-size: 12px;
  27.         }
  28.       }
  29.       /* 設(shè)置第二個級別640手機(jī)寬度的字體大小 */
  30.       @media (min-width: 640px) {
  31.         html {
  32.           font-size: 24px;
  33.         }
  34.       }
  35.       /* 設(shè)置第三個級別720手機(jī)寬度的字體大小 */
  36.       @media (min-width: 720px) {
  37.         html {
  38.           font-size: 48px;
  39.         }
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <p>hello world</p>
  45.   </body>
  46. </html>

由于瀏覽器對最小字號有默認(rèn)限制，小于 480 的效果我們與 不小于 480 但是小于 640 的效果進(jìn)行對比

尺寸為 411 時的效果
411
尺寸為 481 時的效果
481

可以看到，由于瀏覽器默認(rèn)字號的限制，字號大小并沒有變化，但是我們設(shè)置的寬度是跟隨配置的最小 font-size 進(jìn)行了變化的

尺寸為 642 時的效果
642
尺寸為 721 時的效果
721

可以看到 480 以后都進(jìn)行了正常的變化

2.從大到小進(jìn)行媒體查詢（PC 優(yōu)先）

在從小到大進(jìn)行媒體查詢的時候，我們發(fā)現(xiàn)在小于設(shè)置的最小尺寸 480 的時候，font-size 為 10px 會自動生效，同樣的在從大到小進(jìn)行媒體查詢的時候，如果大于設(shè)置的最大尺寸的時候，font-size 為 10px 也會自動生效，這時候就需要我們設(shè)置最大尺寸的同時，以最大尺寸的尺寸設(shè)置一個最小尺寸，來避免這個情況發(fā)生

下面為了更好的理解先不加以最大尺寸的尺寸設(shè)置的最小尺寸來展示

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>媒體查詢</title>
  8.     <style>
  9.       /* 給頁面加一些初始樣式 */
  10.       html {
  11.         font-size: 10px;
  12.       }
  13.       body {
  14.         font-size: 1.6rem;
  15.       }
  16.       p {
  17.         border: 0.1rem solid red;
  18.         width: 9rem;
  19.         background-color: hotpink;
  20.       }
  21.       /* 開始媒體查詢 */
  22.       /* 以PC優(yōu)先，從大到小進(jìn)行屏幕的媒體查詢 */
  23.       /* 設(shè)置最大720手機(jī)寬度的字體大小 */
  24.       @media (max-width: 720px) {
  25.         html {
  26.           font-size: 48px;
  27.         }
  28.       }
  29.       /* 設(shè)置第二個級別640手機(jī)寬度的字體大小 */
  30.       @media (max-width: 640px) {
  31.         html {
  32.           font-size: 24px;
  33.         }
  34.       }
  35.       /* 設(shè)置第三個級別480手機(jī)寬度的字體大小 */
  36.       @media (max-width: 480px) {
  37.         html {
  38.           font-size: 12px;
  39.         }
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <p>hello world</p>
  45.   </body>
  46. </html>

尺寸為 435 時的效果
435
尺寸為 483 時的效果
483
尺寸為 641 時的效果
641
尺寸為 725 時的效果
725

通過以上發(fā)現(xiàn)尺寸在 720 以下時均能正常顯示，但是當(dāng)尺寸大于 720 以后字號反而恢復(fù)了最初默認(rèn)的 font-size 為 10px 的大小

這個時候我們就需要在最后面加一個最小 720 時的尺寸，來進(jìn)行限制，我們將以下代碼加入到 css 末尾

  1. /* 設(shè)置當(dāng)大于720時的統(tǒng)一字體大小 */
  2. @media (min-width: 720px) {
  3.   html {
  4.     font-size: 48px;
  5.   }
  6. }

此時尺寸為 725 時恢復(fù)正常，即屏幕尺寸大于 720 也正常顯示設(shè)置字號的最大值

尺寸為 725 時的效果
725-2

批改老師：PHPzPHPz

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

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(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
隨時隨地碎片化學(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+教程免費學(xué)