盒模型分為W3C的標準模型和IE模型
盒模型又稱為框模型，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、外邊距（margin）、邊框（border）
如圖：
W3C的標準模型：width/height屬性指content
IE模型：width/height屬性由content+padding+border組成
這兩種模型的區(qū)別就是計算的寬度和高度不同
通過CSS3新增的屬性box-sizing:content-box | border-box分別設(shè)置盒模型為標準模型（content-box）和IE模型（border-box）
W3C的標準模型：
<div class="content-box"></div>
.content-box {
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid red;
margin: 10px;
}
其中：width=100px
IE模型：
<div class="border-box"></div>
.border-box {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid red;
margin: 10px;
}
其中：width= content + 2padding + 2border = 100px
相對比較而言：border-box更好用?。?！
擴展：JS如何設(shè)置獲取盒模型對應(yīng)的寬和高呢？
dom.style.width / height; // 設(shè)置獲取的是內(nèi)聯(lián)樣式
dom.currentStyle.width / height; // IE支持
window.getComputedStyle(dom).width / height; // 兼容性好
dom.getBoundingClientRect().width / height; // 計算一個元素的絕對位置
因為瀏覽器的兼容問題，不同瀏覽器的部分標簽?zāi)J值都是不同的，如果沒有對CSS樣式初始化會出現(xiàn)各個瀏覽器之間的頁面顯示差異。
對CSS樣式初始化后會對SEO有一定的影響，所以力求影響最小的情況下進行初始化。
最簡單也不建議初始化的方式：
* {
margin: 0;
padding: 0;
}
可以使用normalize.css進行CSS初始化。
以下是淘寶的樣式初始化代碼：
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
一個行內(nèi)元素只占據(jù)它對應(yīng)標簽的邊框所包含的空間，行內(nèi)元素前后不會產(chǎn)生換行，一系列的行內(nèi)元素都在一行顯示，直到該行排滿為止再另起一行。
行內(nèi)元素有：a、img、span、button、input、textarea、label、em、kbd、br、b、i、tt等等
特點：
塊級元素占據(jù)其父元素（容器）的整個空間，因此創(chuàng)建了一個“塊”。通常瀏覽器會在塊級元素前后另起一個新行。
塊級元素有：div、p、h1~h6、hr、ul、ol、li、dd、dl、table等等
特點：
static是position屬性的默認值，如果省略了position屬性，瀏覽器就認為該元素為static定位。
瀏覽器會按照源碼的順序，決定每個元素的位置，這稱為"正常的頁面流"（normal flow）。每個塊級元素占據(jù)自己的區(qū)塊（block），元素與元素之間不產(chǎn)生重疊，這個位置就是元素的默認位置。
static定位所導(dǎo)致的元素位置，是瀏覽器自主決定的，所以這時top、bottom、left、right這四個屬性無效，并且z-index設(shè)置也無效。
relative表示相對定位，是默認參照父級的原始點為原始點來定位的，若無父元素則按照上一個元素的底部為原始點進行定位。
absolute表示絕對定位，相對于static定位以外的第一個父元素進行定位。
fixed表示絕對定位，相對于瀏覽器窗口進行定位。即定位基點是瀏覽器窗口。這會導(dǎo)致元素的位置不隨頁面滾動而變化，就好像固定在網(wǎng)頁上一樣。
搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基于視口計算的，否則初始位置就是元素的默認位置。
display:none;：
visibility:hideen;：
visibility: visible; 來進行顯示；opacity:0;：
opacity: 1; 無效；使用 display:none; 屬性后，HTML 元素（對象）的寬度、高度等各種屬性值都將丟失；使用 visibility:hideen; 屬性后，HTML 元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在；而使用opacity:0;屬性后，也僅僅是將透明度設(shè)置成了 100%，以致于在視覺上完全看不見。
繼承就是指子節(jié)點默認使用父節(jié)點的樣式屬性。
可繼承的屬性大概有顏色、文字、字體間距、行高、對齊方式、列表的樣式。
為float后的元素添加clear屬性
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
.a,
.b {
width: 100px;
height: 100px;
border: 5px solid red;
}
.b {
float: right;
}
.a {
float: left;
}
.c {
border: 5px solid blue;
height: 100px;
clear: both;
}
給父容器添加clearfix的class，用偽元素clearfix::after設(shè)置樣式，清除浮動。
<div class="parent clearfix">
<div class="a">a</div>
<div class="b">b</div>
</div>
.parent {
border: 5px solid red;
}
.a,
.b {
width: 100px;
height: 100px;
border: 5px solid blue;
}
.a {
float: left;
}
.b {
float: right;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
給父容器添加overflow:hidden或者auto。
<div class="parent">
<div class="a">a</div>
<div class="b">b</div>
</div>
.parent {
border: 5px solid red;
overflow: auto;
}
.a,
.b {
width: 100px;
height: 100px;
border: 5px solid blue;
}
.a {
float: left;
}
.b {
float: right;
}
:root、:last-child、:first-of-type、:last-of-type等等傳送門 - 去除inline-block元素間間隙的幾種方法
流云諸葛 - 從網(wǎng)易與淘寶的font-size思考前端設(shè)計稿與工作流
<img src="#.png" style="width:500px!important;">
使用 CSS 有如下三種方法：
// 1. 最簡單的就是直接在后面添加寬度并設(shè)置 !important 來覆蓋掉
<img src="#.png" style="width:500px!important; width:300px!important;">
// 2. 設(shè)置最大寬度
<img src="#.png" style="width:500px!important; max-width:300px;">
// 3. 使用 transform 來縮小
<img src="#.png" style="width:500px!important; transform:scale(0.6,0.6);">
使用 JS 的方法：
// 使用 setAttribute 來屬性
let img = document.querySelector("img")
img.setAttribute("style", "width:300px;")
CSS代碼如下：
.triangle {
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: transparent transparent red transparent;
}
