01為什麼要清除浮動
浮動會產生「高度塌陷」
02偽元素選擇器
:link
a:link
選擇所有未訪問鏈結
:visited
a:visited
選擇所有訪問過的鏈結
:active
a:active
選擇正在活動鏈結
:hover
a:hover
把滑鼠放在鏈結上的狀態
:focus
input:focus
選擇元素輸入後具有焦點
:first-letter
p:first-letter
選擇每個元素的第乙個字母
:first-line
p:first-line
選擇每個元素的第一行
:first-child
p:first-child
選擇器匹配屬於任意元素的第乙個子元素的 <]p> 元素
:before
p:before
在每個元素之前插入內容
:after
p:after
在每個元素之後插入內容
:lang(language)
p:lang(it)
為元素的lang屬性選擇乙個開始值
03工具樣式清除浮動
.clearfix
class
="clearfix"
>
04overflow 清除浮動
overflow
: hidden;
/* 別加錯位置 給父元素新增 */
05after偽元素清除浮動
.clearfix:after
.clearfix
06雙偽元素清除浮動
.clearfix:before, .clearfix:after
.clearfix:after
07父親沒有定位
/* 若所有父元素都沒有定位 以瀏覽器當前螢幕為準去定位 */
08父元素有定位實戰
/* 若有父元素都沒有定位 以
父親為準去定位 */
09定位的盒子居中對齊
left
: 50%;
top:
50%;
margin-left: -
1/2width;
margin-top: -
1/2height;
10**輪播圖
主要運用絕對定位和相對定位
11固定定位廣告
主要運用p
osition:fixed 固定定位
12顯示隱藏
display: none;隱藏某個元素 不保留位置 block 顯示某個元素
inline：將乙個元素作為內聯樣式來顯示
block：將元素以塊元素顯示
inline-block：既有內聯樣式的特點又有塊元素的特點
visibility: visible; 顯示某個元素
visibility: hidden; 隱藏某個元素 保留位置
運用相對定位和絕對定位以及偽類:hover
14溢位隱藏
overflow的可選值
visible
預設值。內容不會被修剪，會呈現在元素框之外。
hidden
內容會被修剪，並且其餘內容是不可見的。
scroll
內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto
如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit
規定應該從父元素繼承 overflow 屬性的值。
15文字溢位省略號
overflow
: hidden;
/* 溢位隱藏 */
text-overflow
: ellipsis;
/* 溢位部分用省略號代替 */
white-space
: nowrap;
/* 強制在同一行內顯示內容 直到文字結束或者遭遇到br標籤物件才換行*/
（三個缺一不可）
16滑鼠樣式
style
="cursor: default;"
>
我是小白
style
="cursor: pointer;"
>
我是小手
style
="cursor: move;"
>
我是移動
style
="cursor: text;"
>
我是文字
17輪廓線
outline
: none;
/* 取消輪廓的做法 */
resize
: none;
/* 防止拖拽 */
outline
: none;
/* 取消預設的藍色的輪廓 */
18精靈圖
display
: inline;
/* 在一排顯示 並不是轉化為行內元素 */
background
: url(
"images/sidebar.png"
);（一定要把他做成背景圖）
background-position
前端學習day03
今天學了個新東西，是根據螢幕寬度大小修改網頁顯示的內容。大概查了下用法，media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。這個有時有效，有時會失效，具體是看電腦解析...
day03 前端基礎
transform translate x,y x 表示向x軸正方向移動的距離 x表示向x軸反方向移動的距離 y 表示向y軸正方向移動 這裡的y軸正方向指的向下移動 y表示向y軸反方向 延y軸向上移動！示例 transform translate 300px,0px transform transl...
前端學習 Day03
組成部分 標題 表頭 主體 表尾 table 定義乙個 caption 定義 的標題 thead 定義表頭部分 tbody 定義 主體部分 tfoot 定義表尾，一般來顯示彙總資訊 tr 定義一行 th td 定義資料項 單元格 th一般用於表頭，有加粗的樣式 td 一般用於主體部分，沒有加粗的樣式...