您現在的位置是:電腦技術吧?>? 組裝維修 ??>??box sizing,boxsizing有什么用??>??正文詳情

box sizing,boxsizing有什么用

陀覓露2019-11-18 09:00:41 人圍觀
簡介boxsizing的應用場景“框大小”屬性允許您以特定方式定義與區域匹配的特定元素。盒大小是CSS3的盒屬性之一。說到CSS的box模型,我想很多人都會很惱火,尤其是新手。然而,這個boxbor

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

box-sizing是CSS3的box屬性之一。

一說到CSS的盒模型(Box model)我想很多人都會比較煩,特別是對于新手,然而這個Box model又是我們CSS運用中比較重要的一個屬性。

那么CSS3的Box-sizing跟盒模型有什么關系呢?第一句話就說了,Box-sizing是CSS3的Box屬性之一,那他當然也遵循CSS的Box model原理,為了能更好的學習和理解這個Box-sizing屬性,我們有必要先了解一下CSS中Box model的原理。

  例如,假如您需要并排放置兩個帶邊框的框,可通過將 box-sizing 設置為 border-box。

這可令瀏覽器呈現出帶有指定寬度和高度的框,并把邊框和內邊距放入框中。

  如果你寫過CSS或者你接觸過CSS,相信你一定對盒子模型一點都不陌生。

CSS其中一個讓人比較困惑的地方就在于它的盒子模型中關于高度和寬度的計算,別說那些初學者了,就是寫過很久CSS的人也一樣會有如此的感覺。

CSS中的高度和寬度總是不那么直觀,讓你總是很困惑,不能一眼就能分辨出其高度和寬度。

有的時候你希望它的寬度是100px,但實際情況卻總不是這樣。

然而,設置正確的box-sizing的屬性,盒子的高度和寬度會的確就是你設置的100px。

是否有點暈了呢,好了,下面我詳細介紹下。

  1、盒子模型  關于CSS重要的一個概念就是CSS盒子模型。

它控制著頁面這些元素的高度和寬度。

盒子模型多少會讓人產生一些困惑,尤其當涉及到高度和寬度計算的時候。

真正盒子的寬度(在頁面呈現出來的寬度)和高度,需要加上一些其它的屬性,例如:  padding border width = 盒子的寬度  padding border height = 盒子的高度  這看起來并不是那么直觀,那么我們看一個圖:

  這意味著,如果我們設置一個寬度為200px,而實際呈現的盒子的寬度可能會大于200px(除非沒有左右邊框和左右補白)。

這可能看起來比較怪,CSS設置的寬度僅僅是內容區的寬度,而非盒子的寬度。

同樣,高度類似。

  這導致的直接結果是當我們希望頁面呈現的盒子的寬度是200px的時候,我們需要減去它的左右邊框和左右補白,然后設置為對應的CSS寬度。

例如上圖,我們設置希望盒子寬度為200px,則需要先減去左右補白各20px,左右邊框各1px,然后設置對應的CSS寬度158px。

這讓代碼看起來有點匪夷所思,尤其是對新手來說(我就在這個問題上困惑了很久)。

我明明設置的寬度是158px,它卻呈現了200px。

這多少有點不那么直觀和一目了然。

  幸運的是,我們有更好的方法達到我們想要的目的。

  2、box-sizing  與上面不同的是,當你設置box-sizing:border-box以后,這就能達到你想要的目的。

例如,上面我們想要一個寬度為200px的盒子,那么我們直接設置寬度為200px。

是不是看起來清晰多了。

當再設置它的左右邊框和左右補白后,它的內容區會自動調整。

這可能更直接和一目了然。

CSS代碼如下:  div {  box-sizing: border-box;  width: 200px;  padding: 20px;  border: 1px solid #DDD;  }  如下圖:

  實際上,這更被設計者和開發者推崇。

  3、box-sizing其它的值  box-sizing同樣可以設置為content-box,這樣設置CSS的寬度的時候僅僅是設置的它的內容區的寬度,瀏覽器默認都是如此。

如我們1中舉得例子。

  box-sizing也可以設置為inherit,也就是說從父級元素中繼承該屬性。

  4、瀏覽器兼容性  IE8及以上版本支持該屬性,Firefox 需要加上瀏覽器廠商前綴-moz-,對于低版本的IOS和Android瀏覽器也需要加上-webkit-。

實際上,很多reset.css或者normal.css里都包含如下CSS語句,也是比較贊成的用法:  *, *:before, *:after {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;  }  結束語  看到這兒,相信你肯定明白了box-sizing的含義。

那么同樣告訴你的是,這是很多前端面試題常見的知識點之一。

面試官通常會問你,CSS設置如下語句后*{box-sizing:border-box;},其作用是什么?相信你看到現在肯定會清楚的回答這個問題了。

版權聲明:本文由 陀覓露 整理編輯。

原標題:box,什么box

轉載注明出處:http://www.dn9ww09s.icu/assemble/13453.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 筆記本重裝系統鍵盤錯亂,筆記本按鍵錯亂修復

    筆記本重裝系統鍵盤錯亂,筆記本按鍵錯亂修復 相關圖片筆記本接外接鍵盤按鍵錯亂雖然筆記本電腦的按鍵亂七八糟的情況很少見,但并不是沒有。小編安排了一個解決筆記本電腦按鍵紊亂的方案,讓大家都能做好準備。讓我們看看如何處理...

  • 展開菜單效果,rp如何設置菜單效果

    展開菜單效果,rp如何設置菜單效果 相關圖片收縮菜單步驟1:制作菜單外觀,在dreamweaer中創建一個新文件,繪制一個層,在層中插入一個表(如圖1所示),裝飾表,然后添加菜單項并建立超鏈接。為了刪除超鏈接的下菜單圖片...

  • qsv格式轉換mp4,視頻怎么轉換mp4格式轉換

    qsv格式轉換mp4,視頻怎么轉換mp4格式轉換 相關圖片qsv怎么轉mp4最近,很多小伙伴都報告說,他們通過iqiyi下載的視頻格式是QSV,無法通過電腦附帶的播放器觀看。那么如何將QSV格式轉換為MP4格式呢?如何打開QSV文件?接視頻qsv格式怎么播...

  • 怎樣清理應用程序緩存,安卓應用緩存進程

    怎樣清理應用程序緩存,安卓應用緩存進程 相關圖片手機軟件緩存清理后果什么是應用緩存HTML5?它引入了應用程序緩存技術,這意味著可以在沒有網絡的情況下緩存和使用web應用程序。通過創建緩存清單文件,可以輕松創建脫機應用程序...

  • 控件沒有檢測到u盾,控件檢測不到u盾

    控件沒有檢測到u盾,控件檢測不到u盾 相關圖片工商銀行檢測不到u盾一些用戶在電腦上操作網上銀行,并因此插入U盾。打開網上銀行進行操作時,計算機提示控件不會檢測到您機器上的U盾。我該怎么辦?一。檢查u盾是否損壞,u盾上...

  • css3動畫,flash cs3怎么做動畫

    css3動畫,flash cs3怎么做動畫 相關圖片flashcs3動畫制作教程這是一個flashcs3模擬藝術設計系列教程。在上一課中,我們學習了縮小差距和改善角色的身體連接。在本課程中,我們學習了位圖動畫的性能。在本教程中,您將學習...

  • 機箱共振的嗡嗡聲怎么消除,機箱噪音大怎么回事

    機箱共振的嗡嗡聲怎么消除,機箱噪音大怎么回事 相關圖片機箱風扇噪音大怎么處理近日,不少小伙伴反映,他們的電腦機箱噪音很大,一拍手就恢復正常。底盤的噪音怎么樣?底盤的噪音怎么樣?接下來,超人軟件會為你解答,希望能幫到你...

  • 3D足球,足球員3d教程

    3D足球,足球員3d教程 相關圖片3d足球怎么畫最終效果:很像3D嗎?這些只是幻覺。。看看這個,你會看到一個便條:這是我翻譯的外國網站。如果有任何錯誤的翻譯,請給我一個提示。或操作不當一:創建一個整體標...

  • acdsee12許可證密鑰,acdsee許可證密鑰是什么意思

    acdsee12許可證密鑰,acdsee許可證密鑰是什么意思 相關圖片acdsee9許可證密鑰ACDSee是一款經典的圖像處理和管理軟件,能夠很好地瀏覽、管理和處理圖像。處理后的圖像也可以共享給更多的人觀看。Acdsee15目前是一個舊版本,但由于它的簡acdsee許...

  • 石墨文檔導出保存在哪里,手機石墨文檔小程序怎么導出

    石墨文檔導出保存在哪里,手機石墨文檔小程序怎么導出 相關圖片石墨文檔導出的word在哪里Graphite文檔是一個功能強大的在線文檔編輯器。通過graphite文檔,用戶和朋友可以同時編輯文檔。那么,石墨文檔如何在任何地方使用呢?如何使用石墨文件?石...

熱評文章

  • stp可以用什么打開,stp格式文件用什么軟件打開

    stp可以用什么打開,stp格式文件用什么軟件打開 相關圖片手機3d看圖軟件stp最近,很多小伙伴說他們在使用電腦的過程中遇到了STP文件,但是他們不知道如何打開STP文件。什么軟件用來打開STP文件?現在,超人軟件小編想為你解答STP文件的st...

  • 隨手記賬戶,隨手記存管賬戶

    隨手記賬戶,隨手記存管賬戶 相關圖片隨手記賬號是哪個作為一個實用的記賬軟件,最常被問到的問題是如何修改賬戶?如何將帳戶還原為默認值。接下來,超人軟件為大家介紹相關的筆記內容,希望大家喜歡它的同時隨手...

  • 鉸鉸,鏜和絞

    鉸鉸,鏜和絞 相關圖片茭白生產步驟:1。選擇free form工具(q)并單擊stage上的組件。組件上的中心點由實心白色圓圈表示。單擊并將圓拖動到新位置。在我的情況下,我把這個圓圈移動鉸什么意思...

  • 手機caj怎么轉換成pdf,caj文件怎么改為pdf

    手機caj怎么轉換成pdf,caj文件怎么改為pdf 相關圖片caj免費轉換CAJ是中國學術期刊數據庫中的一種文件格式。不好的二次編輯是它最大的缺點。因此,許多小伙伴想知道如何將CAJ轉換成PDF?如何將CAJ轉換成word?現在,超人caj整篇怎么轉換...

  • 旋轉3D,3d怎么旋轉

    旋轉3D,3d怎么旋轉 相關圖片可以用3D旋轉工具的對象是效果演示:使圖標交互:當鼠標單擊圖標時旋轉該圖標,并使該圖標顯示在屏幕前部//Define the angle of rotation var endangle3D旋轉相冊...

  • led顯示屏程序,windows10無法訪問路徑

    led顯示屏程序,windows10無法訪問路徑 相關圖片防火墻英文據推測,許多windows用戶和朋友遇到了無法訪問指定設備路徑或文件的情況。那么,如果windows不能訪問指定的設備路徑或文件呢?接下來,超人軟件將為您解答。win7無法訪問...

  • win8應用商店在哪,win8應用商店不見了

    win8應用商店在哪,win8應用商店不見了 相關圖片win8應用商店下載蘋果系統關閉,這也使得蘋果專賣店給蘋果帶來了很多收入。作為PC端最大的操作系統,微軟的windows怎么能放過這頓飯呢?所以微軟也推出了自己的應用商店。但習慣于...

  • css語法例子,css的基本語法結構

    css語法例子,css的基本語法結構 相關圖片css selector 語法一。基本語法CSS的定義由三部分組成:selector、properties和value基本格式如下:selector{property:value}(selecss讓字一個一個出來...

  • 引導扇區easyboot,easyboot使用教程

    引導扇區easyboot,easyboot使用教程 相關圖片怎樣使用EasyBoot是一個集成的中國引導光盤制作工具。用戶通常使用EasyBoot創建引導光盤。EasyBoot是一個完全圖形化的界面,易于使用,即使是新手也很容易使用與滿足...

  • HTTP協議是,什么是HTTP協議

    HTTP協議是,什么是HTTP協議 相關圖片http基于什么協議似乎在互聯網上使用分塊代碼的網站并不多。除了那些使用gzip壓縮的網站,比如google.com,還有很多打開gzip壓縮的PHP論壇。根據我的理解,使用分塊編HTTP協議稱為...

關注微信

变脸官网查询