? ? css布局中定位機制主要是普通的流，也就是說按照HTML文本的順序在窗口上從上到下、從左到右去顯示，遇見塊級元素就換行顯示。為了更進一步的控制，我可以使用相對定位、絕對定位、固定定位以及浮動。

? ? ?相對定位（position:relative）是相對于自身而言的，但會在原來的地方留出空白，所以不會影響后序的流；可能出現這個元素覆蓋到其他元素上的情況發生。百分數表示的寬度相對于父元素的寬度而言的。

? ? 絕對定位(position:absolute)會讓該元素從流中去掉，其他元素不會再看見它，可以產生覆蓋的效果；其定位是相對于離它最近的的非普通流的父元素（position非static）的左上角，否則一直到原始的盒子可能是body。其百分數表示的寬度是源自于其定位元素的寬度的。通常在父元素中使用position:relative;子元素中使用position:absolute;

? ? 固定定位(position:fixed):這種定位是相對于瀏覽器窗口的，百分數表示的寬度也是相對于瀏覽器窗口的。該元素會從普通流中移除。

? ? 這幾種都可以設置z-index來改變各部分的相對屏幕位置。而且都可以在塊級元素和內聯元素上使用。

? ?float：在元素的父元素盒子里盡量向左或是右浮動，文本可以在周圍浮動。而且，最好給一些元素加上寬度，否則會出現元素鋪滿整個盒子的情況發生。

? ?當一個包含元素內只直接包含有一個浮動元素，那么包含元素會被認為高度為0，可以使用overflow：auto;width:100%來改變這種狀況。

? 我們可以設置任何元素的margin，但是要使用margin:0px auto.使某個元素居中則要將這個元素設為塊級元素。

? 關于隱藏：

? ? ? ?可以有diplay:none,這樣會從流中去掉，可以將一個盒子的visibility:hidden.這樣就不會顯示盒子了，但盒子會繼續占有那個位置，這個和empty-cells：hide的效果是一樣的。<input type="hidden">可以隱藏這個控件。

? ? ? 背景關系：從下自上依次是：box-shadow(outer)、background-color、background-image、box-shadow（inset）、border。?

? ? ? 一個網站必須要明確主要受眾人群，網站主要功能；建立清晰易用的網站。其次，視覺層次很重要，瀏覽者未必想去翻看網頁，他們需要快速找到內容。高視覺對比度就會更易突出線索。其次將相關內容組織起來更加讓瀏覽者明白相應邏輯。其次，應當保持風格的協調、連貫性。借助相似的風格來建立一種默認的印象。

? ?導航要做到：清晰、簡潔、精選、連貫、交互好、告知位置。?

? ?css已經擁有了80多項規范，這讓其變得復雜，即使是w3c工作組css起草專家也難以說精通各方面；css已經形成了自己的開發者圈子、專業的技術會議、框架、工具鏈。原本看似簡單的屬性組合在一起之后變得極為復雜。索性的是各大瀏覽器如今都按照標準來（標準不只是強制的），這樣得以按以下原則來設計代碼：DRY、可維護、靈活、輕量級。

? ?

轉載于:https://www.cnblogs.com/hustliliangmin/p/5811901.html

總結

以上是生活随笔為你收集整理的css 中的若干心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。