CSS布局相关汇总
1.margin外邊距
margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的。
margin 可以單獨改變元素的上下左右邊距，也可以一次改變所有的屬性。
?
| margin | 簡寫屬性。在一個聲明中設置所有外邊距屬性。 |
| margin-bottom | 設置元素的下外邊距。 |
| margin-left | 設置元素的左外邊距。 |
| margin-right | 設置元素的右外邊距。 |
| margin-top | 設置元素的上外邊距。 |
2.padding填充
當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
單獨使用 padding 屬性可以改變上下左右的填充。
| padding | 使用簡寫屬性設置在一個聲明中的所有填充屬性 |
| padding-bottom | 設置元素的底部填充 |
| padding-left | 設置元素的左部填充 |
| padding-right | 設置元素的右部填充 |
| padding-top | 設置元素的頂部填充 |
3.尺寸
尺寸屬性：
-
auto：默認。瀏覽器會計算出實際的高度
-
length：使用 px、cm 等單位定義高度
-
%：基于包含它的塊級對象的百分比高度
| height | 設置元素的高度 |
| line-height | 設置行高 |
| max-height | 設置元素的最大高度 |
| max-width | 設置元素的最大寬度 |
| min-height | 設置元素的最小高度 |
| min-width | 設置元素的最小寬度 |
| width | 設置元素的寬度 |
4.隱藏元素
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產生不同的結果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
h1.hidden {visibility:hidden;} h1.hidden {visibility:visible;}display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
h1.hidden {display:none;}5.更改元素顯示
塊元素是一個元素，占用了全部寬度，在前后都是換行符。
塊元素的例子：<h1>、<p>、<div>
內聯元素只需要必要的寬度，不強制換行。
內聯元素的例子：<span>、<a>
可以更改內聯元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，并仍然遵循web標準。
下面的示例把列表項顯示為內聯元素：
li {display:inline;}下面的示例把span元素作為塊元素：
span {display:block;}6.元素定位position
position 屬性指定了元素的定位類型。
position 屬性的五個值：
-
static
-
relative
-
fixed
-
absolute
-
sticky
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決于定位方法。
static 定位
HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
靜態定位的元素不會受到 top, bottom, left, right影響。
div.static {position: static;border: 3px solid #73AD21; }fixed 定位
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：
p.pos_fixed {position:fixed;top:30px;right:5px; }relative 定位
相對定位元素的定位是相對其正常位置。移動相對定位元素，但它原本所占的空間不會改變。
h2.pos_left {position:relative;left:-20px; } h2.pos_right {position:relative;left:20px; }absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>:
h2 {position:absolute;left:100px;top:150px; }sticky 定位
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。
<style> div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50; } </style> </head> <body> ? <p>嘗試滾動頁面。</p> <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 屬性。</p> ? <div class="sticky">我是粘性定位!</div> ? <div style="padding-bottom:2000px"><p>滾動我</p><p>來回滾動我</p><p>滾動我</p><p>來回滾動我</p><p>滾動我</p><p>來回滾動我</p> </div>效果圖如下：
可以發現剛開始該元素在它的正常位置。當往下移動到該元素到達頂點后，位置固定到了設置的top:0的位置保持不動。
?
7.內容溢出overflow
CSS overflow 屬性可以控制內容溢出元素框時在對應的元素區間內添加滾動條。
注意:overflow 屬性只工作于指定高度的塊元素上。
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
下面演示一個scoll屬性的效果圖：
?
8.float浮動
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
| clear | 指定不允許元素周圍有浮動元素。 | left right both none inherit |
| float | 指定一個盒子（元素）是否可以浮動。 | left right none inherit |
元素怎樣浮動
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環繞在它左邊。
彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
在這里，我們對圖片廊使用 float 屬性：
.thumbnail {float:left;width:110px;height:90px;margin:5px; } </style> </head> ? <body> <h3>圖片庫</h3> <p>試著調整窗口,看看當圖片沒有足夠的空間會發生什么。</p> <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"> <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"> </body>效果圖如下：
?
清除浮動
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側不能出現浮動元素。
.text_line {clear:both; }9.彈性盒子
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。以下元素展示了彈性子元素在一行內顯示，從左到右:
<!DOCTYPE html> <html> <head> <style> .flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey; }.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px; } </style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div></body> </html>?
下表列出了在彈性盒子中常用到的屬性:
| display | 指定 HTML 元素盒子類型。 |
| flex-direction | 指定了彈性容器中子元素的排列方式 |
| justify-content | 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。 |
| align-items | 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。 |
| flex-wrap | 設置彈性盒子的子元素超出父容器時是否換行。 |
| align-content | 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊 |
| flex-flow | flex-direction 和 flex-wrap 的簡寫 |
| order | 設置彈性盒子的子元素排列順序。 |
| align-self | 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 |
| flex | 設置彈性盒子的子元素如何分配空間。 |
總結
- 上一篇： CSS样式相关汇总
- 下一篇： 使用CSS样式对表格进行美化并对伪类的使