鳴黎的筆記: 8月 2016

2016年8月5日星期五

Css-基本認知( 四 )_佈局方法

我們在上一篇有介紹 : 基本樣式

接下來要如何去佈局您的畫面
通常我們比較常拿 Div ( 塊狀模型 ) 來做區塊
然後再去排 Div 的位置與大小
如下圖 :

什麼是 Div ( 塊狀模型 ) ?
通常我們用來做不同的區塊特性
通常 Div 預設是直接佔用一整行

在網頁中，我們有幾種佈局的方法 ;

流動模型 ( Flow )
浮動模型 ( Float )
層次模型 ( Layout )

浮動模型

剛剛有提到 Div 是直接佔用一整行

那如果我們要呈現像上方的圖( 樣式 )就可以用浮動模型 ( Float )

( * 如果有兩個以上的塊狀，要被調整的前一個塊狀要設定 )
例如上圖 : Div_2 要靠 Div_1 右邊，所以要對 Div_1 設置

用法	說明	備註
float:left;	調整 Div 區塊對應位置	left ( 靠左 )、right ( 靠右 )

層次模型

模型層	用法	說明
絕對位置	position:absolute;	模塊移動到對應的座標位置
相對位置	position:relative;	模塊移動到對應的座標位置但實際是占用到原本的空間
固定位置	position:fixed;	模塊移動到對應的座標位置但不隨網頁的滾動產生移動

<!DOCTYPE html>
<html>
<style>
#box1{
    width:150px;
    height:150px;
    border:2px red solid;
    position:absolute; // 可更改參數看這三種的差異
    left:50px;
    top:50px;
}
</style>
<body>
    <div id="box1"></div>
    <div>Hello world !!!</div> 
</body>
</html>

歡迎轉載，請註明出處。

2016年8月4日星期四

Css-基本認知( 三 )_基本樣式

前幾篇我們有介紹甚麼是 Css 、宣告樣式

這一篇最主要是最常用到的樣式
比如說是 : 文字、粗細、顏色...等。

List :

文字
邊框
填充 ( Padding )
邊界 ( Margin )
填充和邊界的差異 ?

1 . 常用於文字系列

用法	說明	備註
font-family:"Microsoft Yahei";	文字字體
font-size:"12px";	文字大小
color:"#555";	文字顏色
font-weight:bold;	粗體字
font-style:italic;	斜體字
text-decoration:underline;	底線
text-decoration:line-through;	刪除線
text-indent:2em;	字句空兩字
line-height:2em;	上下行間距
letter-spacing:20px;	文字間距
text-align:center;	對齊方式	felt、right、center 模塊也適用

2 . 邊框系列

用法	說明	備註
border-width:3px;	線寬
border-style:solid;	邊框形狀	dashed( 虛線 )、 dotted( 點線 ) solid( 實線 )
border-color:yellow;	邊框顏色

一般邊框

div{
    border : 3px solid yellow;
}
等於
div{
    border-width:3px;
    border-style:solid;
    border-color:yellow;
}

特殊邊框

border-top:1px solid red; // 上方
border-right:1px solid red; // 置右
border-left:1px solid red; // 置左

3 . 填充

上右下左
div{padding:10px;}

上下 、 左右
div{padding:10px 20px;}

上右下左( 順時針 )
div{padding:20px 10px 15px 30px;}
等於
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

4 . 邊界

上右下左
div{margin:10px;}

上下 、 左右
div{margin:10px 20px;}

上右下左( 順時針 )
div{margin:20px 10px 15px 30px;}
等於
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

5 . 填充和邊界的差異

padding 和 margin 最大的差別是 :
padding : 在邊框內。
margin : 在邊框外。

歡迎轉載，請註明出處。

2016年8月5日 星期五