最開始老的一代**開發，布局都是通過**實現的。
這樣可以形成規整的網格布局，但是也會帶來一定的複雜性。比如想要新增某個頁面元素，就有可能要改動整個**，新增很多無用的行或者列。
後來，衍生出不少的css框架，他們遮蔽了底層的css語法，只需要按照特定的使用方式就能實現網格布局。這樣對於開發者來說，好處自然是方便了；但是也帶來了一定的麻煩，比如網格如果不符合使用者的應用場景，需要自定義擴充套件，這就麻煩了；再比如作出的**不易除錯；**需要引入額外的檔案等等。總的來說，還是利大於弊吧，不然bootstrap等等也不會現在火成這樣。
網上有很多關於布局的文章，什麼雙飛翼啊等等。
這裡先從最原始的來介紹。考慮到螢幕的寬度不同，有可能造成網頁的橫向拉伸，為了避免一樣過於長，從而導致難於閱讀，因此一般的類似部落格的**都會把寬度設定為乙個固定的值。當螢幕的寬度拉伸時，也不會改變頁面的寬度：
設定的方式大致如下：
width: 920px;
margin: 0 auto;/*水平居中*/
text-align: left;
乙個部分向左浮動，乙個部分向右浮動。為什麼這樣呢？
這是因為如果全部採用向左浮動，如果主體部分由文字換行等，由於畫素的偏差可能導致最右邊的文字框擠出螢幕，導致無法閱讀。因此乙個向左，乙個向右，中間留有一定的隔離區（空白的地方），當有擠出的部分也會顯示在隔離區的部分，而不會影響閱讀。
.content .primary
.content .secondary
min-width和max-width其實是很長用的。
比如在做響應式web時，考慮到瀏覽器的伸縮，想要**也隨之改變，那麼就會設定寬度高度為一定的百分比，或者通過響應式的語法實現。這時，如果文字內容縮小的很小，寬度很窄可能會影響閱讀，因此需要把寬度設定為乙個最小值。只有螢幕寬度大於一定的值時，頁面才會隨之改變。類似的，避免螢幕過大**拉伸變形，也可以設定乙個最大的寬度值。
這個屬性對於和div都有很好的效果。
posted @
2016-02-15 14:40
xingoo 閱讀(
...)
編輯收藏
CSS布局那點事兒
最開始老的一代 開發，布局都是通過 實現的。這樣可以形成規整的網格布局，但是也會帶來一定的複雜性。比如想要新增某個頁面元素，就有可能要改動整個 新增很多無用的行或者列。後來，衍生出不少的css框架，他們遮蔽了底層的css語法，只需要按照特定的使用方式就能實現網格布局。這樣對於開發者來說，好處自然是方...
CSS定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...
css定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...