整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
近我公司來了個新員工，因為前端基礎不怎么好嘛，老是喜歡問一些基礎的問題，你說他沒學過吧還真不是，真是他沒注意過，這不，今天我就把這些知識點整理一下，給頭條的小伙伴們學習下。
這里還是要說一下我的前端學習群：594959296，從我一個到現在的1617都是看我每一篇文章來的，可以說都是我們大前端的學霸啊，不定期分享干貨。想學到東西的都可以來，歡迎初學和進階中的小伙伴
1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時，其是相對父元素的寬度width的而不是我們想象的高度height；
舉個例子：
其實出現這種現象，我們可以巧用margin/padding的百分比值實現高度自適應（多用于占位，避免閃爍）
當然該元素高度上的百分比是相對其父元素高度的百分比的，min-height及max-height也適用這條規律。
2、含有定位屬性的元素，其top、bottom單位為百分比時，該百分比是相對于父元素的高度的。同理，left、right則是相對于父元素的寬度的。
這一點，我昨天在查資料寫這篇文章---最全面的元素水平垂直居中方法匯總的時候就發現有個大牛也理解錯了----CSS布局奇淫技巧之--各種居中 里面的第八點。
3、邊框寬度不允許使用百分比值
這點就不解釋了。
4、width：100%
當父容器里有 絕對定位 的子元素時，子元素設置width:100%實際上指的是相對于父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的 content ，其等于父元素的 content寬度。
將上面子元素的position改成了relative后，其寬度就變成了parent寬度。
5、line-height
你知道line-height:150%和line-height:1.5的區別嗎？知道了就可以跳過此處，不知道繼續看下面：
舉個例子：
上面可以看到line-height有單位時，子元素是繼承父元素的line-height的，無單位時，其line-height等于無單位的數值乘以子元素本身的字體大小。顯然為了不出現意外，還是建議首選無單位的。
6、ex 和 ch 單位
ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算；
ch:以節點所使用字體中的“0”字符為基準，找不到時為0.5em；
ex 和 ch 單位，類似于 em 和 rem, 依賴于當前的字體和字體大小。 但是，不同的是，這兩貨是基于字體的度量單位，依賴于設定的字體。
ch 單位通常被定義為數字0的寬度。你可以在Eric Meyers的博客里找到關于它的一些有意思的討論，例如將一個等寬字體的字母”N”的寬度設置為40ch，那么在另一種類型的字體里它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。
ex 定義為當前字體的小寫x字母的高度或者 1/2 的 1em。 很多時候，它是字體的中間標志。
x-height; the height of the lower case x
這些單位有很多用途，大部分用于版式的微調。比方說，sup 元素（上角文字標），可以通過position:relative;bottom: 1ex;實現 。類似的方法，你可以實現一個下角文字標。瀏覽器默認的方式是利用
上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：
Css代碼
7、使用calc 時運算符之間要有空格 ，否則可能無效
今天就寫到這里，如果是熱愛前端的小伙伴不妨來我群里一起學習交流：594959296 歡迎初學和進階中的小伙伴。
TML+CSS學完好久了，一直沒啥時間總結，現在總結了下學的過程：
之所以放在一起總結，是因為HTML和CSS沒有啥很多的編程邏輯，都是需要去記住并且熟練使用的，熟練使用是得去一個個敲過一遍。所謂的代碼量積累好像就是這么回事，只有多敲才能會。
小白用的嗶哩嗶哩上的教程視頻，因為個人學習方法的原因，都是跟著那教程去敲的，當然課后練習的話，都是自己先摸索敲了一遍在去看的講解，小白覺得這樣可以加深印象。
還有就是沒有熟練之前要天天的去練，哪怕一天半小時也好。因為一旦一天沒有練就會忘掉，還得回去找之前的筆記來看。（因為有事耽擱了兩三天沒去學，結果又重頭的看了一遍，血淋淋的學習效率教訓。不管怎樣，貴在堅持。）
當然，因為小白基礎是真的差，沒有什么教程是可以完完全全都講完的，使用小白看完了嗶哩嗶哩的教程又跑去了網易云課堂找了一份HTML+CSS的教程來看，為的是查漏補缺。
有一種播放叫做1.5倍播放。看的過程，別跟播放器里一倍的速度看，調成1.5倍或是2.0倍播放速度，因為那些東西，多數都是理解使用的。哪怕忘了，百度一下就可以直接搞定了。打基礎階段所以還是記住熟練使用才好。
HTML小白也就看了兩天吧，用了半天做了下練習；CSS對于零基礎的人來說建議12-15天，當然小白之前有過這些概念，所以用了五天多點的時間。JS才剛剛開始學，所以不知道時間怎么算才好。因為前端三大基石：HTML+CSS+JS，HTML+CSS學習所使用的時間占比才百分之五，剩下的百分之九十五都是JS的學習時間。
找課程時記住，找一兩個課程，一個全心去學，一個查漏補缺就好，別一會兒這個課程看一下，那個課程看一下的。這樣子反而會使自己心浮氣躁沒法靜下心來去學。打基礎的視頻教程，其實都一樣的，沒啥有特別好的特別壞的。
高興鐵鐵們能來看html網頁設計第二期~~~~撒花~~~~~
哎呀呀~實在是抱歉備注標簽我記錯了QAQ
<!--內容打這里-->這個才是備注標簽不是//
首先我們先來學習上節課留下的劇透，分別是:
有人就說了標題標簽上次劇透不就只有h1標簽嗎?
嘿嘿，其實他還有兄弟姐妹啦~
看圖，代碼是從上往下從左往右執行的請記住這個順序哦~
還有,左邊是代碼右邊是網頁上面的效果哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<!--標題標簽是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如圖所示，h1標簽是最大的，h6標簽是最小的
是不是很簡單呀,現在已經學會了一個知識點了哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千萬要記住內容是寫在標簽里面的哦~-->
<!--段落標簽是獨占一條的哦-->
<p>第一條p標簽</p>
<p>第二條p標簽</p>
<p>第三條p標簽</p>
</body>
</html>
鏈接標簽是什么?顧名思義就是一個鏈接看代碼：
<a href="https://www.baidu.com">百度</a>
href是什么東西啊？是a標簽的屬性啦~里面用來輸入你需要跳轉到的網頁的鏈接
屬性里面的東西是不會出現在網頁上面的出現的只有在a標簽里面的內容哦
當我點擊百度這兩個字后就給我跳轉到了我們href屬性里面的https://www.baidu.com
當然我們也可以跳轉到我們自己制作的網頁上面但要求是同一個項目下面的網頁
是不是很有趣~
看視頻:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
視頻中我們點擊鏈接后就跳轉到了山這個網頁出現了一張山的圖片，是不是有點小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳轉到山的網頁</a><!--只有同一個項目下面的網頁才能相互跳轉-->
</body>
</html>
圖像標簽標簽如其意，就是用來上傳圖像的一個標簽~~
我們這里介紹一下img的兩個屬性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用來放圖片的地址的，他會根據地址去找圖片然后把圖片放到網頁上面。
alt有什么用啊就是當圖片顯示失敗的時候就會顯示alt里面的文字
看視頻:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我們把圖片的地址破壞后，就會顯示一個圖片錯誤的圖標和alt里面的內容
怎么拖圖片到img文件下，老師~~~我不知道
看視頻
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖進來就ok了是不是很簡單~
okk，好快啊怎么一下就學完了今天的知識點~~~
嘻嘻今天可是有作業的~
請根據下面的網頁仿寫一下:
完成后作業發再評論區哦，有什么不懂的可以留言包回答的。
加油呀，每天學一點爭取做出屬于自己的一個網頁~
上一期
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
