目錄
1.尺寸與邊框
1.尺寸機關:
2.顔色取值：
3.尺寸屬性(overflow)
4.邊框(border)
2.盒模型/框模型
2.外邊距margin
3.内邊距padding
盒子模型布局穩定性
1.尺寸與邊框
1.尺寸機關:
1. px 像素，最常用的機關，也是浏覽器預設機關
2. % 百分比 占據父元素對應屬性的占比
------以下為絕對機關，不常用---
3. in 英寸 1 in = 2.54 cm
4. pt 英磅 1 pt = 1/72 in
5. cm 厘米
6. mm 毫米
注意：css中的尺寸機關是不能省略的，0除外
2.顔色取值：
1. 取值英文單詞 red green blue ...不考慮機關
2. 取值十六進制 #aabbcc
每兩位一組代表一種三原色 三組分别對應紅綠藍
每一位取值範圍 0~9 a~f
3. 短十六進制 #abc
由三位組成，每一位就代表了一種三原色
浏覽器在渲染時會自動對每一位進行重複，補全成六位的十六進制
#abc = #aabbcc
4. css 提供的顔色表示法
rgb(r,g,b) 每個值取值 0~255
紅色 rgb(255,0,0)
5. css提供的顔色表示法
rgba(r,g,b,alpha) 顔色取值 0~255 alpha 表示透明度 取值 0-1(透明-不透明)
3.尺寸屬性(overflow)
1.作用：
改變元素的寬度和高度
屬性 width height
取值為數值，機關為px 或 %
2.使用：
所有的塊級元素可以設定寬高，預設情況寬度與父元素保持一緻，高度由内容決定;
所有的行内元素不可以設定寬高，大小由内容決定
3.内容溢出處理:
屬性：overflow
取值：
1.visible 預設值，溢出部分可見
2.hidden 溢出部分隐藏不可見
3.scroll 設定内容滾動顯示，顯示滾動條
4.auto 自動 當内容溢出時，自動添加滾動條并且可用
注意：
scroll 表示顯示水準和垂直方向的滾動條，不管是否真的需要
auto 根據内容需要，添加水準或者垂直方向的滾動條
4.邊框(border)
border : border-width || border-style || border-color
border-width border-style border-color 三個值缺一不可
e.g. border : 5px solid red;
border-width:設定邊框線的寬度
border-style：設定邊框線的樣式，取值
1.solid 實線
2.dashed 虛線
3.dotted 點線
4.double 雙線(不常用)
border-color:顔色值，可以使用transparent表示透明色
3.特殊用法
取消邊框 border: none
4.單邊框設定
border 屬性用來設定 上右下左四個方向的邊框
四個方向單獨設定邊框：
border-top : 5px solid red;
border-right : 10px solid green;
border-bottom : 4px solid gray;
border-left : 1px solid blue;
5.網頁三角标制作
1.元素尺寸為0
2.為元素添加四個方向的邊框
3.設定其中三條邊框顔色為透明transparent
6.圓角邊框
屬性:border-radius
取值:px 或 %
作用:将邊框的直角變成圓角
e.g.
border-radius : 10px;表示四個角都按照10px的半徑去生成圓角
border-radius : 5px 10px 15px 20px;四個值代表了上右下左四個角
border-radius : 5px 10px;第一個值表示上下，第二個左右
border-radius : 5px 10px 15px;第四個預設和第二個值相同
注意：邊框圓角在元素不設定邊框的情況下依然有效，可以通過設定50%呈現圓形或橢圓形，修改元素顯示形狀
7.邊框陰影
屬性 box-shadow : h-offset v-offset blur spread color;
h-offset:陰影的水準偏移距離
取值為數字
取值為正，陰影向右偏移
取值為負，陰影向左偏移
v-offset:陰影的垂直偏移距離
取值為數字
取值為正，陰影向下偏移
取值為負，陰影向上偏移
blur:陰影的模糊程度
取值為數字
值越大，越模糊
spread:陰影擴大或是縮小的距離
取值為數字
取值為正，陰影會擴大
取值為負，陰影會收縮
color:設定陰影顔色
8.浏覽器坐标系
預設浏覽器左上角為原點，向右向下為X軸和Y軸正方向，向左向上為負方向
9.表格的細線邊框
table{ border-collapse:collapse; } collapse 單詞是合并的意思
border-collapse:collapse; 表示邊框合并在一起。
2.盒模型/框模型
1.元素皆為框
盒模型：元素在文檔中占據尺寸的計算方式
組成：外邊距margin 邊框border 内邊距padding 内容尺寸
計算方式：
标準盒模型：
最終width=左右外邊距+左右邊框+左右内邊距+内容寬度
最終height=上下外邊距+上下邊框+上下内邊距+内容高度
（了解）怪異盒模型：
元素内容寬度=左右内邊距+邊框+内容
2.外邊距margin
margin屬性用于設定外邊距。設定外邊距會在元素之間建立“空白”， 這段空白通常不能放置其他内容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟内邊距相同。
margin:0 auto;表示自動，可以用來設定元素居中
外邊距實作盒子居中
1. 必須是塊級元素。
2. 盒子必須指定了寬度（width）
.header{ width:960px; margin:0 auto;}
文字盒子居中圖檔和背景差別
1. 文字水準居中是 text-align: center
2. 盒子水準居中 左右margin 改為 auto
3. 插入圖檔 我們用的最多 比如産品展示類
4. 背景圖檔我們一般用于小圖示背景 或者 超大背景圖檔
具有預設外邊距的元素
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0
}
清除元素的預設内外邊距
* {
padding:0;
margin:0;
}
外邊距合并
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。
相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上内邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
1. 可以為父元素定義1像素的上邊框或上内邊距。
2. 可以為父元素添加overflow:hidden。
content寬度和高度
1、寬度屬性width和高度屬性height僅适用于塊級元素，對行内元素無效（ img 标簽和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合并的情況。
3、如果一個盒子則會和父親一樣寬 占滿父親的寬度， 如果此盒子沒有給定寬度 則padding 不會影響本盒子大小。
3.内邊距padding
padding屬性用于設定内邊距。 是指 邊框與内容之間的距離。
padding-top:上内邊距
padding-right:右内邊距
padding-bottom:下内邊距
padding-left:左内邊距
1個值
padding：上下左右邊距
比如padding: 3px; 表示上下左右都是3像素
2個值
padding: 上下邊距 左右邊距
比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3個值
padding：上邊距 左右邊距 下邊距
比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4個值
padding:上内邊距 右内邊距 下内邊距 左内邊距
比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針
具有預設内邊距的元素
ol,ul,input(文本框，密碼框，按鈕會存在)
ol,ul,input{
padding:0;
}
頁面開發時，清除浏覽器的預設邊距
body,ul,ol,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}
input 可以根據需求單獨設定
4.盒模型屬性的支援度
1.盒模型屬性:margin border padding width height
2.塊元素對盒模型屬性完全支援
3.行内元素對盒模型屬性部分支援
行内元素可以設定 左右的内外邊距
不可以設定 寬高 上下内外邊距
盒子模型布局穩定性
按照 優先使用 寬度 （width） 其次 使用内邊距（padding） 再次 外邊距（margin）。
1. margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（讨厭）是以最後使用。
2. padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
3. width 沒有問題（嗨皮）我們經常使用寬度剩餘法 高度剩餘法來做
作業：
1.制作精美導覽列，内容不限
實作滑鼠懸停能夠改變背景色和文本色；
文本點選之後修改文本色
2.根據圖檔素材中作業.png 完成表單部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
body{
/*外邊距*/
margin: 0;
}
td{
/*右内邊距*/
padding-right: 30px;
float: left;
}
.uinput{
width: 298px;
height: 38px;
/*邊框*/
border: 1px solid #ccc;
/*内邊距*/
padding: 0 12px;
/*取消輪廓線*/
outline: none;
/*文本框預設文本尺寸較小,手動調整為16px*/
font-size: 16px
}
.rightText{
/*水準右對齊*/
text-align: right;
}
span input{
width: 18px;
height: 18px;
/*設定input img 與其他文本元素的對齊方式 上對齊*/
vertical-align: middle;
}
span{
margin-right: 50px;
}
a{
color: #999
}
.login,.regist{
width: 145px;
height: 38px;
border: 1px solid #64a131;
/*圓角*/
border-radius: 5px;
/*字型大小和居中 按鈕文本模式水準居中顯示*/
font-size: 18px;
/*行高*/
line-height: 38px;
}
.login{
background-color: #64a131;
color: white;
margin-right: 20px;
}
.regist{
color: #7bae55;
background-color: #f5ffed;
}
img{
display:inline-block;
}
</style>
</head>
<body>
<h2>會員登入</h2>
<img src="../web001/img/huiyuan.jpg">
<form action="login" method="get"></form>
<table>
<tr>
<td class="rightText">手機号</td>
<td>
<input type="text" name="uphone" class="uinput">
</td>
</tr>
<tr>
<td class="rightText">密碼</td>
<td>
<input type="password" name="upwd" placeholder="請輸入6-20位号碼字元" class="uinput">
</td>
</tr>
<tr>
<td></td>
<td>
<span><input type="checkbox" name="isSaved" checked>記住密碼</span>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >忘記密碼?</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >快捷登入</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="login" value="登入" class="login">
<input type="submit" name="button" value="注冊會員" class="regist">
</td>
</tr>
</table>
</body>
</html> ![html+css像素塊圖檔（遊戲搖桿）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)