CSS學習筆記

CSS

CSS挺難啃的一天就學了一點點,還是要多動手,做出效果才更有動力
OK筆記開始,筆記只是給自己整理一下思路,以及寫一些重要的知識點,不會面面具到.

css的歷史

1994年開始,哈肯提出css的建議,然後和波特一起設計.1997年W3C接管css,1998年發布css2,之後發布CSS2.1,2011年發布CSS3,將CSS分為多個模塊單獨升級(搜索css spec),再然後逐漸更新各個模塊到level 4.然後,應該還沒有然後.
LESS,SASS,PostCSS以後再學

敲黑板,劃重點

1. 如何做橫向布局(float+clearfix):
   記住一種方法(背背背背背)
   給子元素添加浮動,給父元素添加class="clearfix",下邊是clearfix類的CSS代碼
   .clearfix::after{
   content: ‘‘;
   display: block;
   clear: both;
   }

   1. 取色 量尺寸可以用QQ的截圖,當然了我強烈推薦一個叫snipaste的軟件(windows),有桌面版,也有UWP版,灰常好用.字體可以用word預覽,ps啥的都行.
   2. 使用開發者工具,多用,就不寫了
   3. 四種引入CSS的方式:style屬性,style標簽,css link, @import
   4. 常見的CSS屬性(正在學,占個坑,以後補上):
      font-family,font-size,font-weight
      ul和body的默認的margin和padding
      color,background-color,margin,padding
      line-height
      6.脫離文檔流
      position:fixed;

其他(邊學邊記,思路)

取消a標簽的下劃線:text-decoration: none;
調整距離可以加padding
word-break:.....可以用開發者工具看看選哪個
文檔流:文檔內元素的流動方向
內聯元素:從左往右流動,註意回車產生的空格
塊級元素:每個占一行
display:inline-block;盡量別用
塊級元素的高度由內部文檔流元素的高度總和決定
盡量別用height
內聯元素的高度(比較反直覺):
文字的基線,上部和下部
建議行高 比上部和下部多一點 每種字體的建議行高是不同的
讓banner在nav下方:讓navbar脫離文檔流position:fixed
脫離文檔流後,這個div會收縮(不占一整行了),解決辦法:width:100%(這樣不好,width+padding太寬了)最右邊的其他靠到最邊上了,
怎麽解決呢???
ok,在topNavBar裏面加個div.topNavBar-inner,在這個裏面加個左右padding,不topNavBar裏加左右padding 了,或者把所有padding 都加到新的div裏,,哈哈哈哈 搞定 修BUG真的好有樂趣
為了學習,我不得不一直這樣暗示自己
水平居中:margin-left:auto;margin-right:auto;
line-height可以確定內聯元素高度
span:當行高和高度相同時,會垂直居中
hello的做法:display:inline-block;padding line-height

CSS畫三角形:
用border

阻斷margin的合並:
1 中間加個div,有border或者padding(不為0)
2 display:table和 display: flex
position:absolute---會讓display:inline;變成display:block;
display:inline-block;

繼續,什麽是偽類----
::before 和::after 可以當成個span來看待,所以改變display:block,完美
那麽偽類可以幹嘛呢?

踩了一天的坑:改圖標的fill,改成白色,就是顯示黑色,開發者工具裏也是黑色----原來是瀏覽器緩存搞的鬼
還有更難受的,不開個本地http-server,請求阿裏的圖標就是file,不是https請求.難受

CSS學習筆記1