寫css注意的事項

1、寫css注意的事項document*margin:0;padding:0;box-sizing:border-box;outline:none;.parentwidth:400px;height:400px;background:dddddd;margin:auto;.childrenwidth:50px;height:50px;background:saddlebrown;margin-bottom:20px;注重外邊距折疊與其他大多數(shù)屬性不同，上下的垂直外邊距margin在同時存在時會發(fā)生外邊距折疊。這意味著當(dāng)一個元素的下邊緣接觸到另一個元素的上邊緣時，只會保留兩個margin值中較大的那

2、個。解決外邊距折疊的辦法有無數(shù)種，對于初學(xué)者來說最容易的就是全部元素只用法一個方向上的margin，比如上下的外邊距我們統(tǒng)統(tǒng)用法margin-bottom。用法flex舉行布局重置元素的css樣式*margin:0;padding:0;box-sizing:border-box;以上容易粗暴，網(wǎng)絡(luò)上已經(jīng)有成熟的css代碼庫為我們解決掃瞄器不全都問題，例如normalize.css、minireset和ress，可以在項目中引用它們。全部元素設(shè)置為border-boxbox-sizing屬性有兩個值：content-box（默認(rèn)）-當(dāng)我們設(shè)置一個元素的寬度或高度時，就是設(shè)置它的內(nèi)容的大小。全部的

3、padding和邊框值都不包含。例如，一個div的寬度設(shè)置為100，padding為10，于是這個元素將占用120像素（100+2*10）。border-box-padding與邊框包含在元素的寬度或高度中，一個設(shè)置為width:100px和box-sizing:border-box的div元素，他的總寬度就是100px，無論它的內(nèi)邊距和邊框有多少。將全部元素都設(shè)置為border-box，可以更輕松的轉(zhuǎn)變元素的大小，而不必不安padding或者border值會將元素?fù)伍_變形或者換行顯示。將作為背景更好的表格邊框有無數(shù)重復(fù)的邊框，看起來很不好看。這里有一個迅速的辦法來刪除全部的雙倍邊框：border-collapse:collapse更友好的注釋短橫線命名當(dāng)class或者id包含多個單詞時，應(yīng)用法連字符（-），css不區(qū)別大小寫，因此不能用法駝峰式命名。同樣，css中也不建議用法下劃線銜接的命名方式。不要重復(fù)設(shè)置大多數(shù)css屬性的值都是從dom樹中向上一級的元素繼承的，因此才被命名為級聯(lián)樣式表。以font屬性為例-它總是從父級繼承的，您不必為頁面上的每個元素都單獨設(shè)置。只需將要設(shè)置的字體樣式添加到或元素中，然后讓它們自動向下繼承。用法transform屬性來創(chuàng)建動畫保持挑選器的低權(quán)重id(id)>class(.class)>t