css——flex彈性布局詳解
Flex布局又稱彈性布局，它使用flexbox使得容器有了彈性，更加適應各種設備的不同寬度，而不必依賴于傳統的塊狀布局和浮動定位。是CSS3中新增的規范。任何一個容器都可以指定為Flex布局。.box行內元素也可以使用Flex布局。.box一，容器的6個屬性：1. flex-direction：用于設置主軸的方向。它有四個取值：row（默認值）：主軸為水平方向，起點在左端（項目從左往右排列）。ro...
Css基礎-畫一個三角形
上一篇文章我們說了如何利用element做一個折疊面板，細心的朋友有沒有發現，下面的樣式中右上角有一個三角形，其實css的三角形很好畫，有的公司甚至還會把畫一個三角形當做面試題，屬實是一個冷門又重要的知識，這里來記錄一下。 最簡單的其實就是用邊框border來做一個三角形，給定一個寬度和高度都為 0 的元素，其 border 的任何值都會直接相交，我們可以利用這個交點來創建三角形。也就是說，bo...
如何在瀏覽器中設置出font-size小于12px的字
眾所周知，在瀏覽器中，當字體的大小小于12px的時候，瀏覽器是不會顯示的，瀏覽器會認為小于12px的字體不是人眼所視的字體，會自動的把字體調整為12px，這對用戶來說很方便，但是對于開發者就是一個難題，當設計師把字體的大小調整到12px一下才能不對整體的一個排版造成影響，那么我們該怎么做呢？ 這里可以看到，我們已經設置字體大小為9px了，但是瀏覽器顯示的卻還是12px。 解決方法是：我...
CSS如何引入與使用外部字體
我們都知道css中的font-family屬性是用來規定元素的字體系列的屬性，可以指定一個元素的字體。但我們要設置的字體形式必需是在Windows字體庫中有的，否則不會生效。假若我們想使用外部字體，如何讓這種字體在客戶的瀏覽器中正常顯示呢？首先需要在電腦上下載有關字體的安裝包，以.otf或.ttf為后綴的，具體請自行下載。接著我們需要在index.vue同級建立一個font文件夾，將下載好的字體文...
粘性定位（sticky）詳解
sticky定位（粘性定位），指的是基于用戶的滾動位置來定位。不同于前四個定位，他有點像relative和fixed的結合：當定位基點是自身默認位置時，他呈現為relative定位，而當頁面滾動區域大于你的目標區域時，他則表現為fixed定位，可以固定在頁面的某個位置。 粘性定位特點：1.以瀏覽器的可視窗口為參照點移動元素（固定定位特點）2.粘性定位占有原先的位置（相對定位特點）3.必須添加 to...
2023-07-10
