css是cascading style sheets的簡稱，中文稱為層疊樣式表，用來控制網頁資料的表現，可以使網頁的表現與資料內容分離。
1.行內式
行內式是在標記的style屬性中設定css樣式。這種方式沒有體現出css的優勢，不推薦使用。
1<
p style
="color: blue ;background-color: yellow"
> hello p
p> 把字型顏色設為藍色 背景顏色設為黃色
2.嵌入式
嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下：
3 鏈結式將乙個.css檔案引入到html檔案中 4.匯入式將乙個獨立的.css檔案引入html檔案中，匯入式使用css規則引入外部css檔案，標記也是寫在box1 向左浮動box2 向右浮動
box3
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文字內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第乙個大盒子裡的子元素使用了浮動，脫離了文件流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
解決方法：
1、要麼給.container設定固定高度，一般情況下文字內容不確定多少就不能設定固定高度，所以一般不能設定「.container」高度(當然能確定內容多高，這種情況下「.container是可以設定乙個高度即可解決覆蓋問題。
2、要麼清除浮動。
清除浮動：
在非ie瀏覽器（如firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處理，就叫css清除浮動。
clear語法：方式1(推薦):clear : none | left | right | both
取值：none : 預設值。允許兩邊都可以有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許有浮動物件
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果乙個元素的右側有一浮動物件，而這個元素設定了不允許右邊有浮動物件，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動物件的目的。
.clearfix:after.clearfix
整段**就相當於在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。
之所以用它，是因為，你不必在html檔案中寫入大量無意義的空標籤，又能清除浮動。
話說回來，你這段**真是個累贅啊，這樣寫不利於維護。
只要寫乙個.clearfix就行了，然後在需要清浮動的元素中 新增clearfix類名就好了。
如：
方式2：
overflow:hidden;
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成乙個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
1 static
static 預設值，無定位，不能當作絕對定位的參照物，並且設定標籤物件的left、top等值是不起作用的的。
2 position: relative／absolute
relative相對定位。相對定位是相對於該元素在文件流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即佔據文件流空間。物件遵循正常文件流，但將依據top，right，bottom，left等屬性在正常文件流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的乙個主要用法：方便絕對定位元素找到參照物。
absolute絕對定位。
定義：設定為絕對定位的元素框從文件流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。
重點：如果父級設定了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應**的標籤偏離問題，即父級為自適應的，那我子元素就設定position:absolute;父元素設定position:relative;，然後top、right、bottom、left用百分比寬度表示。
另外，物件脫離正常文件流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
3 position:fixed
fixed：物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動。而其層疊通過z-index屬性 定義。 注意點： 乙個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是乙個常識性的知識點，因為這是兩個不同的流，乙個是浮動流，另乙個是「定位流」。但是 relative 卻可以。因為它原本所佔的空間仍然佔據文件流。
在理論上，被設定為fixed的元素會被定位於瀏覽器視窗的乙個指定座標，不論視窗是否滾動，它都會固定在這個位置。
4僅使用margin屬性布局絕對定位元素
此情況，margin-bottom 和margin-right的值不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。另外，不管它的祖先元素有沒有定位，都是以文件流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對定位元素。
層級關係為：
前端學習之路11 CSS
css層疊和繼承 顏色長度 css樣式由一條或多條以分號隔開的樣式宣告組成。每條宣告包含著乙個css屬性和該屬性的值，二者以冒號分隔。以 css為副檔名 可以用 import語句將樣式從乙個樣式表匯入另乙個樣式表 import語句必須位於樣式表頂端，樣式表自已的樣式定義不能出現在它之前。import...
Python之路 前端基礎 html css
一 html基本標籤 標籤分類 塊級標籤和行內標籤 自閉合標籤和非自閉合標籤 等等。基礎標籤 head meta,title,link,type,script body h,p,br,div,span,a,form,input,lable,textarea,select,option,ul,ol,d...
前端學習之路13 CSS布局
table布局 css中的乙個基本概念是盒模型 box model 可見元素會在頁面中佔據乙個矩形區域，該區域就是元素的盒子 box 由四部分組成 將display屬性設定為block值會建立乙個塊級元素。塊級元素會在垂直方向跟周圍元素有所區別。通常在元素前後放置換行符也能達到這種效果，在元素和周圍...