? ? ? ?前端雖然相對后端和其他開發(fā)相對簡單励幼，但是一個月的前端學習應該只是到達一個簡單頁面的書寫的程度层扶。
首先對html標簽進行理解學習
css樣式簡單學習
js邏輯代碼的簡單學習
不管哪項技術，都要抱著終身學習的態(tài)度踪旷。特別是前端匠璧，框架更新速度快。內(nèi)容繁瑣绢掰。。童擎。滴劲。
一個多月的時間能保證簡單的頁面，簡單的邏輯我覺得差不多了柔昼。后續(xù)多加練習哑芹，學學框架。
html筆記
ctrl + Z 撤回
ctrl + Y 撤銷撤回的操作
ctrl + enter 快速在下面新建一行
ctrl + shift + enter 快速在上面新建一行
b/strong 加粗
i/em 斜體
u/ins 下劃線
s/del 刪除線
CSS引入方式：
1.內(nèi)嵌式 寫在title下面 head里面捕透，用style標簽包裹聪姿，只作用于當前頁面
2.外聯(lián)式 CSS單獨寫在css文件中，通過link標簽引入 多個頁面生效
3.行內(nèi)式 css寫在標簽的style屬性中? 只對當前標簽生效
自定義列表：
dl表示自定義列表的整體
dt表示自定義列表的主題（標題）
dd表示自定義列表中的每一項解釋說明
table單元格合并
? ? 1. 確定目標單元格 左上原則
? ? 2. 確定是跨行合并rowspan 還是 跨列合并 colspan
? ? 3. 確定合并的數(shù)量
? ? 4. 刪除多余的單元格
? ? ? cellspacing 表格單元格邊距
CSS筆記
字體font樣式連寫
? ? style{
? ? ? ? font: style weight size/line-height family
? ? }
? ? 口訣：swsf（稍微舒服）
文本縮進（首行縮進）：
? ? 數(shù)字+em
? ? 例 text-indent:2em? 縮進兩個字
文本水平對齊方式
? ? text-align:left/center/right
文本修飾
? ? text-decoration:underline 下劃線
? ? text-decoration:line-through 刪除線
? ? text-decoration:overline 上劃線
? ? text-decoration:none 去除裝飾線
水平居中方法總結(jié)：
? ? text-align:center;
? ? 1.文本
? ? 2.span乙嘀、a
? ? 3.input末购、img
? ? 以上需要設置父元素text-align:center
? ? margin:0 auto; 好用的居中方式
行高：上間距+文字高度+下間距
? ? line-height:數(shù)字+px
? ? line-height:倍數(shù)（當前font-size倍數(shù)）
? 可設置單行文本的垂直居中
? line-height:父元素高度；?
? 要寫在font樣式連寫后面
顏色取值類型：
1 關鍵詞： 例如 red green blue等
2.rgb法：color:rgb(255,255,255);
? ? ? ? ? ? ? ? ? ? 紅? 綠? 藍
3.rgba法：color:rgba(255,255,255,? a? )
? ? ? ? ? ? ? ? ? ? ? ? ? ? 透明度0~1
? ? ? ? ? ? ? ? ? ? ? ? ? ? 0透明 1實心
4.十六進制表示法：color:#ffffff
? ? ? ? 省略寫法：color:#fff (每兩個一樣的可以省略)
選擇器進階↓
后代選擇器：選擇器1 選擇器2 ...{} 所有后代標簽
子代選擇器：選擇器1 > 選擇器2 ...{}? ? 只選擇子代標簽
并集選擇器：選擇器1 虎谢， 選擇器2 ,... {} 全部已經(jīng)選擇的選擇器
交集選擇器：選擇器1選擇器2{css}? 連在一起寫
emmet語法:div class id 語法糖
偽類選擇器：
:hover{css} 選中鏈接懸停狀態(tài)
背景相關屬性：
bgc:背景顏色
bgc:transparent;? 透明
background-image:url('路徑') 背景圖片 不會撐開盒子 語法糖 bgi
background-repeat:no-repeat; 不重復不平鋪
background-repeat:repeat; 水平垂直平鋪
background-repeat:repeat-x; 水平平鋪
background-repeat:repeat-y; 垂直平鋪
background-position:水平方向位置 垂直方向位置
? ? ? ? ? ? ? ? ? ? （left center right）
? ? ? ? ? ? ? ? (也可以是坐標像素 左上角原點)
background:color image repeat position 連寫樣式要先寫
元素顯示模式：??
塊級元素 (db) display:block 塊級元素標志
? ? 1.獨占一行
? ? 2.寬度默認父元素寬度盟榴，高度內(nèi)容撐開
? ? 3.可以設置寬高
行內(nèi)元素 display:inline 行內(nèi)元素標志
? ? 1.一行可以顯示多個
? ? 2.寬度和高度默認由內(nèi)容撐開
? ? 3.不可以設置寬高
? ? 代表標簽：a,span,b,u,i,s,strong.ins,em,del
行內(nèi)塊元素 display:inline-block 行內(nèi)塊元素標志
? ? 1.一行可以顯示多個
? ? 2.可以設置寬高
? ? 代表標簽：
? ? input，textarea婴噩，button擎场，select...
? ? 特殊情況：img在google中調(diào)試查詢?yōu)閕nline
元素顯示模式轉(zhuǎn)換
? ? display:block 設置成塊級元素
? ? display:inline 設置成行內(nèi)元素
? ? display:inline-block 設置成行內(nèi)塊元素
html嵌套注意
p標簽不能嵌套 div、p几莽、h等元素
a標簽不能嵌套a標簽
img的圖片默認下方有3px迅办，轉(zhuǎn)換成塊級元素可以去掉
測量上內(nèi)邊距要注意行高！Ｕ买肌站欺！
css三大特性：
1.繼承性
? color font-style font-weight font-size font-family text-indent text-align line-height
? ul {list-style:none} 去除小圓點
? body {font-size:...} 統(tǒng)一瀏覽器默認文字大小
注意：繼承失效例子
? ? a標簽 color會繼承失效 因為a標簽有自己的color樣式
? ? h系列標簽 font-size失效 h有自己的樣式
? ? div標簽 高度不能繼承，寬度類似于繼承
快捷鍵 ctrl+d 快速選擇下一個相同區(qū)域
2.優(yōu)先級
? ? 繼承 < 通配符選擇器 <標簽選擇器 < 類選擇器 < id選擇器 < 行內(nèi)樣式 < !important
? ? 權(quán)重疊加不存在進制
3.層疊性
? ? 下面優(yōu)先
邊框：
? ? (bd)border:寬度 實線 顏色
? ? bt 上邊框
? ? bb? 下邊框
? ? bdr 右邊框
? ? bl? ? 左邊框
box-sizing:border-box;
建議寫在*里面 此時width纤垂、height為盒子總寬高
transparent 透明色
行內(nèi)元素的margin padding 上下不生效矾策，左右生效，不會影響布局
高度塌陷解決方式：
? ? 1.給父元素添加border-top或者padding-top
? ? 2.給父元素設置over:hidden
? ? 3.轉(zhuǎn)換為行內(nèi)塊元素
? ? 4.設置浮動
結(jié)構(gòu)偽類選擇器：
? ? 1.E:first-child(){} 匹配父元素中第一個子元素峭沦，并且是E元素
? ? 2.E:last-child(){} 匹配父元素中最后一個子元素贾虽，并且是E元素
? ? 3.E:nth-child(n){} 匹配父元素中第n個元素，并且是E元素
? ? 4.E:nth-last-child(n){} 匹配父元素中倒數(shù)第n個元素吼鱼，并且是E元素
? ? tips：n的取值 2n even 偶數(shù)
? ? ? ? ? ? ? ? 2n+1 2n-1 odd 奇數(shù)
? ? ? ? ? ? ? ? -n+5 找到前五個
? ? ? ? ? ? ? ? n+5 找到后五個
偽元素：
? ::before 在父元素內(nèi)容的最前添加一個元素
? ::after? 在父元素內(nèi)容的最后添加一個元素
? tips：
? 1.必須設置content屬性才生效
? 2.偽元素默認是行內(nèi)元素
標準流：文檔流榄鉴，瀏覽器默認排版規(guī)則
浮動：
? ? 脫離標準流履磨，
? ? 浮動會去找浮動，
? ? 浮動會受上面元素邊界影響
? ? 層級比標準流高半個級別庆尘，
? ? 一行可以顯示多個，并且可以設置寬高
? ? float：left 左浮動 fll
? ? float: right 右浮動 flr
清除浮動：
? ? 推薦方式：
? ? 單偽元素清除法
? ? .clearfix::after{
? ? ? ? content:'.', //必寫內(nèi)容巷送，寫 . 為適應其他網(wǎng)站
? ? ? ? display:block; //塊級
? ? ? ? clear:both //清除浮動
? ? ? ? height:0;? //不占空間
? ? ? ? visibility:hidden; //當前元素隱藏
? ? }
? ? tips：可以方便的加在類里
? ? 雙偽元素清除法驶忌，還能解決塌陷問題
? ? ? ? .clearfix::before,
? ? ? ? .clearfix::after{
? ? ? ? ? ? content:'',
? ? ? ? ? ? display:table;
? ? ? ? }
? ? ? ? .clearfix::after{
? ? ? ? ? ? clear:both;
? ? ? ? }
? ? 給父元素添加overflow：hidden；笑跛，還能解決塌陷問題
BFC盒子
? ? 1.浮動是BFC盒子
? ? 2.行內(nèi)塊元素是BFC盒子
? ? 3.html標簽是BFC盒子
? ? 4.overflow屬性取值不為visible付魔。如: auto、hidden...
定位
? ? position:absolute 絕對定位（psa）
? ? 脫離標準流飞蹂，不占位置,參考最近一層定位父元素几苍，如果沒有默認瀏覽器
? ? position:relative 相對定位 （psr）
? ? 不脫離標準流，占位置陈哑，參考自身
定位垂直居中：子絕父相
? ? left:50%
? ? top:50%
? ? margin-left:-盒子自身一半px
? ? margin-top:-盒子自身一半px
? ? transform:translate(-50%,-50%) 自身回一半
層級關系
? ? z-index:數(shù)字妻坝；
? ? 只給定位的添加，提高層級
vertical-align：只能設置給行內(nèi)元素和行內(nèi)塊
? ? ? ? ? ? ? ? baseline 默認基線對齊
? ? ? ? ? ? ? ? middle? 圖片和文字垂直居中對齊
? ? ? ? ? ? ? ? top? ? ? 上基線對齊
? ? ? ? ? ? ? ? bottom? ? 下對齊
cursor：光標
? ? ? ? pointer小手
? ? ? ? not-allowed 禁止
disabled:禁用button或者input
overflow:
? ? ? ? visibile 可見的(默認)
? ? ? ? hidden 溢出隱藏
? ? ? ? auto 自動
單行文本省略顯示
? ? ? ? white-space：nowarp; //不換行
? ? ? ? overflow:hidden;? ? //溢出隱藏
? ? ? ? text-overflow:ellipsis? //溢出省略省略號
隱藏：
? ? display：none; 常用隱藏 不占位置
opacity：透明度 0~1
transition: 1s? ? ? ? 2s? ? ? ? 速度? ? ? ? 默認全部變化
? ? ? ? ? ? 變化時間? 延遲時間? ? ease-in 變速
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ease-out 變速慢
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? liner? 勻速
背景尺寸大小? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
background-size:contain 等比例一邊鋪滿容器
background-size:cover 等比例全部鋪滿容器
background-size:100px 或者 百分比 背景圖片可能會拉伸
background:url no-repeat position/size 背景連寫
? ? ? ? ? ? ? ? ? ? ? ? ? ? 定位/尺寸（）
box-shadow:水平偏移 垂直偏移 模糊程度 陰影尺寸 顏色 內(nèi)外陰影（inset內(nèi)陰影）
