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