HTML+css零碎小知識

來源:互聯網
上載者:User

標籤:優先   方向   行高   pstore   targe   三角形   overflow   scale   pos   

1、設定了float浮動的元素和絕對位置position:absolute的元素會脫離正常的文檔流。但是設定absolute的元素不會佔據空間,相當於隱形了。 2、相對定位position:relative是指相對於文檔流中的其它已經定義的元素位置進行定位。在不設定top/left/right/bottom/Z-index等值的情況下和預設值static表現一樣。 3、絕對位置position:absolute是相對於上一個不為static預設定位的父元素進行絕對位置。若父元素沒有指定position,該元素會相對於整個html文檔進行定位。 4、overflow:auto;一種清除浮動的方法,在具有浮動元素的父容器中添加,這樣父容器就會有一個高度,隨著子項目高度增加而增加。5、考慮瀏覽器寬度變小的時候,要加min-width~ 1、實現子項目在父元素中的水平和垂直置中。父元素和子項目需要設定寬度和高度,父元素相對定位,子項目絕對位置並且設定magin:auto和top:0;left:0;right:0;bottom:0; 2、經常會使用到用border-radius來設定元素邊框圓角。 3、可以通過設定相對定位和絕對位置同時設定top或right或left或bottom來進行定位。4、可以通過float,設定margin-left等來進行定位。position:absolate和float會使元素脫離正常的文檔流,兩者結合通過設定top等,也可以進行定位。.div{width:158px;padding:20px;border:1px solid #ccc;margin:10px;}在瀏覽器審查元素時顯示的width=200px; 200=158+20x2+1x2=200 不計算外邊距 box-sizing屬性:box-sizing:border-box; //border和padding計算入width之內,上面的例子width就等於158px;box-sizing:content-box; //border和padding不計算入width之內box-sizing:padding-box; //padding計算入width之內 outline:1px solid red;輪廓:繪製元素周圍的一條線,與border相比,outline是不佔空間的。 css文字屬性:line-height行高 letter-spacing 字元間距 word-spacing 字間距 text-indent 縮排若文本本是在父元素中置中顯示,使用letter-spacing:20px後,文本不置中了。則設定text-indent:20px;或者使用padding-left。font-variant:small-caps;把段落設定為小型大寫字母字型。font-style:italic;字型為斜體。 z-index設定元素堆疊順序。僅在定位元素即設定position元素上生效,設定數值越高則越離使用者越近。 p:target{ ... }URL 帶有後面跟有錨名稱 #,指向文檔內某個具體的元素。這個被連結的元素就是目標元素(target element), :target 選取器可用於選取當前活動的目標元素。執行個體:.slider li:target{-webkit-animation:scroll 500ms linear;-moz-animation:scroll 500ms linear; -o-animation:scroll 500ms linear; animation:scroll 500ms linear; position:absolute;z-index:2;//linear 是指過渡的時候動畫速度全程一致 } @keyframes scroll { 0%{ left: -100%; } 100%{ left: 0%; }}  點擊輸入框時寬度以600ms速度從120px速率緩慢變大到220px#big-input{ width: 120px; margin-top: 20px; margin-left: 40px; -webkit-transition: width 600ms; -o-transition: width 600ms; -moz-transition: width 600ms; transition: width 600ms; } #big-input:focus{ width: 220px;}類似margin順序:a,b,c,d;上右下左 html: <b>粗體<i>斜體<strong>強調文本<em>強調文本 <input type="">type: text文本域 password密碼 radio選項按鈕 checkbox複選框 submit提交按鈕 <lable></lable>定義<input>元素的標籤,一般為輸入標題。 下拉框:<select><option></option><option></option>...</select>  一、元素分類--區塊層級元素 什麼是區塊層級元素?在html中div、 p、h1、form、ul 和 li就是區塊層級元素。設定display:block就是將元素顯示為區塊層級元素。a{display:block;}就是將內嵌元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。  區塊層級元素特點: 1、每個區塊層級元素都從新的一行開始,並且其後的元素也另起一行。(真霸道,一個區塊層級元素獨佔一行) 2、元素的高度、寬度、行高以及頂和底邊距都可設定。 3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定一個寬度。  二、元素分類--內嵌元素 在html中,span、a、label、 strong和em就是典型的內嵌元素(行內元素)(inline)元素。當然塊狀元素也可以通過代碼display:inline將元素設定為內嵌元素。 div{display:inline;}就是將塊狀元素div轉換為內嵌元素,從而使 div 元素具有內嵌元素特點。 內嵌元素特點: 1、和其他元素都在一行上; 2、元素的高度、寬度及頂部和底部邊距不可設定; 3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。 三、元素分類--內聯塊狀元素 內聯塊狀元素(inline-block)就是同時具備內嵌元素、塊狀元素的特點,代碼display:inline-block就是將元素設定為內聯塊狀元素。(css2.1新增),img、input標籤就是這種內聯塊狀標籤。 inline-block 元素特點: 1、和其他元素都在一行上; 2、元素的高度、寬度、行高以及頂和底邊距都可設定。   合併儲存格(電話 佔兩格): <h4>橫跨兩列的儲存格:</h4><table border="1"><tr><th>姓名</th><th colspan="2">電話</th></tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr></table> <h4>橫跨兩行的儲存格:</h4><table border="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th rowspan="2">電話</th><td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table>   <colgroup> 標籤用於對錶格中的列進行組合,以便對其進行格式化。如需對全部列應用樣式,<colgroup> 標籤很有用,這樣就不需要對各個單元和各行重複應用樣式了。<colgroup> 標籤只能在 table 元素中使用。所有主流瀏覽器都支援 <colgroup> 標籤。Firefox、Chrome 以及 Safari 僅支援 colgroup 元素的 span 和 width 屬性。 <table><caption>網站排名</caption><colgroup><col class="colgroup"><col class="colgroup"><col class="colgroup"></colgroup><thead class="table-head"><tr><td>排名</td><td>網站</td><td>熱度</td></tr></thead><tbody class="table-content"><tr><td>1.</td><td>百度前端技術學院</td><td>13000</td></tr><tr><td>2.</td><td>百度前端技術學院</td><td>12000</td></tr></tbody></table> 這樣就可以通過.colgroup對每一列儲存格進行樣式更改。  選取器:[class*=‘col-‘] 選擇類名中含有col-的所有元素 隱藏元素:display:none;隱藏元素後不佔據任何空間,相當於消失。visibility:hidden;隱藏元素後依舊佔據空間,影響布局。    css偽類:before和:afterp:before{content:"哈哈";background-color:red;color:black;font-weight:blod; }p:before指在每個<p>元素之前插入內容,並設定插入內容的樣式。如果不需要內容,只配合樣式,那麼content也不可為空,需要這樣寫 content : "";這些添加不會改變文檔的內容,不會出現在DOM中,不可複製:after指在指定元素後面新增內容。  eg:當不觸發div1時,div2不可見,當觸發div1時,div2可見。.div2{width:100px;height:100px;display:none; }.div1:hover .div2{display:block; }   eg:繪製一個頭部向右的白色三角形:div{width:0;height:0;border-width:15px;border-style:solid;border-color:transparent transparent transparent #fff;//上右下左分別為透明 透明 透明 白色 } eg:做一個彈出對話方塊,對話方塊上方有一個帶邊框的三角形: 寫兩個相同的三角形,下面的三角形背景顏色是對話方塊邊框的顏色,上面的顏色是對話方塊的背景顏色。將上面的三角形相對於下面的三角形向下移動1px。 響應式@media:瀏覽器寬度大於768px時:@media only screen and (min-width:768px){ ... }瀏覽器寬度在500px-768px之間時:@media only screen and (max-width:768px) and (min-width:500px){ ... }瀏覽器寬度小於500px時:@media only screen and (max-width:500px){ ... }   移動端的工作已經越來越成為前端工作的重要內容,除了平常的項目開發,HTML 頭部標籤功能,特別是meta標籤顯得非常重要。 為行動裝置添加 viewport: <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">content 參數:width viewport 寬度(數值/device-width)height viewport 高度(數值/device-height)initial-scale 初始縮放比例maximum-scale 最大縮放比例minimum-scale 最小縮放比例user-scalable 是否允許使用者縮放(yes/no) 移動端的頭部標籤和meta: <!DOCTYPE html> <!-- 使用 HTML5 doctype,不區分大小寫 --><html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa --><head><!-- 聲明文檔使用的字元編碼 --><meta charset=‘utf-8‘><!-- 優先使用 IE 最新版本和 Chrome --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><!-- 頁面描述 --><meta name="description" content="不超過150個字元"/><!-- 頁面關鍵詞 --><meta name="keywords" content=""/><!-- 網頁作者 --><meta name="author" content="name, [email protected]"/><!-- 搜尋引擎抓取 --><meta name="robots" content="index,follow"/><!-- 為行動裝置添加 viewport --><meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"><!-- `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全螢幕模式開啟頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz --> <!-- iOS 裝置 begin --><meta name="apple-mobile-web-app-title" content="標題"><!-- 添加到主屏後的標題(iOS 6 新增) --><meta name="apple-mobile-web-app-capable" content="yes"/><!-- 是否啟用 WebApp 全螢幕模式,刪除蘋果預設的工具列和功能表列 --> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"><!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) --><meta name="apple-mobile-web-app-status-bar-style" content="black"/><!-- 設定蘋果工具列顏色 --><meta name="format-detection" content="telphone=no, email=no"/><!-- 忽略頁面中的數字識別為電話,忽略email識別 --><!-- 啟用360瀏覽器的極速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用相容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 針對手持功能最佳化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微軟的老式瀏覽器 --><meta name="MobileOptimized" content="320"><!-- uc強制豎屏 --><meta name="screen-orientation" content="portrait"><!-- QQ強制豎屏 --><meta name="x5-orientation" content="portrait"><!-- UC強制全屏 --><meta name="full-screen" content="yes"><!-- QQ強制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC應用模式 --><meta name="browsermode" content="application"><!-- QQ應用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 點擊無高光 --><meta name="msapplication-tap-highlight" content="no"><!-- iOS 表徵圖 begin --><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/><!-- iPhone 和 iTouch,預設 57x57 像素,必須有 --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/><!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/><!-- Retina iPad,144x144 像素,可以沒有,但推薦有 --><!-- iOS 表徵圖 end --> <!-- iOS 啟動畫面 begin --><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/><!-- iPad 豎屏 768 x 1004(標準解析度) --><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/><!-- iPad 豎屏 1536x2008(Retina) --><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/><!-- iPad 橫屏 1024x748(標準解析度) --><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/><!-- iPad 橫屏 2048x1496(Retina) --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/><!-- iPhone/iPod Touch 豎屏 320x480 (標準解析度) --><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/><!-- iPhone/iPod Touch 豎屏 640x960 (Retina) --><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/><!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) --><!-- iOS 啟動畫面 end --> <!-- iOS 裝置 end --><meta name="msapplication-TileColor" content="#000"/><!-- Windows 8 磁貼顏色 --><meta name="msapplication-TileImage" content="icon.png"/><!-- Windows 8 磁貼表徵圖 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/><!-- 添加 RSS 訂閱 --><link rel="shortcut icon" type="image/ico" href="/favicon.ico"/><!-- 添加 favicon icon --> <title>標題</title></head>    padding、margin等 上 左右 下 3個值的時候

上 右 下 左 4個值的時候

上下 左右 2個值的時候

4個方向 1個值的時候

 

HTML+css零碎小知識

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.