盒模型：包含有外邊距margin 和內邊距padding 邊框border和內容element
盒子的寬/高=margin*2+padding*2+border*2+element
也就是乙個模型的總長度是所有的邊距加盒子邊框的粗度和元素本體的寬高
margin的方法：
margin-top margin-right margin-bottom margin-left
margin: top right bottom left
p
h1 /* 等價於 0.25em 1em 0.5em 1em */auto：水平（預設）書寫模式下，margin-top/margin-bottom計算值為0，margin-left/margin-right取決於可用空間h2 /* 等價於 0.5em 1em 0.5em 1em */
p /* 等價於 1px 1px 1px 1px */
也可以用百分比等來定義，auto屬性會自定義的處在頁面的中間部分
padding的方法：與margin的用法也一樣
可以單條設定，也可以三個一起設定，4個引數對應4條邊
3個引數，中間的對應左右兩條邊
兩個引數，第乙個對應上下，第二個對應左右
border：盒子的邊，處在內邊距和外邊距的夾層中，他也可以設定粗細，盒子總體體積也會加上它的粗細度
寫法可以單挑邊的設定粗細，顏色和型別
如：border-left-style:solid;
border-right-color:blue:
berder-top-width:1px;
等，也可以一起設定：
border: 1px black solid;
位子隨意，只要三個引數寫到位就行
特殊的方法有
border-raduise:30%;
可以設定邊框的圓角度，可以填單位px也可以填百分比，假如為50%時將會出現圓形
怎麼用border-radius製作乙個半圓，首先這個只分別按順時針的順序設定左上，右上，右下，左下四個角度的值，製作右半圓的過程：
.n1
設定乙個寬50，高100的分別設定需要圓形的角的數值為它的半徑的值；
flaot的使用，很簡單使用關鍵字，然後引數為left、right關鍵是清除浮動產生的影響
我們一般可以用浮動來製作導航欄
關於浮動的兩欄布局：
先設定乙個浮動元素往右移動，然後設定乙個塊狀元素會自動網上填充，然後讓著個塊狀元素讓出浮動元素的位子，就成了兩欄布局
margin塌陷bug：垂直方向上的父子塊兩個margin-top是結合在一起的，取兩個中最大的值
解決方法：1給父級頂端border加一條線
2：第二種方法觸發bfc渲染機制，觸發的4中基本方法：
a position absolute
b display line-block
c float left/right
d overflow : hidden
這兩種方法可以解決margin塌陷的bug
通樣處在相鄰的上下兩個塊級元素，公用margin-top,下面的元素設定margin-top沒用bug：
解決方案，將這兩個放入同乙個父級元素，並渲染父級元素，或者只將其中乙個放如也行
那麼我們來說說float如何處理溢位部分的問題，加入我們設定的父盒子的寬高裝不下元素的所有部分，導致元素溢位，我們可以通過overfolw:hidden；溢位部分隱藏的方法來解決
浮動溢位
在非ie瀏覽器（如firefox）下，當容器的高度（height）為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處理，就叫css清除浮動。
方法一：
在html的child2後新增
，css為.clear
優點：簡單，**少，瀏覽器支援好
缺點：如果頁面浮動布局多，則需要很多空標籤方法二：
在parent中新增overflow:auto;
優點：不存在結構和語義化問題，**量極少
缺點：多個巢狀後，firefox某些情況會造成內容全選；ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等，firefox早期版本會無故產生focus等方法三:
在parent容器新增乙個：after偽元素，並使用content："." 或者為" "在元素的後面生成了內容為乙個點的塊級元素，並使用一切方法使這個塊級元素隱藏並清除浮動clear:both.
.parent:after
讓parent容器也浮動，只需給parent容器新增 float：left，也可閉合浮動。
優點：**少
缺點：會導致整個頁面大部分都處於浮動狀態，容易出現問題
html>
<
html>
<
headlang="en">
<
metacharset="utf-8">
<
title>
title>
<
linkrel="stylesheet"href="css.css"type="text/css"/>
head>
<
body>
<
divclass="n1">
<
divclass="nn2">
div>
<
divclass="nn1">
div>
div>
body>
html>
css、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
.nn1.nn2
.n1
/*第一種方法
.nn3
*/
.n1
盒模型總結
超級工具人 實力不夠震撼，吸引不夠震撼，追到女朋友也沒有用，不是工具人做到死就是麻煩一大堆。css處理網頁時，它認為每個元素都包含在乙個不可見的盒子裡。為什麼要想象成盒子呢？因為如果把所有的元素都想象成盒子，那麼我們對網頁的布局就相當於是擺放盒子。我們只需要將相應的盒子擺放到網頁中相應的位置即可完成...
標準盒模型和IE盒模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...
正常盒模型和怪異盒模型
首先大概說說正常盒模型和怪異盒模型的區別 1.用途 正常盒模型主要用於pc端，怪異盒模型主要用於手機端。2.原理 正常盒模型的大小是由內到外的，由內部決定外部的大小 而怪異盒模型是由外而內的。舉例說明 以下為正常盒模型，設定兩個div，分別為鞋盒和鞋子 鞋子 鞋子 設定樣式如下 body div c...