Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 日本特黄特色大片免费视频,99香蕉国产精品偷在线观看,激情在线视频 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          技術(shù)學(xué)派：CSS規(guī)范總結(jié)
          
        
           
          
	
	
          
		
                        
          SS樣式的權(quán)值(權(quán)重)
          權(quán)值等級(jí)的定義
          第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
          第二等：代表ID選擇器，如：#content，權(quán)值為100。
          第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為10。
          第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為1。
          Ps:通用選擇器（*），子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個(gè)等級(jí)中，所以他們的權(quán)值都為0，!important 優(yōu)先級(jí)最高，萬(wàn)不得已的情況下才用。
          權(quán)重計(jì)算
           #content div#main-content h2=2*100+2*1=202
 #content #main-content>h2=2*100+1=201
 body #content div[id="main-content"] h2=1*100+1*10+3*1=113
 #main-content div.paragraph h2=1*100+1*10+2*1=112
 #main-content [class="paragraph"] h2=1*100+1*10+1*1=111
 div#main-content div.paragraph h2.first=1*100+2*10+3*1=123

          優(yōu)先規(guī)則
          權(quán)值大的樣式會(huì)覆蓋權(quán)值小的樣式，上面例子的樣式會(huì)采用權(quán)值最大201的樣式，當(dāng)你亂用!important，特別是后期修改樣式的時(shí)候，是不是有種心力憔悴電費(fèi)感覺(jué)？
          當(dāng)css前后樣式項(xiàng)的權(quán)值一樣，后面的樣式會(huì)覆蓋前面的樣式。
          Css 概念
          CSS規(guī)范
          命名風(fēng)格規(guī)范
          1 css文件命名：統(tǒng)一為小寫的英文字母（盡量少用拼音），如：index.css。
          當(dāng)名字需要組合拼寫時(shí)，可以在單詞間加中杠線（不要用下劃線：容易寫錯(cuò)）。如：member-report.css。（推薦）
          或者統(tǒng)一為駝峰式拼寫。如：MemberReport.css (項(xiàng)目啟動(dòng)前統(tǒng)一風(fēng)格)。
          2 樣式名（html的class名）：在讓人看懂的前提下，盡量語(yǔ)義化或簡(jiǎn)寫。盡量少用拼音，和無(wú)語(yǔ)義的縮寫 .bt .bd 等； 風(fēng)格可以統(tǒng)一為小寫字母，如：content。當(dāng)名字需要組合時(shí)，可以采用css文件名的規(guī)范。
          樣式的繼承
          文本樣式
          color,font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height，text-align, text-indent, texttransform,word-spacing 

          列表相關(guān)屬性
          list-style-image, list-style-position,
list-style-type, list-style,

          像素化 css
          CSS優(yōu)化
          渲染
          就是瀏覽器把HTML代碼以css定義的規(guī)則顯示在瀏覽器窗口的過(guò)程
          瀏覽器對(duì)頁(yè)面呈現(xiàn)的處理流程
          1. 用戶輸入網(wǎng)址（假設(shè)是個(gè)html頁(yè)面，并且是第一次訪問(wèn)），瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件；
          2. 瀏覽器開(kāi)始載入html代碼，發(fā)現(xiàn)<head>標(biāo)簽內(nèi)有一個(gè)<link>標(biāo)簽引用外部CSS文件；
          3. 瀏覽器又發(fā)出CSS文件的請(qǐng)求，服務(wù)器返回這個(gè)CSS文件；
          4. 瀏覽器繼續(xù)載入html中<body>部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開(kāi)始渲染頁(yè)面了；
          5. 瀏覽器在代碼中發(fā)現(xiàn)一個(gè)<img>標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請(qǐng)求。此時(shí)瀏覽器不會(huì)等到圖片下載完，而是繼續(xù)渲染后面的代碼；
          6. 服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器要回過(guò)頭來(lái)重新渲染這部分代碼；
          7. 瀏覽器發(fā)現(xiàn)了一個(gè)包含一行Javascript代碼的<script>標(biāo)簽，趕快運(yùn)行它；
          8. Javascript腳本執(zhí)行了這條語(yǔ)句，它命令瀏覽器隱藏掉代碼中的某個(gè)<div> （style.display=”none”）。杯具啊，突然就少了這么一個(gè)元素，瀏覽器不得不重新渲染這部分代碼；
          9. 終于等到了</html>的到來(lái)，瀏覽器淚流滿面……
          10. 等等，還沒(méi)完，用戶點(diǎn)了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標(biāo)簽的CSS路徑；
          11. 瀏覽器召集了在座的各位<div><span><ul><li>們，“大伙兒收拾收拾行李，咱得重新來(lái)過(guò)……”，瀏覽器向服務(wù)器請(qǐng)求了新的CSS文件，重新渲染頁(yè)面。
          回流
          當(dāng)頁(yè)面的布局發(fā)生變化時(shí)，瀏覽器會(huì)回過(guò)頭來(lái)重新渲染，這就是頁(yè)面為什么會(huì)慢的一個(gè)原因，當(dāng)一個(gè)點(diǎn)的變 化影響了布局，這就會(huì)使得要倒回去重新渲染，這個(gè)倒回去的過(guò)程稱為 reflow（回流）。
          當(dāng)頁(yè)面布局和幾何屬性改變時(shí)就需要回流。下述情況會(huì)發(fā)生瀏覽器回流
          1. 添加或者刪除可見(jiàn)的DOM元素；
          2. 元素位置改變和計(jì)算（offsetWidth 和 offsetHeight）
          3. 元素尺寸改變——邊距、填充、邊框、寬度和高度
          4. 內(nèi)容改變——比如文本改變或者圖片大小改變，字體的改變而引起的計(jì)算值寬度和高度改變；
          5. 頁(yè)面渲染初始化
          6. 瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)；
          7. 操作 class 屬性，腳本操作 DOM，設(shè)置 style 屬性的值，激活 CSS 偽類
          var s = document.body.style;
s.padding = "2px"; // 回流+重繪
s.border = "1px solid red"; // 再一次 回流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 回流+重繪
// 添加node，再一次 回流+重繪
document.body.appendChild(document.createTextNode('abc!'));
回流比重繪的代價(jià)要更高，回流的花銷跟render tree有多少節(jié)點(diǎn)需要重新構(gòu)建有關(guān)系，假設(shè)你直接操作body，比如在body最前面插入1個(gè)元素，會(huì)導(dǎo)致整個(gè)render tree回流，這樣代價(jià)當(dāng)然會(huì)比較高，但如果是指body后面插入1個(gè)元素，則不會(huì)影響前面元素的回流。

          reflow問(wèn)題也是可以優(yōu)化的，減少reflow是很有必要的，比如給圖片設(shè)定好寬度和高度，這樣就可以把圖片的占位面積預(yù)定好。
          重繪
          一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格（景顏色，文字顏色，邊框顏色）而不會(huì)影響布局，瀏覽器就會(huì)repaint。repaint的速度明顯比reflow的速度快。
          為了幫助小伙伴們更好的學(xué)習(xí)WEB前端，技術(shù)學(xué)派整理了WEB前端的相關(guān)學(xué)習(xí)視頻及學(xué)習(xí)路線圖。
          領(lǐng)取方式
          關(guān)注“技術(shù)學(xué)派”后，評(píng)論轉(zhuǎn)發(fā)文章，私信回復(fù)：WEB前端
          碼規(guī)范
          CSS樣式表是一個(gè)序列通用字符集，傳輸和存儲(chǔ)過(guò)程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯
          文檔內(nèi)嵌樣式表編碼
          When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.
          當(dāng)樣式出現(xiàn)在其它文檔，如 HTML 的 STYLE 標(biāo)簽或標(biāo)簽屬性 "style"，樣式的編碼由文檔的決定。
          文檔外鏈樣式表編碼
          When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):
          An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8
          文檔外鏈樣式表的編碼可以由以下各項(xiàng)按照由高到低的優(yōu)先級(jí)順序決定：
          1. HTTP “Content-Type” 字段參數(shù) “charset”（或其它協(xié)議相似的參數(shù)）
          2. BOM（byte-order mark）和（或）[@charset ]()
          3. Link 中的元數(shù)據(jù)設(shè)置（如果有的話）
          4. 引用樣式表字符集或文檔編碼（如果有的話）
          5. 假定為 UTF-8 編碼
          樣式表編碼
          Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)
          [@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.
          • @charset規(guī)則一定要在樣式文件的第一行首個(gè)字符位置開(kāi)始，否則的話就會(huì)有機(jī)會(huì)讓 BOM 設(shè)置生效（如果有設(shè)置 BOM 的話）而優(yōu)于 [@charset ]() 作為樣式表的編碼
          • @charset ""; 一定要寫上，并且用小寫字母，不能出現(xiàn)轉(zhuǎn)義符
          團(tuán)隊(duì)約定
          • 樣式文件必須寫上 [@charset ]() 規(guī)則，并且一定要在樣式文件的第一行首個(gè)字符位置開(kāi)始寫，編碼名用 “UTF-8”
          • 字符 [@charset ]() ""; 都用小寫字母，不能出現(xiàn)轉(zhuǎn)義符，編碼名允許大小混寫
          • 考慮到在使用“UTF-8”編碼情況下 BOM 對(duì)代碼的污染和編碼顯示的問(wèn)題，在可控范圍下，堅(jiān)決不使用 BOM。（更多關(guān)于 BOM 可參考 BOM的介紹 和 「帶 BOM 的 UTF-8」和「無(wú) BOM 的 UTF-8」有什么區(qū)別？ ）
          推薦：
          @charset "UTF-8";

.jdc{}
          不推薦：
          /**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset規(guī)則不在文件首行首個(gè)字符開(kāi)始 */
@charset "UTF-8";

.jdc{}
          @CHARSET "UTF-8";
/* @charset規(guī)則沒(méi)有用小寫 */

.jdc{}
          /* 無(wú)@charset規(guī)則 */
.jdc{}
          更多關(guān)于樣式編碼：CSS style sheet representation
          代碼風(fēng)格
          代碼格式化
          樣式書寫一般有兩種：一種是緊湊格式 (Compact)
          .jdc{ display: block;width: 50px;}
          一種是展開(kāi)格式（Expanded）
          .jdc{
    display: block;
    width: 50px;
}
          團(tuán)隊(duì)約定
          統(tǒng)一使用展開(kāi)格式書寫樣式
          代碼大小寫
          樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。
          /* 推薦 */
.jdc{
    display:block;
}
    
/* 不推薦 */
.JDC{
    DISPLAY:BLOCK;
}
          選擇器
          • 盡量少用通用選擇器 *
          • 不使用 ID 選擇器
          • 不使用無(wú)具體語(yǔ)義定義的標(biāo)簽選擇器
          /* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}
          代碼縮進(jìn)
          統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
          .jdc {
    width: 100%;
    height: 100%;
}
          分號(hào)
          每個(gè)屬性聲明末尾都要加分號(hào)；
          .jdc {
    width: 100%;
    height: 100%;
}
          代碼易讀性
          左括號(hào)與類名之間一個(gè)空格，冒號(hào)與屬性值之間一個(gè)空格
          推薦：
          .jdc { 
    width: 100%; 
}
          不推薦：
          .jdc{ 
    width:100%;
}
          逗號(hào)分隔的取值，逗號(hào)之后一個(gè)空格
          推薦：
          .jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
          不推薦：
          .jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
          為單個(gè)css選擇器或新申明開(kāi)啟新行
          推薦：
          .jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}
          不推薦：
          .jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}
          顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0
          推薦：
          .jdc {
    color: rgba(255,255,255,.5);
}
          不推薦：
          .jdc {
    color: rgba( 255, 255, 255, 0.5 );
}
          屬性值十六進(jìn)制數(shù)值能用簡(jiǎn)寫的盡量用簡(jiǎn)寫
          推薦：
          .jdc {
    color: #fff;
}
          不推薦：
          .jdc {
    color: #ffffff;
}
          不要為 0 指明單位
          推薦：
          .jdc {
    margin: 0 10px;
}
          不推薦：
          .jdc {
    margin: 0px 10px;
}
          屬性值引號(hào)
          css屬性值需要用到引號(hào)時(shí)，統(tǒng)一使用單引號(hào)
          /* 推薦 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
    font-family: "Hiragino Sans GB";
}
          屬性書寫順序
          建議遵循以下順序：
          1. 布局定位屬性：display / position / float / clear / visibility / overflow
          2. 自身屬性：width / height / margin / padding / border / background
          3. 文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
          4. 其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...
          .jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}
          mozilla官方屬性順序推薦
          CSS3瀏覽器私有前綴寫法
          CSS3 瀏覽器私有前綴在前，標(biāo)準(zhǔn)前綴在后
          .jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}
          更多關(guān)于瀏覽器私有前輟寫法：#Vendor-specific extensions
          參考閱讀
          Google Code Guide

          者：sunshine小小倩
          轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/592d4a5b0ce463006b43b6da
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产精品福利区一区二区三区四区|
一区二区三区精品高清视频免费在线播放
|
在线视频国产一区|
视频一区精品自拍|
日韩一区二区三区在线观看|
在线视频一区二区三区|
真实国产乱子伦精品一区二区三区
|
亚洲AV无一区二区三区久久|
国产一区二区三区不卡在线观看|
国产成人精品第一区二区|
国产精品女同一区二区|
波多野结衣高清一区二区三区|
无码精品人妻一区二区三区免费|
国产一区二区三区国产精品|
日韩精品一区二区三区国语自制
|
精品国产一区二区22|
无码人妻一区二区三区在线水卜樱|
亚洲AV成人精品一区二区三区|
久久久久人妻一区二区三区vr|
亚洲AV无码一区二区乱孑伦AS|
国产无线乱码一区二三区|
97久久精品午夜一区二区|
亚洲色无码一区二区三区|
精品少妇一区二区三区在线|
中文字幕精品亚洲无线码一区应用|
国产免费一区二区三区免费视频|
中文字幕一区二区区免|
国产午夜福利精品一区二区三区|
国产精品日本一区二区不卡视频
|
精品无码一区二区三区爱欲九九|
无码精品人妻一区二区三区人妻斩
|
国产精品香蕉在线一区|
亚洲Av无码国产一区二区|
色综合久久一区二区三区|
国产福利在线观看一区二区|
日韩久久精品一区二区三区|
亚洲国产精品一区二区九九|
制服中文字幕一区二区|
91精品乱码一区二区三区|
国产精品一区二区香蕉|
亚洲日本一区二区一本一道|