一，左右布局有一下幾種方式：
1，float
2，position
3，flex
4，grid
主要介紹下grid。舉一下例子：
twothree
four
five
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50px 60px;
grid-auto-rows: 200px; }
grid-template-columns: 50% 50%; 即設定容器包含兩個列，且各列寬度為50%。
grid-template-rows: 50px 50px; 即設定容器中第一行高度為50px，第二行高度為60px，未給第三行設定高度。
grid-auto-rows: 200px; 即未指定行高的網格元素都取此值作為高度。
二，左中右布局
方法同上
三，水平居中
1，塊級元素內部的內聯元素水平居中：
在塊級元素上設定樣式： text-align: center;
2，塊級元素內部的塊級元素水平居中：
需為內部的塊級元素設定乙個寬度，不然寬度初始為100%，也沒必要做居中處理： 如 width: 100px;
在內部塊級元素上設定樣式： margin: 0 auto;
3，塊級元素內部有多個塊級元素，且此多個塊級元素需水平排列：
有兩種方式：
1 將內部塊級元素設定為：display: inline-block;
然後設定外部的塊級元素為：text-align: center;
2 直接在外部塊級元素上設定樣式：display: flex;
justify-content: center;
4，塊級元素內部有多個塊級元素，且此多個塊級元素垂直排列：
需為內部的塊級元素設定乙個寬度，在他們樣式中設定margin: 0 auto; 即可居中。
四，垂直居中
1，塊級元素內部的內聯元素垂直居中： （前提是父元素有固定高度，它們才需要設定垂直居中）
1 若文字只有一行： 直接設定塊級元素的height和line-height相等即可： 如 height: 100px; line-height: 100px;
2 若文字有多行： (
裡面的文字如果是英文，在沒有空格的情況下，瀏覽器會將它們當做是乙個詞，不會換行顯示)
直接設定塊元素樣式： display: flex; flex-direction: column; justify-content: center; 即可。
2，塊級元素內部的塊級元素垂直居中：（兩種方法。假設此時對內部塊元素的高度是未知的）
1 設定外部塊元素：position: relative;
內部塊元素：position: absolute; top: 50%; transform: translatey(-50%);
2 也可以使用flex: 在外部塊元素上設定： display: flex; flex-direction: column; justify-content: center;
五，塊元素內部的塊元素水平和垂直居中
1， 塊元素內部的內聯元素或塊元素垂直居中
設定包含塊元素： position: relative;
設定需要居中的子元素： . position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
若已知子元素的高度和寬度，那麼可以用margin來代替transform。
2，可以使用flex：
設定包含塊元素：display: flex; justify-content: center; align-items: center;
布局的簡單介紹
線性布局 linearlayout 分為水平和垂直兩種方式排列，通過屬性android orientation vertical 控制。相對布局 relativelayout 相對布局relativelayout相對排列，子元素可以以父元素的相對位置排列，也可以以某個元素排列。幀布局 framela...
css簡單介紹
日常專案推進中，各類開發人員經常遇到的乙個問題就是頁面的樣式調整問題，有時候專案組的開發人員經常會自己親自上陣調整樣式，這樣可以快速的解決問題，但同時也有可能造成一些隱患，接下來就我在工作中參與的樣式調整經驗分享一些正確 姿勢 css最核心的概念，就是盒模型，頁面上的每乙個元素都可以看做是乙個盒子，...
簡單的css布局
對於初學者來說css的布局是至關重要的，這關係到整個網頁的外觀。乙個網頁的好壞其基礎就起源於此。以下是本人的隨文練習，較為粗糙，大神莫拍。html 左邊定寬200px 右邊自適應 著是乙個很簡單的兩列布局，左側定值，右側自適應。雖然看起來很簡單，但是其中涉及到margin的空間位移，譬如左側是將其先...