選擇器指的是，在標簽中的
hello-world
你好
偽類標簽還可以這樣用：
/*當鼠標移動到應用menu樣式的標簽上時，它下面應用b的標簽應用一下樣式*/
.pg-head .menu:hover .b{
color: red;
}
注意：必須是標簽內的子標簽才可以應用，如果改成
五、CSS優先級和繼承
CSS優先級：
應用的優先級，按照選擇器的權重規則來決定。當權重相同時，按照就近原則：style內聯 > 書寫距離近 > 書寫距離遠。
內聯樣式權重為 1000
ID選擇器權重為 100
class選擇器權重為 10
元素選擇器權重為 1
權重計算永不進位
例如：
wooohoo
CSS的繼承
繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如body中定義了字體顏色，它也會應用到字標簽的文本中。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。因此任何顯示申明的規則都可以覆蓋其繼承樣式。
此外，CSS繼承也是有限制的，有一些屬性不能被繼承，如：border，margin，padding，background等。
另外：!important 聲明方式強制樣式生效，不推薦使用，因為大量使用 !inportant 的代碼是無法維護的。如果!important聲明沖突，則比較優先權。
基本樣式
標簽大小
高度： height
寬度： width
最小寬度： min-width
字體文本
字體： font-famliy: "Microsoft Yahei", "微軟雅黑", "Arial"; 如果系統不支持第一個字體，會嘗試下一個。
文本大小： font-size：20px / 50% / 1rem；
字體粗細： font-weight 取值：normal(默認值)，bold粗體(700)，bolder(更粗)，lighter(更細)，設置具體值(100-900)
字體顏色： color 取值：①十六進制值：＃FF0000；②顏色名稱：red；③RGB值：rgb(255,0,0)；④RGBA值：rgba(255,0,0,0.5)
水平對齊： text-align 取值：left(默認)，right，center，justify(兩端對齊)
行高： line-height 可以調整水平居中：標簽多高，這里就要設置多高
垂直對齊： vertical-align 設置元素的垂直對齊方式，只對行內元素有效。常用值：top，text-top，bottom，text-bottom，middle，像素值，百分比。
文字裝飾： text-decoration 取值：none(默認)，underline(文本下劃線)，overline(文本上劃線)，line-through(穿過文本的一條線)
字體的風格：font-sytle 取值：normal，italic(斜體)，oblique(傾斜)
首行縮進： text-ident 取值：像素值，百分比。
字符間距： letter-spacing 取值：normal，像素值。
字間距： word-spacing 取值：normal，像素值。
控制文本大小寫：text-transform 取值：none(默認)，capitalize(單詞首字母大寫)，uppercase(全部大寫)，lowercase(全部小寫)
文本陰影效果：text-shadow 取值：h(必需)水平陰影的位置，v(必需)垂直陰影的位置，blur模糊的距離，color陰影的顏色。例：text-shadow: 1px 3px 5px #FF0000;
換行： word-break 取值：normal(瀏覽器默認的換行規則)，break-all(允許在單詞內換行)，keep-all(只能在半角空格或字符處換行)
word-wrap 取值：normal(瀏覽器默認的換行規則)，break-word(允許長單詞或url地址內部換行)
瀏覽器默認換行規則：中文自動換行，英文數字以單詞為最小單位(空格間隔)自動換行，如果一連串字符沒有空格，瀏覽器認為它是一個單詞不予換行。
關于RGB(A)色彩模式：rgba(red,green,blue,alpha) ，其中alpha取值0~1，表示透明度。red，green，blue三個參數取值0~255，也可用百分比。色彩模式與RGB相同（通過對紅綠藍三個顏色通道的變化和他們相互之間的疊加來得到各式各樣的顏色。（0，0，0）表示黑色，（255，255，255）表示白色）
背景 background
background 分為以下幾類：
background-color 背景顏色設置為紅色 如：background-color:red;
background-image 設置背景圖片 如：background-image::url("image/4.jpg");
background-size 設置背景圖片的尺寸，有三類可選的值：寬高（px值或百分比，1或2個值）、cover、contain。如：background-size:10px 10px;
background-repeat 如果設置了背景圖片，這個屬性則可以設置重復平鋪。默認是no-repeat不平鋪。還可以設置repeat表示背景圖片橫向縱向都平鋪。 repeat-x表示只在橫向平鋪，repeat-y表示只在縱向平鋪。
background-position 設置背景圖片的起始位置。如：background-position：center | right bottom | top center | left bottom | 10% 20% | 50px 60px 。
background-origin 規定background-position屬性相對什么來定位。值：padding-box | border-box | content-box ，分別表示相對于內邊距框定位、相對邊框定位、相對內容框定位。
background-clip 規定背景的繪制區域，值：border-box | padding-box | content-box ，分別表示背景被剪裁到邊框、內邊距框，內容框。
background-scroll 規定背景圖像是否固定或隨頁面滾動。 值：scroll(默認)隨著滾動，fixed圖像不會移動。
注意：如果將背景圖片加在body上，要設置body的高度，否則無法撐起背景圖片。
邊框 border
樣式：border: 寬度 樣式 顏色 。樣式中：dotted表示點線，dashed表示虛線，solid表示實線
如：border：2px dotted red;
可以拆分成：border-width :2px；border-style :dotted；border-color :red；
border-radius:50%
列表屬性
針對ul，ol的設置，list-style 是一個簡寫屬性，包括了list-style-type，list-style-position，list-style-image
list-style-type：設置列表項標記的類型。none(無標記)，disc(默認，實心圓)，circle(空心圓)，square(方塊)，decimal(數字)......等等。
list-style-position：設置在何處放置列表項標記。inside(放在文本內)，outside(默認值，放在文本的左側)
list-style-image：使用圖像來替換列表項的標記。（請始終規定一個list-style-type屬性以防圖像不可用）URL(圖像的路徑)，none(默認，無圖像)
display
可以將標簽設為行內或塊級屬性。設置 inline 為行內，設置 block 為塊級。
如果設置 inline-block 則同時具有：
inline的屬性：默認自己有多少空間占多少空間
block的屬性：可以設置高度，寬度，邊距 （ 行內標簽不能設置高度和寬度，而塊級標簽可以）
值為none，則隱藏標簽，不顯示也不占據頁面空間。
※ inline-block的間隙
111
222
333
(1) 我們可以通過margin:-3px來解決，但是
1.我們布局肯定很多元素，不可能每個都添加margin負這樣維護成本太大了
2.我們線上代碼如果壓縮，那么我們就不存在哪個4px的問題了，那么我們的margin負就回造成布局混亂！
(2)我們可以給幾個標簽加一個父級div，然后：
div{word-spacing: -5px;} 設置字間距
visibility
該屬性可設置元素是否可見，與display：none不同的是，visibility：hidden會不可見，但占據頁面空間。
值：visible 默認值，可見的。
hidden 隱藏
內邊距和外邊距（margin padding）
外邊距 margin 用于控制元素與元素之間的距離。當margin值增加時，與父標簽上左右距離增加，標簽本身的大小被強制變化。但如果多帶帶設置某一邊距時，標簽大小不會變化（margin-top 上邊距，margin-left 左邊距，margin-right 右邊距，margin-bottom 下邊距。）
內邊距 padding 用于控制內容與邊框的距離。當padding值增加時，將會改變本身的大小（padding-top，padding-left，padding-right，padding-bottom是常用的方法）。
※ 重要：當指定一個標簽的寬高度時，設置的只是內容區的大小。實際標簽的大小，還要加上邊距和邊框。
margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下 右左
margin:10px; ---------------------上右下左
常用： margin: 0 auto; 表示與父標簽上邊距為0，左右居中。
下面的例子中的元素的總寬度為300px：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
※ 思考：邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下，body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，解決方法：body{ margin:0; }
※ 思考：邊界重疊（margin collapse）
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段 落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。又比如停車場。
兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值。
父子div：如果父標簽沒有設置內邊距padding、邊框border、文本內容inline content。子標簽與父標簽之間將不會體現外邊距(即使設置)，字標簽的margin將會一直向上找，直到找到某個標簽有padding、border、inline content中的任何一個，將外邊距體現在這里。
例子：
Title
解決方法：
父子div： 1.父標簽設置透明邊框 border:1px solid transparent;
2.父標簽設置內邊距 padding:1px;
3.在父標簽內加文本內容
4.給父標簽設置overflow:hidden
兄弟div：1.float浮動 2.display:inline-block
浮動 float
首先了解塊級元素和行內元素在文檔流中的排列方式
block塊級元素：
block元素獨占一行，每個塊級元素會各自新起一行，默認塊級元素寬度會填滿父標簽寬度。
block元素可以設置寬高、內外邊距。
inline行內元素：
行內元素不會獨占一行，多個行內元素會共同存在一行。
不能設置寬高，可以設置水平方向padding、margin，不能設置垂直方向padding、margin。
文檔流，指的是元素排版布局過程中，元素會自動從左向右，從上到下的流式排列。
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位
只有絕對定位position：absolute/fixed和浮動float才會脫離文檔流。
部分無視和完全無視的區別？
需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)
浮動的表現
定義：浮動的框可以向左或向右浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的標準流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（float只對塊級元素起作用）
注意 當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。
清除浮動 clear
語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
上面的定義非常容易理解，但是讀者實際使用時可能會發現不是這么回事。 定義沒有錯，只不過它描述的太模糊，讓我們不知所措。
案例：先寫一個大方塊背景灰色，里面有三個小方塊
從左到右背景分別是紅、綠、藍。如果不浮動，三個方塊分別占三行。現在給三個小方塊都加上樣式 float:left; 它們會依次從左到右排列，并且共占一行。
如果我現在想要使紅色方塊右邊的方塊清除掉，按照我們的想法就是給紅色設置 clear:right; 然而卻并沒有任何效果。正確的用法是給綠色設置 clear:left;
所以一定要牢記：對于CSS的清除浮動規則，只能影響使用清除元素的本身，不能影響其它元素。
我們明白了如何用，那它的獨特之處在哪里？如果現在有需求：要求綠色不浮動，它的上下都有標簽要浮動，怎么實現呢？
如果直接刪除綠色的float:left;代碼，會發現，綠色被藍色覆蓋了。是因為塊級標簽一旦浮動，會脫離標準流，位于標準流的上層。解決辦法是，在刪除綠色的float代碼后加上clear:left;即可。看上去三個方塊一次縱向排列，好像沒有設置什么屬性，實際上紅色和藍色可以和其他標簽浮動堆疊，綠色不可以。
還有一個場景非常實用：在剛才的示例基礎上，把灰色塊的高度設置刪掉，界面上灰色會消失，此時的需求是：使父標簽包裹住所有子標簽。怎么做呢？ 只需要在父標簽內最底部再寫一個標簽，樣式設置 clear:both; 即可。
父標簽緊緊包裹住字標簽且不需要設置父標簽高度（清除浮動）
清除浮動方式2（推薦）：
.clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容；
content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。
display: block; <----加入的這個元素轉換為塊級元素。
clear: both; <----清除左右兩邊浮動。
visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已；
line-height: 0; <----行高為0；
height: 0; <----高度為0；
font-size:0; <----字體大小為0；
}
整段代碼就相當于在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。之所以用它，是因為我們不必在html文件中寫入大量無意義的空標簽，又能清除浮動。 話說回來，第一種方式的代碼不利于維護。 只要在需要清浮動的元素中添加 clearfix 類名就好了。
如：
清除浮動方式3：
overflow:hidden;
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
位置 position
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1965.html
-
摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現代應用，的大量使用，使得前端工程師們日常的開發少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。
歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...
UCloud
評論0
收藏0
-
摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現代應用，的大量使用，使得前端工程師們日常的開發少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。
歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...
-
摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現代應用，的大量使用，使得前端工程師們日常的開發少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。
歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...
褰辯話
評論0
收藏0
-
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。
前端開發者手冊2019
Cody Lindley 編著 原文地址
本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。
下載：PDF ...
church
評論0
收藏0
-
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。
前端開發者手冊2019
Cody Lindley 編著 原文地址
本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。
下載：PDF ...
-
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。
前端開發者手冊2019
Cody Lindley 編著 原文地址
本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。
下載：PDF ...
鄒立鵬
評論0
收藏0
男|高級講師
-
閱讀 730·2023-04-25 19:43
-
閱讀 3974·2021-11-30 14:52
-
閱讀 3800·2021-11-30 14:52
-
閱讀 3865·2021-11-29 11:00
-
閱讀 3796·2021-11-29 11:00
-
閱讀 3894·2021-11-29 11:00
-
閱讀 3571·2021-11-29 11:00
-
閱讀 6154·2021-11-29 11:00
<
