今天小編要跟大家分享的文章是關(guān)于Web前端開發(fā)規(guī)范之css規(guī)范。Web前端作為開發(fā)團(tuán)隊(duì)中不可或缺的一部分，需要按照相關(guān)規(guī)定進(jìn)行合理編寫(一部分不良習(xí)慣可能給自己和他人造成不必要的麻煩)。不同公司不同團(tuán)隊(duì)具有不同的規(guī)范和文檔。下面是根據(jù)不同企業(yè)和團(tuán)隊(duì)的要求進(jìn)行全面詳細(xì)的整理結(jié)果。來和小編一起看一看css規(guī)范的原則吧！
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)麻章,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
css規(guī)范
1、編碼規(guī)范為utf-8。
2、協(xié)作開發(fā)及分工：i會(huì)根據(jù)各個(gè)模塊，同時(shí)根據(jù)頁面相似程序，事先寫**體框架文件，分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)表現(xiàn)行為。共用css文件base.css由i書寫，協(xié)作開發(fā)過程中，每個(gè)頁面請(qǐng)務(wù)必都要引入，此文件包含reset及頭部底部樣式，此文件不可隨意修改。
3、class與id的使用：id是唯一的并是父級(jí)的，class是可以重復(fù)的并是子級(jí)的，所以id僅使用在大的模塊上，class可用在重復(fù)使用率高及子級(jí)中。id原則上都是由我分發(fā)框架文件時(shí)命名的，為JS預(yù)留鉤子的除外。
4、為JS預(yù)留鉤子的命名，請(qǐng)以js_起始，比如：js_hide，js_show。
5、class與id命名：大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由小寫英文數(shù)字來組合命名，如i_comment，fontred，width200。避免使用中文拼音，盡量使用簡易的單詞組合?？傊?，命名要語義化，簡明化
6、規(guī)避class與id命名(此條重要，若有不明白請(qǐng)及時(shí)與i溝通)：a)通過從屬寫法規(guī)避，示例見d。b)取父級(jí)元素id/class命名部分命名，示例見d。c)重復(fù)使用率高的命名，請(qǐng)以自己代號(hào)加下劃線起始，比如i_clear。d)a，b兩條，適用于在2中已建好框架的頁面，如，要在2中已建好框架的頁面代碼中加入新的div元素，按a命名法則：...，樣式寫法：#mainnav.firstnav{.......}按b命名法則：...，樣式寫法：.main_firstnav{.......}
7、css屬性書寫順序，建議遵循：布局定位屬性--自身屬性--文本屬性--其他屬性.此條可根據(jù)自身習(xí)慣書寫，但盡量保證同類屬性寫在一起.屬性列舉：布局定位屬性主要包括：displaylist-styleposition(相應(yīng)的top，right，bottom，left)floatclearvisibilityoverflow;
自身屬性主要包括：widthheightmarginpaddingborderbackground。
文本屬性主要包括：colorfonttext-decorationtext-alignvertical-alignwhite-space
其他content。
8、書寫代碼前，提高樣式重復(fù)使用率。
以上就是小編今天為大家分享的關(guān)于Web前端開發(fā)規(guī)范之css規(guī)范的文章，希望本篇文章能夠?qū)φ趶氖耊eb前端工作的小伙伴們有所幫助，想要了解更多Web前端知識(shí)記得關(guān)注北大青鳥Web培訓(xùn)官網(wǎng)，最后祝愿小伙伴們工作順利，成為一名優(yōu)秀的Web前端工程師。
盒子模型是CSS中一個(gè)很重要的概念，頁面中的所有元素都可以看成一個(gè)盒子，并占據(jù)一定的頁面空間，一個(gè)頁面由很多盒子組成，盒子之間會(huì)互相影響。只有掌握盒模型以及其中每個(gè)屬性的用法，才能真正控制好頁面元素。
盒子模型主要定義四個(gè)區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁面元素，擁有如下屬性：
邊框基本屬性：
通過一個(gè)屬性設(shè)置四個(gè)方向邊框的寬度、樣式、顏色
屬性：border
取值：width style color;
只設(shè)置某一條邊框的寬度、樣式、顏色
語法：border-方向（top/right/bottom/left）：width style color;
只設(shè)置邊框的寬度、樣式、顏色中的一種
語法：border-屬性（width/style/color）：取值;
只設(shè)置某一條邊框的寬度、樣式、顏色中的一種
語法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;
屬性：border-radius
作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。
取值：
屬性：border-image
語法：
border-image-source ：引入背景圖片
取值：
默認(rèn)值：無圖片
url(圖片URL地址)
border-image-slice ：切割引入背景圖片，把邊框背景切成9份
取值：
number：默認(rèn)單位px
百分比：
fill：保留邊框圖像的中間部分
border-image-width ：指定邊框圖片的寬度
border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個(gè)參數(shù)，即水平和垂直方向
取值：
Stretch：默認(rèn)值，拉伸
Repeat：平鋪
Round：取整平鋪
內(nèi)容區(qū)域和邊框（邊緣）之間的距離
語法：padding: 值；
單邊設(shè)置：padding-方向（top/right/bottom/left）:值；
取值：
數(shù)值px
百分比
內(nèi)邊距的簡寫方式：
padding:value;
四個(gè)方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1， value2， value3， value4
外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù)，用于拉伸兩個(gè)元素間的距離。
語法：margin: 值；
單邊設(shè)置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸計(jì)算模式
屬性：box-sizing
取值：
屬性：resize
取值：
位于元素邊框之外的一條線
屬性：
outline：width style color;
屬性：box-shadow
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一組值構(gòu)成的值列表
屬性：background-color
取值：顏色值或transparent
注意：背景顏色是從邊框位置處開始繪制
屬性：background-image
取值：url(背景圖像URL)
屬性：background-repeat
取值：
屬性：background-attchment
取值：
scroll：默認(rèn)值，滾動(dòng)
fixed：固定
屬性：background-position
取值：
屬性：background-size
取值：
屬性：background-origin
取值：
屬性：background-clip
取值：
CSS3多背景通過為每個(gè)背景屬性提供多個(gè)屬性值實(shí)現(xiàn)。
font 簡寫屬性語法：
將所有字體屬性合寫為一行，其中font-family是復(fù)合屬性中必不可少的屬性。
可以不設(shè)置其中的某個(gè)值，如果省略值地話，就使用屬性的默認(rèn)值。
②文本屬性：
（2）CSS3文本陰影屬性：
屬性：text-shadow
作用：產(chǎn)生陰影和模糊主體
語法：
作用：定義列表的編號(hào)樣式
屬性：list-style-type
作用：用于設(shè)置列表項(xiàng)的圖像屬性
語法：
圖像URL地址：圖像的相對(duì)路徑或絕對(duì)路徑
none：默認(rèn)值，不指定圖像
注意：圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來設(shè)置列表的圖片樣式。
通過設(shè)置li的背景圖片的方式來設(shè)置列表圖片基本步驟：
設(shè)置list-style-type屬性值為none
設(shè)置li標(biāo)記的背景屬性backgruond
作用：用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置
語法：
作用：可以同時(shí)設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語法：
注意：
可以不設(shè)置其中的某個(gè)值，未設(shè)置的屬性采用默認(rèn)值
同時(shí)指定list-style-image和list-style-type時(shí)，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯(cuò)誤無法顯示
當(dāng)列表與列表項(xiàng)目同時(shí)使用樣式時(shí)，列表項(xiàng)目的樣式優(yōu)先顯示
特點(diǎn)：
可以設(shè)置寬度和高度
默認(rèn)情況下每個(gè)塊級(jí)元素獨(dú)占一行
作用：
塊級(jí)元素主要用于頁面布局
常用塊級(jí)元素：
div、p、h1~h6、ol、ul等
特點(diǎn)：
不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度
默認(rèn)情況下多個(gè)行內(nèi)元素會(huì)在一行內(nèi)顯示，遇父元素邊界時(shí)會(huì)自動(dòng)換行
作用：
行內(nèi)元素主要用于設(shè)置文樣式
常用行內(nèi)元素：
a、span、em、b、i、strong、img、input等
作用：控制頁面元素脫離原有文檔流，實(shí)現(xiàn)向左或向右移動(dòng)，直到該元素外邊緣碰到其包含框或另一個(gè)浮動(dòng)框的邊緣停止，標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁?dòng)盒子的位置。浮動(dòng)的元素不占據(jù)實(shí)際空間。
屬性： float
取值：
浮動(dòng)元素不會(huì)相互重疊；
浮動(dòng)元素不會(huì)上下浮動(dòng)，如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示，而且會(huì)超出容納塊，則它下降到低于先前任何浮動(dòng)元素的位置。
作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動(dòng)元素。
取值：
作用：控制頁面元素在頁面中的位置。
屬性：position
取值：static/relative/absolute/fiexed
默認(rèn)屬性值，元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列，塊級(jí)元素獨(dú)占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動(dòng)換行。
特點(diǎn)：
相對(duì)于自身原有位置進(jìn)行偏移
仍處于標(biāo)準(zhǔn)文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當(dāng)元素相對(duì)定位后會(huì)產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時(shí)，默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。
特點(diǎn)：
建立了以包含塊為基準(zhǔn)的定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素（設(shè)定了絕對(duì)定位、相對(duì)定位或固定定位中的任何一種），如果元素沒有已定位的祖先元素，則該元素的位置相對(duì)于瀏覽器窗口。
完全脫離了標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性：
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對(duì)定位未設(shè)置偏移量的特點(diǎn)：
無論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置
脫離了標(biāo)準(zhǔn)文檔流
設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是瀏覽器窗口本身。
在計(jì)算機(jī)顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對(duì)定位容器的z-index屬性即對(duì)應(yīng)該方向。
作用：用于控制元素的層疊次序，使得某個(gè)元素浮于其他元素之上。
語法：
auto：遵循其父元素的定位
number：整數(shù)，可負(fù)，值大者疊加在上層
注意：使用z-index屬性時(shí)，要求該元素的position屬性值為absolute、relative或fixed。
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語法：dispaly:值;
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語法：visibility:值;
實(shí)際應(yīng)用，更多的使用italic屬性值
實(shí)際應(yīng)用中， 行高的數(shù)值通過設(shè)計(jì)圖獲取， 量取數(shù)值時(shí)需要使用一些輔助軟件工具
選中文字工具，屬性選中：不消除鋸齒
字體、 字號(hào)、 行高、 加粗、 斜體 都是font綜合屬性的單一屬性。
font屬性五個(gè)單一屬性的值可以進(jìn)行合寫， 屬性值可以有2到多個(gè)， 值之間用空格進(jìn)行分隔。
font進(jìn)行綜合書寫時(shí)， 必須有字號(hào)和字體參與， 而且必須字號(hào)在前， 字體在后， 不能顛倒順序。
font屬性經(jīng)常對(duì)字體、 字號(hào)、 行高進(jìn)行合寫， 書寫順序必須是字號(hào)、 行高、 字體， 字號(hào)和行高之間必須用/進(jìn)行分隔
如果font屬性需要設(shè)置加粗和斜體， 兩個(gè)屬性值只能寫在最前面， 兩個(gè)值之間可以互換位置。 后面的字號(hào)、 行高、 字體不能更改位置
作用：設(shè)置文本整體是否有線條的裝飾效果
作用：設(shè)置段落首行是否進(jìn)行縮進(jìn)
實(shí)際應(yīng)用中，常用em
屬性值區(qū)分正負(fù)， 正數(shù)表示向右縮進(jìn)， 負(fù)數(shù)表示向左縮進(jìn)
瀏覽器控制臺(tái)中的盒模型圖
作用： 設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度。
作用： 設(shè)置可以添加元素內(nèi)容的區(qū)域的高度。
如果一個(gè)元素不添加 height 屬性， 默認(rèn)屬性值為auto， 瀏覽器會(huì)自動(dòng)計(jì)算出實(shí)際高度， 也就是是內(nèi)部元素內(nèi)容自動(dòng)撐開的高度。 元素的高度自適應(yīng)內(nèi)部內(nèi)容的高度。
書寫四個(gè)方向單一屬性時(shí)， 一般是按照順時(shí)針規(guī)律書寫： 上、 右、 下、 左
設(shè)置四個(gè)屬性值， 分配方向上、 右、 下、 左。
設(shè)置三個(gè)值分配給上、 左右、 下。
設(shè)置兩個(gè)值， 分配給上下、 左右 。
設(shè)置屬性值只有一個(gè)， 四邊的值相同。
作用： 設(shè)置邊框的顏色。
屬性值： 顏色名或顏色值， 整體類似 padding 綜合屬性寫法。
每個(gè)單一屬性都必須與復(fù)合屬性 border 一致， 設(shè)置三個(gè)屬性值。
書寫四個(gè)方向單一屬性時(shí)， 一般是按照順時(shí)針規(guī)律書寫： 上、 右、 下、 左
設(shè)置四個(gè)屬性值， 分配方向上、 右、 下、 左。
設(shè)置三個(gè)值分配給上、 左右、 下。
設(shè)置兩個(gè)值， 分配給上下、 左右 。
設(shè)置屬性值只有一個(gè)， 四邊的值相同。
給 body 標(biāo)簽設(shè)置整體文字樣式， 讓大部分后代標(biāo)簽全部去繼承
設(shè)計(jì)圖中盒子高度占位是固定的， 后面同級(jí)元素在高度下面加載。多余內(nèi)容會(huì)溢出盒子。
設(shè)置了高度的盒子， 如果內(nèi)部元素的加載高度超過父級(jí)， 會(huì)溢出?？梢酝ㄟ^一個(gè)溢出的屬性 overflow， 進(jìn)行溢出部分內(nèi)容的顯示效果設(shè)置。
要求盒子高度必須自適應(yīng)內(nèi)部內(nèi)容的高度。
或者設(shè)置height的屬性值是自動(dòng)的。
一個(gè)元素內(nèi)部嵌套的子元素， 在父元素中居中。
針對(duì)類似 div 樣式上必須獨(dú)占一行的盒子， 如果子盒子寬度低于父盒子寬度， 可以設(shè)置子盒子的 margin 值， 水平方向的值都設(shè)置為 auto。
原因： auto 只在水平方向有作用， 水平方向的 margin 如果設(shè)置為 auto， 邊距會(huì)自動(dòng)無限增大， 直到撐滿整個(gè)父元素除了子元素寬度之外剩余的區(qū)域， 如果兩個(gè)水平方向都是 auto， 兩邊都要無限大， 只能達(dá)到一個(gè)平衡， 兩邊距離相同， 導(dǎo)致盒子居中。
一般情況下， 一個(gè)父元素內(nèi)部可以放一個(gè)或多個(gè)子元素， 而且多個(gè)子元素要排成一行顯示， 必須保證父元素的寬度一定要足夠（不考慮溢出情況） ， 需要遵循一個(gè)設(shè)置尺寸的規(guī)律： 所有子元素的寬度加在一起不能大于父元素的寬度 width。父元素的width ≥ 所有子元素width + padding + border + margin
如果不滿足條件： 要么多余的子元素掉下來不能在一排， 要么溢出父元素
父子盒模型中， 只有一個(gè)子元素， 且子元素是類似 div 標(biāo)簽必須占一行的。不設(shè)置子元素的 width 屬性， 子元素的 width 屬性值會(huì)自動(dòng)加載父級(jí)元素的 width。如果同時(shí)設(shè)置了子元素水平方向的 padding 和 border 、 margin， 不需要手動(dòng)去進(jìn)行內(nèi)減， 子元素的 width 會(huì)自動(dòng)收縮尺寸。
子元素所有的水平方向的位置所有屬性的加和等于父元素的 width 。
在垂直方向如果有兩個(gè)元素的外邊距有相遇的， 瀏覽器中加載的真正的外邊距不是兩個(gè)間距的加和， 而是兩個(gè)邊距中值較大的， 邊距值小的塌陷到了邊距值大的值內(nèi)部。
上面的元素有下邊距， 下面的元素有上邊距， 兩個(gè)邊距相遇， 真正的盒子間距離是較大的那個(gè)值
父子元素之間也會(huì)出現(xiàn) margin 塌陷， 父元素和子元素都設(shè)置了同方向的margin-top 值， 兩個(gè)屬性之間沒有其他的內(nèi)容進(jìn)行隔離， 導(dǎo)致兩個(gè)屬性相遇， 發(fā)生margin 塌陷。
本身父元素與上一個(gè)元素的距離是0， 子元素如果設(shè)置了垂直方向的上邊距， 會(huì)帶著父級(jí)一起掉下來。
水平方向的 margin 沒有塌陷現(xiàn)象。
在標(biāo)準(zhǔn)流中， 大部分元素是區(qū)分等級(jí)的， 習(xí)慣將元素劃分為幾種常見的加載級(jí)別：塊級(jí)元素、 行內(nèi)元素、 行內(nèi)塊元素等。
大部分容器級(jí)標(biāo)簽包括p標(biāo)簽都是塊級(jí)元素， 比如 div 、 h1 等。
大部分的文本級(jí)標(biāo)簽， 比如 span、 a、 b 等。
比如 img、 input 等。
可以通過 display 屬性更改一個(gè)標(biāo)簽的顯示模式。
屬性值： 元素根據(jù)屬性值不同， 可以加載對(duì)應(yīng)元素等級(jí)的顯示模式的特點(diǎn)。
display 屬性更改的顯示模式并沒有改變標(biāo)準(zhǔn)流本質(zhì)性質(zhì)， 頁面還是只能從上往下加載， 存在空白折疊現(xiàn)象等微觀性質(zhì)。 要想實(shí)現(xiàn)更多的界面布局效果需要脫離標(biāo)準(zhǔn)流的限制。
標(biāo)簽元素脫離標(biāo)準(zhǔn)流的方法包括： 浮動(dòng)、 絕對(duì)定位、 固定定位。
margin 塌陷現(xiàn)象出現(xiàn)在標(biāo)準(zhǔn)流中的， 浮動(dòng)元素已經(jīng)脫離標(biāo)準(zhǔn)流， 不再具有 margin塌陷現(xiàn)象。
與前面壓蓋效果結(jié)構(gòu)類似， 同級(jí)元素中前面的元素浮動(dòng)， 后面的元素不浮動(dòng)， 不浮動(dòng)的元素內(nèi)部還有一些文字， 浮動(dòng)的藍(lán)盒子會(huì)壓蓋住粉盒子的一部分， 但是文字內(nèi)容不會(huì)被蓋住， 粉盒子中的文字會(huì)讓開藍(lán)盒子位置， 圍繞它進(jìn)行加載。這種效果稱為字圍現(xiàn)象。
可以利用字圍現(xiàn)象制作一些特殊的圖文混排布局效果
給標(biāo)準(zhǔn)流的父元素強(qiáng)制給一個(gè)合適的高度
作用： 清除標(biāo)簽元素自身受到的前面的浮動(dòng)元素的影響。
給標(biāo)準(zhǔn)流父元素添加 clear 屬性， 父元素不受前面浮動(dòng)影響， 不會(huì)再占有浮動(dòng)讓出的位置。
給內(nèi)部有浮動(dòng)子元素的父元素添加溢出隱藏 overflow: hidden; 屬性， 可以解決浮動(dòng)的所有問題。
父元素有了高度后， 可以管理住內(nèi)部所有的浮動(dòng)元素， 不會(huì)延伸到后面標(biāo)簽中影響貼邊。
a 標(biāo)簽可以根據(jù)用戶行為不同， 劃分為四種狀態(tài)， 通過a 標(biāo)簽的偽類可以將四種狀態(tài)選中設(shè)置為不同的樣式效果， 用戶觸發(fā)對(duì)應(yīng)行為， 就可以加載對(duì)應(yīng)的樣式。
一般會(huì)將訪問前和訪問后狀態(tài)設(shè)置為一樣的效果， 保證了頁面的統(tǒng)一性， 可以選擇性的設(shè)置鼠標(biāo)移上和鼠標(biāo)點(diǎn)擊狀態(tài)。
更加常用的一種設(shè)置方式如下：
a 標(biāo)簽任何普通的選擇器， 可以同時(shí)選中四種狀態(tài)， 可以將四種狀態(tài)設(shè)置為相同的樣式， 屬性可以設(shè)置所有的 a 默認(rèn)顯示樣式的屬性， 包括盒模型、 文字等。
a:hover 偽類選擇器： 設(shè)置鼠標(biāo)移上時(shí)不一樣的樣式屬性。
屬性值都是使用代表方向的單詞進(jìn)行書寫。
使用像素值作為背景定位的屬性值。
百分比表示法使用百分比數(shù)字作為屬性值。
100%代表的數(shù)值：
background 屬性可以將五個(gè)單一屬性的值進(jìn)行合寫。
屬性值： 可以有 1-5 個(gè)屬性值， 值之間用空格進(jìn)行分隔， 背景定位的兩個(gè)屬性值算作一個(gè)屬性值， 不能被分開也不能顛倒順序。 五個(gè)屬性值之間可以互換位置。
在h1 標(biāo)簽是權(quán)重最高的標(biāo)簽， 一般會(huì)在內(nèi)部書寫最重要的內(nèi)容， 比如 logo 圖片、 最大的標(biāo)題等。
另外 h1 內(nèi)部的文字， 可以幫助提高 SEO 搜索排名。
在設(shè)置的是 logo 圖片時(shí)， 如果使用插入圖， 就不能書寫搜索關(guān)鍵字。
如果想解決 SEO 問題， 可以將 HTML 結(jié)構(gòu)中， 插入圖換成搜索關(guān)鍵字， 然后使用 css 添加背景圖給 a 標(biāo)簽或 h1 標(biāo)簽。
在一個(gè)盒子中有背景圖部分， 而且有文字內(nèi)容， 文字會(huì)讓開背景圖區(qū)域進(jìn)行加載，
背景區(qū)域應(yīng)該使用 padding 擠出位置。
四個(gè)方向的 padding 都可能用于添加背景圖。
當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)， 需要向服務(wù)器發(fā)送請(qǐng)求， 網(wǎng)頁上的每張圖像都要經(jīng)過一次求才能展現(xiàn)給用戶。
然而， 一個(gè)網(wǎng)頁中往往會(huì)應(yīng)用很多小的背景圖像作為修飾， 當(dāng)網(wǎng)頁中的圖像過多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求， 這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)， 提高頁面的加載速度， 出現(xiàn)了 CSS精靈技術(shù)（也稱 CSS Sprites、 CSS 雪碧） 。
CSS 精靈是一種處理網(wǎng)頁背景圖像的方式。
它將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去， 然后將大圖應(yīng)用于網(wǎng)頁， 這樣， 當(dāng)用戶訪問該頁面時(shí)， 只需向服務(wù)發(fā)送一次請(qǐng)求， 網(wǎng)頁中的背景圖像即可全部展示出來。
通常情況下， 這個(gè)由很多小的背景圖像合成的大圖被稱為精靈圖。
CSS3 支持背景半透明的寫法， 顏色值增加了一種 rgba 模式。
rgba 模式 ： 在 rgb 基礎(chǔ)上增加了一個(gè)不透明度的設(shè)置， 不透明度 alpha 取值范圍在0-1 之間， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。
書寫方式： rgba(紅色， 綠色， 藍(lán)色， 不透明度)
注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不受影響。
通過 background-size 設(shè)置背景圖片的尺寸， 就像我們?cè)O(shè)置 img 的尺寸一樣， 在移動(dòng) Web 開發(fā)中做屏幕適配應(yīng)用非常廣泛。
CSS3 中規(guī)定， 一個(gè)盒子上， 可以添加多個(gè)背景圖片。
background-image 的屬性值書寫時(shí)， 以逗號(hào)分隔多背景的 URL路徑地址。
注意： 背景加載時(shí)， 先寫的背景壓蓋后寫的背景圖片。
屬性名： position。
作用： 設(shè)置定位的元素， 它需要根據(jù)某個(gè)參考元素發(fā)生位置的偏移。
定位的元素要想發(fā)生位置的移動(dòng)， 必須搭配偏移量屬性進(jìn)行設(shè)置。
水平方向： left、 right。
垂直方向： top、 bottom。
屬性值： 常用 px 為單位的數(shù)值， 或者百分比。
子絕父相、 子絕父絕、 子絕父固
屬性值： absolute， 絕對(duì)的意思。
參考元素： 參考的是距離最近的有定位的祖先元素， 如果祖先都沒有定位， 參考body。必須搭配偏移量屬性才會(huì)發(fā)生位置移動(dòng)。
性質(zhì)： 絕對(duì)定位的元素脫離標(biāo)準(zhǔn)流， 會(huì)讓出標(biāo)準(zhǔn)流位置， 可以設(shè)置寬高， 也可以隨時(shí)定義位置， 絕對(duì)定位的元素不設(shè)置寬高只能被內(nèi)容撐開。
注意1： 絕對(duì)定位的參考元素是不固定的， 不同的參考元素以及不同的偏移量組合，會(huì)導(dǎo)致絕對(duì)定位元素的參考點(diǎn)不同， 具體位移效果不同。
注意2： 在絕對(duì)定位中， 由于參考點(diǎn)不同， left 正值不再等價(jià)于 right 的負(fù)值。
以 body 為參考元素時(shí)， 參考點(diǎn)的確定與偏移量方向有關(guān)
第一， 如果有 top 參與的定位， 參考點(diǎn)就是 body 頁面的左上頂點(diǎn)和右上頂點(diǎn)。 自身的對(duì)比點(diǎn)是盒子的所有盒模型屬性最外面的左上角或右上角。
第二， 如果有 bottom 參與的絕對(duì)定位， 參考點(diǎn)是 body 頁面首屏的左下頂點(diǎn)或右下頂點(diǎn)。 對(duì)比點(diǎn)是盒子的所有盒模型屬性最外面的左下角或右下角。
實(shí)際應(yīng)用中， 如果以 body 為參考元素， 不同分辨率的瀏覽器中， 絕對(duì)定位的元素位置是不同的， 所以較少使用 body 作為參考元素。
祖先級(jí)為參考元素
如果祖先級(jí)中有定位的元素， 就不會(huì)去參考 body 。
參考元素： 參考的是祖先元素中有任意定位的， 在 HTML 結(jié)構(gòu)中距離目標(biāo)最近的祖先。
如果絕對(duì)定位的參考元素是某個(gè)祖先級(jí)， 參考點(diǎn)是盒子 border 以內(nèi)的四個(gè)頂點(diǎn)， 組合方向決定了參考點(diǎn)。 絕對(duì)定位的元素只關(guān)心對(duì)比點(diǎn)和參考點(diǎn)之間的距離， 會(huì)忽視參考元素的 padding 區(qū)域。
所有的定位類型都可以實(shí)現(xiàn)壓蓋效果。
由于絕對(duì)定位的元素脫標(biāo)， 不占標(biāo)準(zhǔn)流位置， 壓蓋效果更徹底， 實(shí)際工作中， 常見的是 絕對(duì)定位制作壓蓋。
定位的元素不區(qū)分定位類型， 都會(huì)去壓蓋標(biāo)準(zhǔn)流或浮動(dòng)的元素。
如果都是定位的元素， 在 HTML 中 后寫定位壓蓋先寫的定位 。
更改定位的元素的壓蓋順序， 設(shè)置一個(gè) z-index 屬性。
屬性值： 數(shù)字。
“css的樣式規(guī)則是:由選擇器和聲明塊兩個(gè)基本部分組成的。選擇器決定為哪些元素應(yīng)用樣式;聲明塊定義相應(yīng)的樣式,它包含在一對(duì)花括號(hào)內(nèi),有一條或多條聲明組成,而每一條聲明則由一個(gè)屬性和一個(gè)值組成,中間用冒號(hào)隔開
重慶分公司
重慶分公司
