結構，是由文件中的主體部分，再加上語義化、結構化的標記。
表現，是賦予內容的一種樣式。
我們用乙個 html 文件來儲存內容與結構，用乙個 css 文件來控制整個文件的表現。
在開始使用css布局之前，首先要保證我們的web頁面是以標記結構化的方式編寫的。
一、帶有語義的標記。
下面一段html就是為了實現某種表現樣式而編寫的：
下面一段html是為了達到正確的語義而編寫的：
在第乙個**片段中，所有的html標籤都是用來表現樣式的；而在第二個**片段中，卻沒有一點對頁面顯示樣式的說明，但是通過css文件，第二個**片段同樣可以達到乙個**片段相同的效果。
我們選擇第二個片段，是應為他們恰如其分地描述了其中的內容。這也是html中語義的概念：選擇何種html標籤取決於標籤本身的語義，而不是其預設顯示出的樣式。
一、建立良好的標記
1、選擇doctype
宣告了文件的根元素是 html，它在公共識別符號被定義為"-//w3c//dtd xhtml 1.0 strict//en" 的 dtd 中進行了定義。瀏覽器將明白如何尋找匹配此公共識別符號的 dtd(document type definition)。如果找不到，瀏覽器將使用公共識別符號後面的 url 作為尋找 dtd 的位置。
另外，需要知道的是，html 4.01 規定的三種文件型別、xhtml 1.0 規定的三種 xml 文件型別都是：strict、transitional 以及 frameset。無論你打算選擇何種型別的html語言，doctype都是乙個健壯的文件所必須的，也是你在編寫html時要做的第一件事情。
2、指定語言和字符集
三、避免過度使用div和span
少量、必要地合理使用div和span可以明顯增強文件的結構性，但是過度使用會達到相反的作用。如果用h3更能表示內容的含義，那麼就不應該使用div，span也不應該替代lablt作用。
四、盡可能少使用標籤
應該這樣：
而不是這樣：
css 布局布局定位心得
1 區域性絕對定位。當我們在乙個預設定位方式的div內巢狀的div實用 絕對定位 absolute 的時候，它會脫離上乙個div的控制，要實現乙個巢狀div相對上乙個div的絕對定位，只需要給上乙個div的定位加上 相對定位 relative 屬性即可，一般不會影響父div的顯示效果。2 盡量使用 ...
CSS基礎布局
一 瀏覽器如何解析css 三種引用樣式表 1 嵌入式 2 style標籤 3 外部css檔案 二 盒模型 html中每乙個塊元素基本上都可以看成乙個盒子，這個盒子的寬和高，外加內邊距 邊框粗細和外邊距這些東西，決定了元素的尺寸。如果定義了乙個寬50畫素的盒模型，padding 2px，border ...
css基礎 布局
背景設定 屬性作用 background size 背景圖的大小，cover,contain background repeat 平鋪background position 背景的位置 background origin 對齊方式 object fit 可以使適應背景的大小 box sizing 在...