網站設計布局

2016-07-19 閱讀：深圳網站建設設計

如果你已經設計的網站都在過去的十年中你肯定熟悉CSS 浮財產。由于工業（謝天謝地）采用表格布局的原則，在已選擇的武器大多數人使用奠定了我們的網頁，但它是最好的深圳網站建設選擇嗎？
盡管這種方法是定期對新設計師的挫折和困惑的原因的普及成為一個問題時，浮動元素是左“清除”。這些不明漂浮物可以導致從邋遢美學完成不多的問題。一個小項目，解決一個問題但在漂浮動態內容可以有點棘手的大型Web應用程序的工作時，這是很簡單的，吃了寶貴的時間和花費你的錢。
網站設計布局
一個更好的選擇
即使在正確使用時，浮動變化的正常的流程的文件可能會導致意外的行為和限制造型的選擇。由于浮不在正常流動，非定位塊盒之前創作的浮箱流垂直如果浮后不存在。與響應的設計，其中的大小是動態的、流動的填充可用空間，這是遠遠不夠的。如果有更好的辦法嗎？
flexbox 是網頁布局的令人興奮的未來，對于我們這些必須支持舊的瀏覽器，這仍然是一個遙遠的夢想。的顯示屬性，另一方面，有充分的支持，可以提供幾乎所有的布局功能浮子沒有缺點。

內聯塊 相救
的顯示特性，結合浮法和位置，確定類型的盒子或箱子，生成一個元素。在一個非常簡單的概括，塊級元素跨越容器迫使所有后續元素線下而內聯元素只有跨內容的寬度的整個寬度，允許任何內聯元素流下在同一行。
應用 顯示：內聯塊 一元生成內聯塊級容器。想在標簽中的文本。他們都是“內聯”與另一個而標簽本身是一個塊級容器。通過了解這種行為，我們可以使用顯示屬性內聯內容相映成趣。因為我們所有的元素保持在正常的流動，我們與倒塌的父元素沒有問題。在我看來，這是一個更清潔的解決方案，仍然取得了預期的結果。
看到筆內聯塊漂浮通過對 davidicus CodePen。

技術
這種方法在任何地方你通常會采用浮動。讓我們在經典的主/側邊欄的布局一看。我們有一個包裝的元素的HTML元素內的兩個孩子一樣：
＜div class=“包裝”>

＜div class=“內容”>

<！主要內容是這里-->

< / DIV > <！沒有空間

-->＜div class=“邊欄”>

<！-側邊欄的內容放在這里——>

< / DIV >

< / DIV >

網站設計布局
我們的CSS：
。包裝，

。主要內容，

。邊欄{

/改變盒模型簡單

Webkit盒尺寸：邊界盒；

-moz盒尺寸：邊界盒；

盒尺寸：邊界盒；

}

包裝{

字體。尺寸：1em；

填充：1.5em；

寬度：100%；

}

。主要內容，

。邊欄{

顯示：內聯塊；

垂直對齊：頂；

寬度：100%；

}
@媒體（最小寬度：700px）{

。內容{

右邊距：5%；

網站設計布局

網站設計布局
就像我們的主要內容和側欄布局。
的“浮動”的方向是由包裝部文本的對齊方式默認是左對齊確定以來，我們沒有做任何事情。然而，你可以很容易地將其設置為中心或實現一些布局，甚至不可能的浮動權（后來）。注意“沒有空間”的評論放在兩者之間的孩子div的 。包裝容器。 這是重要的 注意，而這樣做的原因是一個 “CON” 這個方法。

白色的空間
讓我們回到標簽的例子。當文字在HTML中所有的空格被包裹成一個單一的空白字符，無論你在你的HTML文檔的空間量。所以，你有你的“漂浮”在標記元素會登記為瀏覽器中它們之間的空間之間的差距，就像我們的段落文本。這自然會導致你的尺寸計算，被敲的最后一個元素到頁面的下一級。沒有問題！幸運的是我們有解決這個小問題的幾種解決方案。如：
設置字體大小：0；。我們面對的是一個字符的空間，空間設置字體大小為零的零空間的大小以及。這個問題，這是你必須撞的子元素的備份和任何他們的大小是完全出窗口的字體大小。這可以保持頂部有點麻煩，所以這種方式不理想。
刪除你的元素之間的空間在你的HTML，從而去除方程中的空間。這是我做的一個，但它看起來邋遢和使它更難閱讀。
你的元素之間添加一個HTML注釋也將刪除空格字符是在我們的例子。這是 我首選的方案。本文強調在大多數文本編輯器是這樣的音符和元素之間的對比可以顯著提高你的標志的可讀性了。這也將讓你保持實際的元素本身的適當縮進。

在為我工作，為什么要改變呢？
你可能會想，“這是好的，但為什么我會換一種方法，可以很好的給我嗎？“好吧，即使你是一個浮動的主人有某些事情是不能做的。例如:
難以捉摸的“中心浮”，這是經常需要，需要額外的標記和多個CSS屬性來實現。與顯示的方法，這是簡單地通過應用文本對齊：中心 的包裝。
選擇顯示方法最大的優點是垂直對齊你的內容的能力。有多少次你想中心元素的兄弟姐妹嗎？你可以使用定位與切緣陰性/翻譯技巧但又與響應，動態的環境，這是不可取的。相反，應用垂直對齊：中；將完全在你的部分沒有額外的工作，你每一次的中心元素。（見筆內聯塊漂浮通過對 davidicus CodePen。）

要把它包起來
在現實中不存在“一刀切”的時候，網頁設計，它真的可以歸結為個人的偏好。我仍然使用漂浮在某些情況下，有時真的是這份工作的最佳工具。我做的，但是感覺有一定的優勢，使用的顯示方法。從我的經驗，我發現它是最好的，處理布局最容易出錯的方法。對于那些你想探索這個方法，我創建了一個“只說不浮柵：公司內聯塊網格在 CodePen。