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

搜索
博主信息
博文 16
粉絲 0
評(píng)論 0
訪問(wèn)量 17332
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
box-sizing的作用和偽類(lèi)選擇器以及媒體查詢(xún)優(yōu)先的區(qū)別與聯(lián)系
大碗寬面
原創(chuàng)
894人瀏覽過(guò)

一、CSS3的box-sizing屬性的作用及使用

1.box-sizing 盒子尺寸

CSS 中的 box-sizing 屬性定義了 user agent 應(yīng)該如何計(jì)算一個(gè)元素的總寬度和總高度。

在 CSS 盒子模型的默認(rèn)定義里，你對(duì)一個(gè)元素所設(shè)置的 width 與 height 只會(huì)應(yīng)用到這個(gè)元素的內(nèi)容區(qū)。如果這個(gè)元素有任何的 border 或 padding ，繪制到屏幕上時(shí)的盒子寬度和高度會(huì)加上設(shè)置的邊框和內(nèi)邊距值。這意味著當(dāng)你調(diào)整一個(gè)元素的寬度和高度時(shí)需要時(shí)刻注意到這個(gè)元素的邊框和內(nèi)邊距。當(dāng)我們實(shí)現(xiàn)響應(yīng)式布局時(shí)，這個(gè)特點(diǎn)尤其煩人。

2.屬性值

content-box
默認(rèn)值，標(biāo)準(zhǔn)盒子模型。 width 與 height 只包括內(nèi)容的寬和高， 不包括邊框（border），內(nèi)邊距（padding），外邊距（margin）。注意: 內(nèi)邊距、邊框和外邊距都在這個(gè)盒子的外部。 比如說(shuō)，.box {width: 350px; border: 10px solid black;} 在瀏覽器中的渲染的實(shí)際寬度將是 370px。

注：默認(rèn)值可以不寫(xiě)

border-box
width 和 height 屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。這是當(dāng)文檔處于 Quirks模式 時(shí)Internet Explorer使用的盒模型。注意，填充和邊框?qū)⒃诤凶觾?nèi) , 例如, .box {width: 350px; border: 10px solid black;} 導(dǎo)致在瀏覽器中呈現(xiàn)的寬度為350px的盒子。內(nèi)容框不能為負(fù)，并且被分配到0，使得不可能使用border-box使元素消失。

3.尺寸計(jì)算公式：

width = border + padding + 內(nèi)容的寬度
height = border + padding + 內(nèi)容的高度

示例


1.content-box,是默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px 寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來(lái)的元素寬度中。


2.border-box,告訴瀏覽器：你想要設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說(shuō)，如果你將一個(gè)元素的width設(shè)為100px，那么這100px會(huì)包含它的border和padding，內(nèi)容區(qū)的實(shí)際寬度是width減去(border + padding)的值。大多數(shù)情況下，這使得我們更容易地設(shè)定一個(gè)元素的寬高。

二、常用單位

px,em,rem,vh,vw

  1.     絕對(duì)單位：px，像素，與設(shè)置相關(guān)，一英寸有96像素 
  2.      相對(duì)單位
  3.     1. em,rem,與字號(hào)相關(guān) font-size
  4.     2. vw,vh.與視口相關(guān)（可視窗口大?。?/span> 
  5.      3.1em=16px像素 
  6.      4.em永遠(yuǎn)和當(dāng)前或父級(jí)的font-size大小綁定的 
  7.      5.1rem=10px
  8.      6.瀏覽器的最小字號(hào)為12px
  9.      7.vh,vw 將視口看成100份，每一份是1 相當(dāng)于1%個(gè)vh,vw

三、偽類(lèi)選擇器的參數(shù)及使用

偽類(lèi)選擇器 說(shuō)明
:first-child 選擇某個(gè)元素的第一個(gè)子元素（IE6不支持）
:last-child 選擇某個(gè)元素的最后一個(gè)子元素
:first-of-type 選擇一個(gè)上級(jí)元素下的第一個(gè)同類(lèi)子元素
:last-of-type 選擇一個(gè)上級(jí)元素的最后一個(gè)同類(lèi)子元素
:only-child 選擇的元素是它的父元素的唯一一個(gè)了元素（IE6-8不支持）
:only-of-type 選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類(lèi)型的子元素（IE6-8不支持）
:nth-child() 選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素（IE6-8不支持）
:nth-last-child() 選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開(kāi)始算（IE6-8不支持）
:nth-of-type() 選擇指定的元素（IE6-8不支持）
:nth-last-of-type() 選擇指定的元素，從元素的最后一個(gè)開(kāi)始計(jì)算（IE6-8不支持）

1.常用偽類(lèi)選擇器實(shí)例：:nth-of-type(參數(shù))

參數(shù)計(jì)算方式:參數(shù)=a*n+b a系數(shù)，n計(jì)數(shù)器，b偏移量 a,n,b=0,0,0
  1.     <body>
  2.     <!-- :nth-of-type(參數(shù)) -->
  3.     <!-- 參數(shù)=a*n+b  a系數(shù)，n計(jì)數(shù)器，b偏移量 a,n,b=0,0,0 -->
  4.     <ul class="list">
  5.       <li>item1</li>
  6.       <li>item2</li>
  7.       <li>item3</li>
  8.       <li>item4</li>
  9.       <li>item5</li>
  10.       <li>item6</li>
  11.       <li>item7</li>
  12.       <li>item8</li>
  13.     </ul>
  14.   </body>
  1.     <style>
  2.       /* 獲取全部偶數(shù) 2n/even */
  3.       .list > :nth-of-type(even) {
  4.         background-color: crimson;
  5.       }
  6.       /* 全部奇數(shù)2n+1/add */
  7.       .list > :nth-of-type(odd) {
  8.         background-color: cyan;
  9.       }
  10.     </style>

原理：

nth-of-type(even)even=2n,2*0=0 2*1=2 2*2=4 2*3=6….
nth-of-type(add)add=2n+1,2*0+1=1 2*1+1=3 2*2+1=5 2*3+1=7….

  1.  .list > :nth-of-type(0n + 5) {
  2.         background-color: chartreuse;
  3.       }
  4.       /* 選擇第五個(gè) */
  5.       .list > :nth-of-type(5) {
  6.         background-color: chartreuse;
  7.       }

原理：

nth-of-type(0n + 5)0*n=0 0+5=5

  1. /* 1*n=0 0+7=7 */
  2.       /* 1*1=1 1+7=8 */
  3.       .list > :nth-of-type(1n + 7) {
  4.         background-color: darkkhaki;
  5.       }

原理：

nth-of-type(1n + 7) 1*n=0 0+7=7
1*1=1 1+7=8 

  1. /* -1*0=0    0+3=3 */
  2.       /* -1*1=-1  -1+3=2*/
  3.       /* -1*2=-2  -2+3=1*/
  4.       /* -1*3=-3  -3+3=0 */
  5.       .list > :nth-of-type(-1n + 3) {
  6.         background-color: darkviolet;
  7.       }

原理：

nth-of-type(-1n + 3

  1. -1*0=0    
  2. 0+3=3      
  3. -1*1=-1  
  4. -1+3=2    
  5. -1*2=-2  
  6. -2+3=1    
  7. -1*3=-3  
  8. -3+3=0

四、媒體查詢(xún)優(yōu)先的區(qū)別與聯(lián)系

<body> <div class="test"></div> </body>

  1. <style>
  2.             .test {
  3.               /* box-sizing: border-box; */
  4.               width: 200px;
  5.               height: 200px;
  6.               border: 10px double red;
  7.             }
  8.             @media screen and (max-width: 700px){
  9.           .test{
  10.               background:red;
  11.           }
  12.       }
  13.       @media screen and (max-width: 500px){
  14.           .test{
  15.               background:green;
  16.           }
  17.     </style>



現(xiàn)象：

窗口寬度高于700px沒(méi)有顏色
窗口寬度為700px的時(shí)候包括700px-500px，.test元素變紅。
窗口寬度為500px，包括500px以下的時(shí)候，.test元素變綠。

總結(jié)：

（1）媒體查詢(xún)的寬度在等于給定寬度時(shí)，相應(yīng)的樣式會(huì)被應(yīng)用
max-width:700px，指的是width<=700px則使用樣式。

（2）媒體查詢(xún)可以被覆蓋，后面的@media會(huì)覆蓋前面的。
（3）移動(dòng)優(yōu)先 從最小的屏幕開(kāi)始媒體查詢(xún) min-width: 480px 640 720…
（4）桌面優(yōu)先/pc優(yōu)先 由大屏到小屏 max-width：720 640 480…
從大到小 有個(gè)邊界問(wèn)題 屏幕大于720之后字體會(huì)變最小
解決：在pc優(yōu)先最小像素的后面補(bǔ)充(min-width: 720px)

批改老師：PHPzPHPz

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

老師批語(yǔ)：nth-of-type(-1n + 3 這里少了一個(gè)括號(hào)
本博文版權(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é)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線(xiàn)php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(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é)