css偽元素、VScode命令

luckyyulin 發(fā)布于2019-08-30 14:20 / 1966人閱讀

摘要：偽元素不是空標簽的元素都自帶兩個偽類，只不過平時隱藏了在所有元素前面加東西在所有元素后面加東西在偽元素里加的東西無法被選取點擊復制等或做操作等偽類能做元素能擁有的所有屬性，但就是時獨立的偽元素一般都是隱藏的，需要添加屬性才能現(xiàn)身是給元素添加

::before ::after偽元素

不是空標簽的元素都自帶::before、::after兩個偽類，只不過平時隱藏了

before在所有元素前面加東西
after在所有元素后面加東西

在偽元素里加的東西無法被選?。?b>點擊、復制等）或做操作（hover、click等）

偽類能做元素能擁有的所有css屬性，但就是時獨立的

::before、::after偽元素一般都是隱藏的，需要添加css屬性才能現(xiàn)身~~

/*content是給元素添加內(nèi)容; content:""就是給元素添加空內(nèi)容*/
css content: "";
display: block;

簡單來講，::before、::after偽元素就是一個塊級元素的第一個和最后一個元素
其他都一樣，但這兩個元素不能再有子元素的，也沒有hover、click、mouseout等這樣的操作

可以有選擇器:偽類::after、選擇器:偽類::before這樣子的命令來操作偽元素的動態(tài)

div:hover::after{
    color: red;
}

div:hover::before{
    color: red;
}

碎碎念

絕對定位的元素，自動變?yōu)?b>block

box-sizing: border-box;意思是把邊框也算到元素的寬高里去

css動畫：
mdn
變化：transform：rotate
過度：transition

制作進度條

兩個div包裹，加上背景色標識下就看的清了

對于塊，一定加上寬度width,margin: auto;才有居中的作用

設置display: inline-block;后會產(chǎn)生空隙
加上vertical-align: top;消除

指針變成手性

cursor: pointer;

想要頁面中的元素能夠動態(tài)的變換位置，請使用絕對定位

text-align: center;和letter-spacing: ;
會使文字會居中并向一邊展開
使用text-indent設置縮進，令文字看上去從中間向兩邊展開

VScode 常用命令

復制這一行

shift + alt + uparrow/downarrow

刪除這一行

shift + del

這行上移一行/下移一行

alt + uparrow/downarrow

光標切換分窗口

alt + leftarrow/rightarrow

復制光標到每一行

shift + ctrl + alt

選中到下一個符

shift + ctrl

GPU云服務器云服務器偽元素獲取偽元素 css元素 vscode

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/115954.html

less學習筆記

摘要：方便了的編寫和維護。本文記錄了開發(fā)中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染，就會使用等選擇器。一、什么是less less是一種動態(tài)樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態(tài)語言的特性，如變量、運算、函數(shù)等。方便了css的編寫和維護。 le...

MkkHou 2019-08-02 15:58 評論0 收藏0
less學習筆記

摘要：方便了的編寫和維護。本文記錄了開發(fā)中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染，就會使用等選擇器。一、什么是less less是一種動態(tài)樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態(tài)語言的特性，如變量、運算、函數(shù)等。方便了css的編寫和維護。 le...

codercao 2019-08-29 13:53 評論0 收藏0
前端的一些坑，一些記錄，一些冷知識

摘要：當頁面中元素樣式的改變并不影響它在文檔流中的位置時例如等，瀏覽器會將新樣式賦予給元素并重新繪制它，這個過程稱為重繪。無限期更新前端的一些坑，一些記錄，一些冷知識https://github.com/ssshooter/... 大概從 17 年的六月份開始記錄吧，也已經(jīng)一年了，其中也包含了一些很簡單的知識，以前還覺得挺難的，現(xiàn)在看起來有點謎之感慨... JavaScript 所有對象...

Keagan 2019-08-26 12:09 評論0 收藏0
如何配置透明發(fā)光的騷氣 vscode —— Jinkey 原創(chuàng)

摘要：開啟透明支持文字發(fā)光樣式，樣式請在獲取。如果要不發(fā)光的，可以使用。可以保持更新通知。引入以上大神的樣式配置之后，左邊導航欄有部分標題還是未透明狀態(tài)，我自己修改了配置，引入即可。如果提示已經(jīng)損壞，選擇右上角齒輪不再提示即可。原文鏈接 jinkey.ai/post/tech/r… 轉載請注明出處 1 安裝自定義 JS 和 CSS 插件 2 安裝發(fā)光主題 showImg(https://us...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
如何配置透明發(fā)光的騷氣 vscode —— Jinkey 原創(chuàng)

摘要：開啟透明支持文字發(fā)光樣式，樣式請在獲取。如果要不發(fā)光的，可以使用?？梢员３指峦ㄖＲ胍陨洗笊竦臉邮脚渲弥?，左邊導航欄有部分標題還是未透明狀態(tài)，我自己修改了配置，引入即可。如果提示已經(jīng)損壞，選擇右上角齒輪不再提示即可。原文鏈接 jinkey.ai/post/tech/r… 轉載請注明出處 1 安裝自定義 JS 和 CSS 插件 2 安裝發(fā)光主題 showImg(https://us...

tylin 2019-05-21 19:36 評論0 收藏0