css 樣式
css 單位 -尺寸
% : 百分比
in : 英吋
cm : 厘公尺
mm : 公釐
pt : 磅(1pt等於1/72英吋)
px : 畫素(計算機螢幕上的乙個點)
em : 1em等於當前的字型尺寸，2em等於當前字型尺寸的兩倍
css 單位 - 顏色
. rgb(x,x,x): rgb值，如 rgb(255,0,0)
. rgb(x%,x%,x%): rgb百分比值，如rgb(100%,0%,0%)
. #rrggbb : 十六進製制數，如 #ff0000
. #rgb : 簡寫的十六進製制數，如#f00
尺寸屬性
. width 和 height
. overflow:當內容溢位元素框時如何處理
-- visible
-- hidden
-- scroll
-- auto
邊框屬性
. 簡寫方式
-- border:width style color;
. 單邊定義
-- border-left/right/top/bottom:width style color;
. border-width
-- border-left/right/top/bottom-width
. border-style
-- border-left/right/top/bottom-style
. border-color
-- border-left/right/top/bottom-color
邊框屬性
input.btn
框模型. 框模型 (box model)定義了元素框處理元素內容、內邊距、邊框和外邊距的方式
框模型. width 和 height 指內容區域的寬頻和高度
. 增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的綜尺寸
例如:#box
內邊距. 內邊距: 和內容元素之間的距離
-- padding:value;
. 單邊設定
-- padding-top/right/botton/left:value;
. 簡寫方式
-- padding: value1 value2 value3 value4;
top right bottom left
外邊距. 外邊距: 與下乙個元素之間的空間量
-- margin:value;
. 單邊設定
-- margin-top/right/bottom/left:value;
. 簡寫方式
-- margin：value1 value2 value3 value4;
top right bottom left
外邊距. margin 可取值為auto, 由瀏覽器計算外邊距
div
專案案例:
netctoss ------
admin_list 頁面布局
背景屬性
. 背景色 background-color
. 背景影象
background-image:url();
background-repeat:repeat/repeat-x/repeat-y/no-repeat;
background-position:left top;
background-attachment:scroll/fixed;
. 組合設定：
專案案例
netctoss -----
admin_list 頁面背景
文字格式化
. 指定字型: font-family:value1,value2;
. 字型顏色: color:value;
. 字型大小: font-size:value;
. 字型加粗: font-weight:normal/bold;
. 文字排列: text-align:left/right/center;
. 行高: line-height:value;
. 文字修飾: text-decoration:none/underline;
. 文字縮排: text-indent:value;
專案案例：
netctoss-----
admin_list 頁面文字
**樣式
. 垂直對齊
vartical-align:top/middle/bottom;
. 邊框合併
border-collapse:separate/collapse;
. 邊框邊距
border-spacing:value;
專案案例:
netctoss----
admin_list 頁面**
浮動定位
. 浮動定位是指
-- 將元素排除在普通流之外
-- 將浮動元素放置在包含框的左邊或者右邊
-- 浮動元素依舊位於包含框之內
. 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框
的邊框為止。
float 屬性
. 浮動是指，將元素排除在普通流之外
. 並將元素放置在包含框的左邊或者右邊，
-- 浮動的框可以向左或向右移動，直到其外邊緣碰到
包含框或另乙個浮動框的邊框為止
. 設定浮動
float:none/left/right;
clear 屬性
. clear 屬性用於清除浮動所帶來的影響
. clear:none/left/right/both;
-- 定義了元素的哪邊上不允許出現浮動元素
div text
例如：p text
p text
頁面顯示:
div text p text div text
p text
專案案例:
netctoss ----
admin_list logo
顯示方式 display
. 塊級元素: 如 、或等元素
. 行內元素/內聯元素:如、等元素
. 使用display 屬性來修改元素框的顯示方式，即改變生成的框的型別
display:none/block/inline
顯示方式 display
a 鏈結1
鏈結2鏈結3
鏈結4
列表樣式
list-style-type:none/disc/circle/等 ;
list-style-image:url();
例如：li
li a
ul.parent li
ul.parent li ul li 相簿
專案案例:
netctoss -------
admin_list 導航欄
定位概述
. 普通定位
-- 頁面中的塊級元素框從上到下乙個接乙個地排列
-- 每乙個塊級元素都會出現在乙個新行中
-- 內聯元素將在一行中從左到右排列水平布置
. 浮動
. 相對定位
定位屬性
. position 屬性 : 更改定位模式為相對定位、決定定位或者固定定位
-- position : static/relative/absolute/fixed;
. 偏移屬性:實現元素框位置的偏移
-- top/bottom/right/left: value;
. 堆疊順序
-- z-index:value;
相對定位
. 元素仍保持其未定位前的狀態
. 原本所佔的空間仍保留
. 元素框會相對與它原來的位置偏移某個距離
div
絕對定位
. 將元素的內容從普通流中完全移除
. 並使用偏移屬性來固定該元素的位置
-- 相對於最近的已定位祖先元素
-- 如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊，
比如 body 元素
絕對定位
div.parent
div.child12
絕對定位
div.parent
div.child
專案案例：
netctoss ------
admin_list 操作提示框
（9）CSS背景控制
前面已經提到，css將每個元素視為在單獨的框中進行處理，那麼我們可以通過一些屬性改變元素對應的框的背景，以改善網頁樣式。1 background color 為任何元素指定單一背景顏色 該屬性的值可以為顏色名 16進製制編碼或者rgb值。2 background image 將任一元素的背景設定為一...
9 CSS樣式引入
標籤上使用style屬性直接引入css樣式，即內聯樣式。style color red font size 24px 這是乙個段落p body 在頭部標籤內通過設定css樣式，即內部樣式。charset utf 8 網頁標題title pstyle head 這是一段文字p body html 新建...
前端網頁學習9（css盒子）
border 邊框 padding 內邊距 margin 外邊距 content 內容 盒子的長寬實際與內容的長寬相同。三大屬性 邊框顏色，邊框線型，邊框粗細 四個邊可分開設定。邊框定義可以簡寫，且三大屬性無順序要求。四個邊可分開設定。可共同設定意義如下 padding 10px 四個內邊距都是10...