一點點進擊前端---css佈局的一些奇淫技巧

項目結構:

在這裏插入圖片描述

assets~~資源文件(img/css(normalize~對css的屬性進行重製/瀏覽器的差異進行統一..base.css是整個項目的樣式)/font)
component~~公用組件~細分爲(common(所有項目通用)/content(本項目使用))
views~~~大的視圖(首頁/分類/購物車/我的)
router(路由)
store(vuex的通用的狀態管理)

common(通用的js(一些系統常量mixin(混入..混在一起的文件)...const...util.js))
network放一些和網絡相關的東西

css{
  :root是獲取根目錄html(它是一個僞類)
  --color-text: #6666;  在css裏面定義變量。
  -color-tint:#44...全局色彩的變量

字體,鼠標選中,清除浮動。。。

var(--color-text)就可以引入變量了。
}

在這裏插入圖片描述

vouter裏面的mode

vue-router中mode 默認使用的是hash模式

在這裏插入圖片描述
vue把#當做自己的根目錄,靜態資源,比如圖片。

去掉#後,要採用相對路徑去引用,如果圖片引用是在js內,則要採用require()方法進行引用。
vue項目攜帶一個#會對開發造成一定的影響:
1、微信三方登錄回調地址,有#號時,接收不到code參數

2、微信H5支付的回調地址,不允許有#

3、App分享,處理特殊字符時,可能會對#進行編譯

4、有點影響美觀

現在網站大多有三方登錄,支付等功能,存在#,項目開發就存在很大的障礙。話不多說,開始去掉#吧

在這裏插入圖片描述

flex爲何是佈局神器

佈局的傳統解決方案,基於盒狀模型,依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便,比如,垂直居中就不容易實現。(如果要垂直居中,你需要對盒子裏的每個元素都進行設置,而flex取可以批量處理這個問題)

爲解決上述問題(垂直居中):就出現了flex(彈性佈局,靈活的伸縮佈局)設爲 Flex 佈局以後,子元素的float、clear和vertical-align屬性將失效(比例是0到1)
在這裏插入圖片描述

line-heigh替代height設置div的高度

使用line-heigh裏面的字體會自動垂直居中,而不會貼到div的頂部,注意:line-height需要有內容纔會把高度撐起來,否則div的高度就是0

box-shadow: 0 1px 1px rgba(100,100,100,.1); 設置陰影的水平線

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章