整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天我要給大家介紹一下CSS里面的一個核心概念：盒模型，box model。視頻講解
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
CheatSheet
Box model 盒子模型CheatSheet 鏈接:https://pan.baidu.com/s/1yJCmqpBVQKelITDgO2BCsA 提取碼:8wtv 復制這段內容后打開百度網盤手機App，操作更方便哦
一個web頁面是由眾多html元素拼湊而成的，而每一個html元素，都被解析為一個矩形盒，而CSS盒模型就是這種矩形盒的解構模型。無論是div、span、還是a都是盒子，在 CSS 中，所有的元素都被一個個的“盒子（box）”包圍著，理解這些“盒子”的基本原理，是我們使用CSS實現準確布局、處理元素排列的關鍵。
什么是CSS盒模型呢？盒模型由margin、border、padding、content組成。如圖就好像快遞盒子一樣
標準盒模型
在標準模型中，如果你給盒設置 width 和 height，實際設置的是 content box。 padding 和 border 再加上設置的寬高一起決定整個盒子的大小。
替代（IE）盒模型
你可能會認為盒子的大小還要加上邊框和內邊距，這樣很麻煩，而且你的想法是對的! 因為這個原因，css還有一個替代盒模型。
默認瀏覽器會使用標準模型。如果需要使用替代模型，您可以通過為其設置 box-sizing: border-box 來實現。
簡單來說，box-sizing的作用就是告訴瀏覽器：CSS屬性width和height是用于設置哪一種box的尺寸，在W3C標準中,box-sizing的值僅有content-box和border-box
么理解盒子模型？
盒子模型是樣式表（css）控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法，才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是一個盒子，占據一定的頁面空間。占據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離，來調整盒子（頁面和頁面中的元素）的位置。盒子模型是由內容、邊框、間隙（padding）、間隔（margin）組成，他們的關系如下圖所示：
盒子實際寬度（高度）=內容（content）+邊框（border）+間隙（padding）+間隔（margin）。對于任何一個元素設置width和height控制內容大小，也可以分別設置各自的邊框（border）、間隙（padding）、間隔（margin）。靈活設置這些盒子的這些屬性，可以實現各自排班效果。
border
border是元素的外圍，計算元素的寬和高要把border加上特別是特殊網站頁面（比如說活動專題頁面等）上，這一點是很多新手忽略的地方。border有三個主要屬性，color（顏色）、width（粗細）和style（樣式）。
1、color主要是指定border的顏色，一共有256的3次方種顏色供我們選擇。通常是16進制的值，比如紅色是“#FF0000”。
2、width是border粗細程度，可以設置為thin、thick和length，length為具體數值，比如說border:1px #CCC solid;其中1px指的是border的width，默認值是medium，一般瀏覽器解析為2像素。
3、style屬性可以設為none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不顯示border，hidden可以用來解決邊框的沖突問題。對于groove、inset、outset、rigde、border-style，IE會出現兼容問題，使用時一定要注意。
padding
padding用于控制content與border之間的距離，同時設置上下左右的padding時，可以這樣寫padding:10px 20px 10px 10px;分別對應上、右、下、左四個方向的padding，逆時針排序，margin屬性也可以這樣書寫。
margin
margin用于控制塊與塊（可以理解成塊級元素）之間的距離。為了便于理解可以把盒子模型想象成一幅畫，content是畫本身，padding是畫與畫框的留白，border是畫框，margin是畫與畫之間距離。需要注意的是IE和firefox在處理margin時有一些差別，倘若設定了父元素的高度height值，如果此時子元素的高度超過了父元素的height值，二則顯示結果完全不同，IE瀏覽器會自動擴大，而firefox（火狐瀏覽器）就不會，這一點是需要注意的。
關于盒子模型先聊到這，上面總結都是最簡單的，一定要熟練掌握。每天學習一個知識點，每日寄語-“不妄求,則心安,不妄做,則身安.”
關注，不迷路，每天分享大量前端知識
css中的盒子模型 css處理網頁時，他認為每個元素都包含在一個不可見的矩形盒子 盒子是由 內容區，內邊距(padding)，邊框，外邊距(margin)組成
在瀏覽器中，其默認樣式中存在一些body等元素存在的默認樣式，比如一些外邊距，內邊距等,它的這些默認樣式
所以在編寫樣式之前我們需要將默認樣式取消掉，在書寫代碼時在style中引入下面的reset.css文件即可，下面的效果不好的話，可以百度reset.css粘貼進去。
內聯元素的盒模型，設置width和height無效，水平方向的內邊距可以用，內聯元素可以設置 垂直方向的外邊距，不會影響頁面的布局，即不影響其他元素的位置，僅僅是其顯示效果發生變化 可以使用邊框，外邊距，兩個內聯元素的相鄰外邊距會相加，垂直外邊距不支持！
css中的display，通過display可修改元素類型，比如塊元素轉化為內聯元素，內聯元素轉化為塊元素，還可以設置為內聯塊元素，擁有他們的共性，可以設置寬高，但又
不獨占一行，比如img標簽。display：none 元素不顯示，也不在頁面占有位置。
visiblity visiblity：none 元素不顯示，但在頁面占有位置。
css盒子模型中的overflow 如果子元素大小超過父元素的大小，超出父元素的內容
會在超過父元素的區域顯示，父元素默認是將溢出的內容，在父元素外邊顯示，通過overflow可以處理溢出的內容。比如overflow：scroll/auto，添加滾動條，來查看所有內容。
文檔流 文檔指的是HTML的頁面，每個頁面都是一個文檔，文檔流就是處在網頁中的底層表示一個頁面的位置，我們創建的元素默認處在文檔流中
元素在文檔流中的特點。
1.塊元素在文檔流中會默認獨占一行，默認自上往下排列，默認寬度是父元素的100%
塊元素的高度默認被內容撐開。
2.內聯元素在文檔流中只占自身的大小，默認從左向右排列，如果一行內容納不了所有元素則會另起一行，接著自左向右。
在內聯元素，寬度和高度默認被內容撐開。
浮動（float）
塊元素在文檔流中默認垂直排列，如果希望塊元素水平排列，可以使其脫離文檔流。
百度reset.css即可搜到去除瀏覽器默認樣式的css文件
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
