CSS的常用屬性（二）

border-(top/bottom/left/right)-style:solid 邊框的風格 如(solid 實線，dotted 點線，dashed 虛線)

border-top-color:#aaa 邊框顏色

border-top-width:20px 邊框粗細

邊框四個方向連寫： 如border-color:#000

邊框屬性連寫：border-top:#555 solid 5px

四個方向邊框屬性同寫：border:12px dashed 10px

注意： 沒有順序要求，但邊框風格也就是線型不能少

補充：

邊框合併：

border-collapse:collapse

去掉邊框：

border:0 none

去掉路輪廓線：

outline-style:none

padding-left:20px;

padding-right:10px;

padding-top:30%;

padding-bottom:40%;

屬性連寫：

padding:20px; 上下左右都為20px

padding:10px 20px; 上下為10px，左右為20px

padding:10px 20px 30px; 上內邊距為10px，左右為20px，底為30px

padding:10px 20px 30px 40px; 上10px，右20px，下30px，左40px

注意： 給盒子指定寬高，在裡面使用padding會撐大盒子

補充： 盒子的寬度等於： 定義的寬度+邊框寬度+左右內邊距

margin(與內邊距使用方法相似):margin: 20px

margin:20px auto  (auto表示自適應，個人理解就是居中)

補充： 兩個盒子垂直，上面的盒子設定下邊距。下面的盒子設定下邊距，兩個盒子的邊距取設定邊距大的那個

解決：巢狀的盒子外邊距塌陷

當給子盒子裡設定如margin-top:10px時，父盒子相對於頂部向下移動了10px，而子盒子相對于父盒子沒有移動

兩種方法解決： 第乙個是給父盒子設定乙個邊框；第二個方法是給父盒子設定：overflow:hidden;(內容溢位元素框時隱藏)

補充： 行內元素可以定義左右的內外邊距，上下會被忽略；行內塊可以定義內外邊距

float:left / right

特點：

元素浮動後不佔據原來的位置(脫標)

浮動的盒子在一行顯示(除非邊框已經無法容納)

行內元素浮動後會轉化成行內塊元素

清除浮動的方法：

clear:left / both / right  用的最多的是clear: both

第一種方法：

第二種方法： overflow: hidden

注意： 如果內容出了盒子，則不能使用這個方法

第三種方法：偽元素清除浮動(推薦使用)

.clearfix:after{

content: ".";

display: block;

height: 0;

line-height: 0;

visibility: hidden;  規定元素不可見(但會佔據頁面上的空間)

clear: both;

相容ie瀏覽器：

.clearfix{

zoom: 1;

CSS的常用屬性（二）

border top bottom left right style solid 邊框的風格 如 solid 實線，dotted 點線，dashed 虛線 border top color aaa 邊框顏色 border top width 20px 邊框粗細 邊框四個方向連寫 如border co...

css 筆記 二 常用屬性

文字對齊方式屬性 文字修飾屬性 文字空白字元屬性 文字大小寫 字元間距 背景屬性 寫給看到最後的你 屬性含義 font fimily 字型型別 可以寫中文 比如 楷體 但這是不建議的 詳細字型可以參考 html 常見字型 font style 斜體 常用3個值 normal正常顯示 italic文字...

CSS屬性（常用的屬性）

css屬性 常用的屬性 一 文字與字型屬性 1.字型屬性 1 font size 字型的大小 例如 font size 14px em當前物件內文字字型大小 pt絕對長度單位 多少個點的單位 px相對長度單位 畫素 2 font family 字型的型別 例如 font family 隸書 宋體 a...