css——flex彈性布局詳解
Flex布局又稱彈性布局，它使用flexbox使得容器有了彈性，更加適應(yīng)各種設(shè)備的不同寬度，而不必依賴于傳統(tǒng)的塊狀布局和浮動(dòng)定位。是CSS3中新增的規(guī)范。任何一個(gè)容器都可以指定為Flex布局。.box行內(nèi)元素也可以使用Flex布局。.box一，容器的6個(gè)屬性：1. flex-direction：用于設(shè)置主軸的方向。它有四個(gè)取值：row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端（項(xiàng)目從左往右排列）。ro...
Css基礎(chǔ)-畫一個(gè)三角形
上一篇文章我們說了如何利用element做一個(gè)折疊面板，細(xì)心的朋友有沒有發(fā)現(xiàn)，下面的樣式中右上角有一個(gè)三角形，其實(shí)css的三角形很好畫，有的公司甚至還會(huì)把畫一個(gè)三角形當(dāng)做面試題，屬實(shí)是一個(gè)冷門又重要的知識(shí)，這里來記錄一下。 最簡單的其實(shí)就是用邊框border來做一個(gè)三角形，給定一個(gè)寬度和高度都為 0 的元素，其 border 的任何值都會(huì)直接相交，我們可以利用這個(gè)交點(diǎn)來創(chuàng)建三角形。也就是說，bo...
如何在瀏覽器中設(shè)置出font-size小于12px的字
眾所周知，在瀏覽器中，當(dāng)字體的大小小于12px的時(shí)候，瀏覽器是不會(huì)顯示的，瀏覽器會(huì)認(rèn)為小于12px的字體不是人眼所視的字體，會(huì)自動(dòng)的把字體調(diào)整為12px，這對(duì)用戶來說很方便，但是對(duì)于開發(fā)者就是一個(gè)難題，當(dāng)設(shè)計(jì)師把字體的大小調(diào)整到12px一下才能不對(duì)整體的一個(gè)排版造成影響，那么我們?cè)撛趺醋瞿兀? 這里可以看到，我們已經(jīng)設(shè)置字體大小為9px了，但是瀏覽器顯示的卻還是12px。 解決方法是：我...
CSS如何引入與使用外部字體
我們都知道css中的font-family屬性是用來規(guī)定元素的字體系列的屬性，可以指定一個(gè)元素的字體。但我們要設(shè)置的字體形式必需是在Windows字體庫中有的，否則不會(huì)生效。假若我們想使用外部字體，如何讓這種字體在客戶的瀏覽器中正常顯示呢？首先需要在電腦上下載有關(guān)字體的安裝包，以.otf或.ttf為后綴的，具體請(qǐng)自行下載。接著我們需要在index.vue同級(jí)建立一個(gè)font文件夾，將下載好的字體文...
粘性定位（sticky）詳解
sticky定位（粘性定位），指的是基于用戶的滾動(dòng)位置來定位。不同于前四個(gè)定位，他有點(diǎn)像relative和fixed的結(jié)合：當(dāng)定位基點(diǎn)是自身默認(rèn)位置時(shí)，他呈現(xiàn)為relative定位，而當(dāng)頁面滾動(dòng)區(qū)域大于你的目標(biāo)區(qū)域時(shí)，他則表現(xiàn)為fixed定位，可以固定在頁面的某個(gè)位置。 粘性定位特點(diǎn)：1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）2.粘性定位占有原先的位置（相對(duì)定位特點(diǎn)）3.必須添加 to...
2023-07-10
超出顯示省略號(hào)
最近做的項(xiàng)目發(fā)現(xiàn)一個(gè)問題，如果文本過長的話會(huì)超出顯示，設(shè)置寬度可以解決，但是這樣文本會(huì)換行，就會(huì)導(dǎo)致某一行的高度比其他行的高度高，造成頁面結(jié)構(gòu)的混亂，這里可以用css來解決：white-space:nowrap 文本不換行overflow:hidden 多余內(nèi)容將被修建且不可見text-overflow:ellipsis 不可見的內(nèi)容以省略號(hào)的形式向用戶展示。成功！這里就有聰明...
