第一節：浮動說明
新增浮動的元素不佔據空間（脫離文件流）
注：只要子元素有浮動，父元素必須新增高度！！！（暫時性記住）
第二節：頁面布局
設計圖：
版式寬度：1920 1680 ...
網頁的版心：960 - 1200
結構規劃：
id名稱：網頁外圍結構
pc端 版心寬度不能用百分比！！！
怎樣讓版心左右居中？？
給要做居中的版心元素 新增 margin:0 auto;
第三節：css列表屬性：
ulol
dl研究列表的列表符號。
1：（了解）
list-style-type:
circle 空心圓
square 實心方塊
none 清除列表符號
3: （了解）
list-style-position:
inside (內容區域裡面)
outside (內容區域外面)
4: list-style:none;(重點 清除列表符號)
第四節：邊框屬性
1:邊框長在**
長在元素的寬高之外的 外圍
2：border：10px solid red;(簡寫/複合式寫法)
border-width:10px;
border-style:solid;
border-color:red;
常用的線條型別：
solid:實線
dashed：虛線
dotted：點狀線
double：雙線（雙層線條）
none:沒有 （清楚線條）
3：如何給單一方向新增邊框：
border-left:10px solid red;
border-right:10px solid red;
border-top:10px solid red;
border-bottom:10px solid red;
如何給單一方向邊框去掉
border：10px solid red;(簡寫/複合式寫法)
border-left:none;
4:border的其他設定方法：
border-width border-style border-color
這三個屬效能單獨拿出來進行設定
這三個屬性每個最多能接收4個屬性值
eg:border：10px solid ;
border-color: 1-4個屬性值；
1個屬性值：代表4周
2個屬性值：第乙個值：上下 第二個值：左右
3個屬性值：第乙個值：上 第二個值；左右 第三個值：下
4個屬性值：上 右 下 左（順時針方式設定）
5：用css實現乙個三角形：
顏色值為透明： transparent
第五節：背景屬性
background:; 復合屬性！
1：背景顏色： background-color:;
2: 背景圖： background-image:url(路徑);
背景圖的顯示狀態：
a: 背景圖是不佔據空間的。
b: 背景圖大小 小於 容器大小的時候，直到鋪滿為止
c: 背景圖大小 等於 容器大小的時候，正好顯示一張
d: 背景圖大小 大於 容器大小的時候，只顯示容器區域
3：控制背景圖是否平鋪： background-repeat:;
屬性值：
repeat 平鋪（預設值）
no-repeat 不平鋪
repeat-x 橫向平鋪
repeat-y 縱向平鋪
4: 控制背景圖的位置： background-position:;
屬性值：
第乙個值：水平的位置 第二個值：垂直的位置
eg:100px 200px -> 距離左側100px,距離頂端200px
-100px -30px -> 往左移動100px,往上移動30px;
10% 20% -> 支援百分比
left bottom -> 讓背景圖的左側和底部，貼著容器的左側和底部
right center -> 讓背景圖右側貼著容器右側，上下居中
center bottom -> 左右居中，背景圖底部貼著容器底部
center -> 水平和垂直都居中
5: 背景圖的固定： background-attachment:;
屬性值：fixed/scroll;
6：簡寫：
background:red url(背景圖的路徑) no-repeat 200px bottom;
注：背景圖：
網頁渲染。
不佔空間
img匯入的：
屬於html的結構
佔據空間
7：什麼時候使用背景圖？什麼時候使用img：
型別：．ｊｐｇ 用的最多的 不透明，沒有動畫的時候
．ｐｎｇ 支援透明
．ｇｉｆ 支援透明 支援動畫
第六節：盒模型
css盒模型:
是網頁布局的基石: 盒模型 從裡到外包括:
內容區內填充(補白)
盒子邊框(可選)
外邊距 (盒子外部距離)
padding用法:
1:padding是長在內容和盒子之間的,在盒子內部
2:padding是為了調整 子元素在 父元素裡面的位置關係.
3:padding的特點:padding值會把盒子撐大
4:如果想讓盒子保持原有大小,需要把原有寬高減去padding值
5:給單一方向設定padding值:
padding-left/right/top/bottom;
6:padding的設定方法:
padding:1個值 四周
padding:2個值 上下 左右
padding:3個值 上 左右 下
padding:4個值 上 右 下 左(順時針方向設定:鐘面原則)
7:padding不能設定複製
8:padding不會對背景圖造成影響
9:如果乙個盒子沒有設定固定的寬和高,新增padding是不用減的
css樣式 初學者筆記
div img img 看這裡 css info pic divmargin 0 auto 在chrome，firefox等主流的瀏覽器是可以實現水平居中的，但在ie瀏覽器裡卻需要再外邊一層的div或者body裡加 text align center,或者將文件的宣告修改為 body div sty...
前端H5初學筆記（四）
boder的可選值 none，預設值，無邊框 solid，實線 dotted，點狀邊框 dashed，虛線 double，雙線 margin還可以設定為auto，auto一般只設定給水平方向的margin 如果只指定，左外邊距或右外邊距的margin位auto則會將外邊距設定為最大值。垂直方向外邊距...
HTML5 初學者 css選擇符 文字屬性筆記分享
第一節 選擇符的權重 選擇符的權重 id class 標籤 用四個數字表示權重 1 內聯樣式表 1000 1000 2 id 0100 100 3 class 0010 10 4 標籤 0001 1 5 偽類選擇符 0010 10 6 萬用字元 0 7 包含選擇符的權重為權重之和 eg box di...