前端開發之CSS

• 前端開發之CSS
• 一、CSS之邊框
• 二、display屬性
• 三、盒子模型
• 四、CSS之浮動
  • float 屬性
  • clear 屬性
  • 清除浮動
• 五、CSS之溢位
  • Overflow
• 六、CSS之定位
  • position 屬性
• 六、CSS之重疊元素
  • Z-index

一、CSS之邊框

​ CSS border屬性允許您指定元素邊框的寬度、樣式和顏色。

​ 支援單側修改、屬性名簡寫

1、單側修改-以左側為例（left）
	border-left-width:5px;
	border-left-styl:dotted;
	border-left-color:red

	簡寫：
		border-left：5px dotted red

2、多側同時修改
	border：5px dotted red

3、變寬倒角
	border-radius：50%
 

CSS 邊框樣式

border-style 屬性指定要顯示的邊框型別。

允許以下值：

• dotted - 定義點線邊框
• dashed - 定義虛線邊框
• solid - 定義實線邊框
• double - 定義雙邊框
• groove - 定義 3D 坡口邊框。效果取決於 border-color 值
• ridge - 定義 3D 脊線邊框。效果取決於 border-color 值
• inset - 定義 3D inset 邊框。效果取決於 border-color 值
• outset - 定義 3D outset 邊框。效果取決於 border-color 值
• none - 定義無邊框
• hidden
  - 定義隱藏邊框

二、display屬性

補充:

​ 1、visibility: hidden 與none較為相似，隱藏的不徹底，頁面會保留標籤位置

​ 2、行內標籤無法設定長款，只有塊兒級標籤可以設定

三、盒子模型

​ 可以將標籤看成是一個盒子

• 1、盒子裡面的實際物體

  • content（內容）

• 2、盒子內物體與盒子牆壁的距離

  • padding（內邊距、內填充）

• 3、盒子的厚度

  • border（變寬）

• 4、盒子與盒子的距離，可以看成多個盒子排列在一起

  • margin（邊境）

/*    !*padding: 20px; 上下左右*!*/
/*    !*padding: 20px 40px;  上下   左右*!*/
/*    !*padding: 10px 20px 30px;上  左右  下*!*/
/*    !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin與padding用法一致

針對標籤的巢狀 水平方向可以居中
margin: 0 auto;

四、CSS之浮動

float 屬性

float 屬性用於定位和格式化內容，例如讓影象向左浮動到容器中的文字那裡。

float 屬性可以設定以下值之一：

• left - 元素浮動到其容器的左側
• right - 元素浮動在其容器的右側
• none - 元素不會浮動（將顯示在文字中剛出現的位置）。預設值。
• inherit - 元素繼承其父級的 float 值

clear 屬性

clear 屬性指定哪些元素可以浮動於被清除元素的旁邊以及哪一側。

clear 屬性可設定以下值之一：

• none - 允許兩側都有浮動元素。預設值
• left - 左側不允許浮動元素
• right- 右側不允許浮動元素
• both - 左側或右側均不允許浮動元素
• inherit - 元素繼承其父級的 clear 值

使用 clear 屬性的最常見用法是在元素上使用了 float 屬性之後。

在清除浮動時，應該對清除與浮動進行匹配：如果某個元素浮動到左側，則應清除左側。您的浮動元素會繼續浮動，但是被清除的元素將顯示在其下方。

清除浮動

​ 如果一個元素比包含它的元素高，並且它是浮動的，它將“溢位”到其容器之外：

​ 然後我們可以向包含元素新增 overflow: auto;，來解決此問題：

.clearfix {
  overflow: auto;
}

​ 只要您能夠控制外邊距和內邊距（否則您可能會看到滾動條），overflow: auto clearfix 就會很好地工作。但是，新的現代 clearfix hack 技術使用起來更安全，以下程式碼被應用於多數網站：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

五、CSS之溢位

Overflow

overflow 屬性指定在元素的內容太大而無法放入指定區域時是剪裁內容還是新增滾動條。

overflow 屬性可設定以下值：

• visible - 預設。溢位沒有被剪裁。內容在元素框外渲染
• hidden - 溢位被剪裁，其餘內容將不可見
• scroll - 溢位被剪裁，同時新增滾動條以檢視其餘內容
• auto - 與 scroll 類似，但僅在必要時新增滾動條

註釋：overflow 屬性僅適用於具有指定高度的塊元素。

註釋：在 OS X Lion（在 Mac 上）中，滾動條預設情況下是隱藏的，並且僅在使用時顯示（即使設定了 "overflow:scroll"）。

六、CSS之定位

position 屬性

position 屬性規定應用於元素的定位方法的型別。

有五個不同的位置值：

• static靜態(標籤預設的狀態 無法定位移動)
• relative相對定位(基於標籤原來的位置)
• fixed固定定位(基於瀏覽器視窗固定不動)
• absolute絕對定位(基於某個定位過的父標籤做定位)
• sticky據使用者的滾動位置進行定位。

元素其實是使用 top、bottom、left 和 right 屬性定位的。但是，除非首先設定了 position 屬性，否則這些屬性將不起作用。根據不同的 position 值，它們的工作方式也不同。

        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }

六、CSS之重疊元素

Z-index

在對元素進行定位時，它們可以與其他元素重疊。

z-index 屬性指定元素的堆疊順序（哪個元素應放置在其他元素的前面或後面）。

元素可以設定正或負的堆疊順序：

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}