web建站-CSS基礎(chǔ)
時(shí)間：2023-07-10 23:30:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-10 23:30:01 來源：網(wǎng)站運(yùn)營
web建站-CSS基礎(chǔ)：文章參考鏈接
| 屬性 | 作用 |
| <b> </b> | 內(nèi)容加粗 |
| <i> </i> | 斜體文本 |
| <u> </u> | 文本加下劃線 |
html屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p> <font face="隸書" size="5px" color="red">歡迎來到css</font> <br/> 借助<b><i>CSS</i></b>,<u>你的網(wǎng)站更精彩</u> </p> </body> </html>傳統(tǒng)HTML格式修飾的缺點(diǎn)
- 書寫繁瑣，結(jié)構(gòu)臃腫，這行效率較低
- 無法做到“一改全改”
- 過多的關(guān)注內(nèi)容的顯示和表現(xiàn)形式
引入CSS
- 引入CSS后，在html中只需給相關(guān)內(nèi)容指定選擇器，不必書寫大量格式代碼，代碼更簡潔，執(zhí)行效率更高；
- 修改時(shí)，只需在CSS文件中改動(dòng)少量代碼，即可實(shí)現(xiàn)對(duì)所有此文件的網(wǎng)頁的更改，即批量更改
- CSS的引用，使網(wǎng)頁中內(nèi)容與形式的“緊耦合”變成“松耦合”，html只需觀念朱web的內(nèi)容，對(duì)于內(nèi)容的表現(xiàn)及呈現(xiàn)形式，交給CSS
CSS(Cascading Style Sheets) ,層疊樣式表，用于控制頁面樣式并允許允許樣式信息與內(nèi)容分離的一種標(biāo)記性語言
頁面構(gòu)成
- 外觀，布局-CSS
- 內(nèi)容-HTML
- 內(nèi)容與表示分離是非常重要的web原則
- HTML不包含樣式，整個(gè)頁面通過CSS文件來改變
CSS優(yōu)勢
- 內(nèi)容與變現(xiàn)相分離
- 提高頁面瀏覽數(shù)讀
- 易于維護(hù)與改版
CSS基本語法
簡單的單選題器的語法模板：
selector{ property : value; property : value; ... property : value;}<!--舉例-->h1{ font-family:"宋體"; color:red;}多選擇器的語法模板
selector1,selector2{ property : value; property : value; ... property : value;}<!--舉例-->h1,h2{ color:green;}CSS引入方式
行內(nèi)引入（盡量避免）
<h1 style="color: blue;"> This heading will be blue now. </h1>內(nèi)嵌式引用（盡量避免）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> h1 { color: red; } </style></head><body> <h1> This heading will be blue now. </h1></body></html>鏈接式引用
<!--html代碼--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h1> This heading will be blue now. </h1></body></html>/*style.css css代碼 ，此代碼為css的注釋*/h1{ color: green;}三種情況注意：
如果同時(shí)使用，運(yùn)行效果依據(jù)：
行內(nèi)>內(nèi)嵌>鏈接
CSS屬性
| CSS屬性 | 描述 | 值 |
| color | (文本）前景色 | 顏色（顏色名稱，RGB，或HEX） |
| background-color | 元素的背景色 | 顏色（顏色名稱，RGB，或HEX） |
CSS屬性CSS屬性–Font
| 屬性 | 描述 | 值 |
| font-family | 所用字體 | 字體名稱，如“宋體”，“黑體” |
| font-size | 字體大小 | 單元值，百分比，命名值 |
| font-style | 是否傾斜 | normal , italic(斜體） , oblique（傾斜） |
| font-weight | 是否加粗 | normal,bold,bolder,lighter,inherit,100-900 |
| font-variant | 設(shè)定小型大寫字母 | normal，small-caps,inherit |
| font | 設(shè)置所有字體屬性 | style，weight，size，family |
/*css文件*/h2{ font-family: 華文宋體;}p{ font-family: Courier; font-size: 14pt;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h2> This heading will be blue now. </h2> <p> this a 字體測試 </p></body></html>CSS屬性-text
| 屬性 | 描述 | 值 |
| text-align | 行內(nèi)容對(duì)齊 | left，center，right，justify |
| text-decoration | 增加下劃線 | underline,overline,line-thrughblink,none |
| text-indent | 首行縮進(jìn) | px,pt,%,em |
| text-overflow | 如何處理太長文本 | clip,ellipsis,ellipsis-word |
| text-shadow | 設(shè)置文本陰影 | 例：px,px,px,#ff0000 |
| text-shadow | 設(shè)置文本陰影 | 例:px,px,px,#ff0000 |
| text-transfom | 修改文本大小寫 | capitalize ,uppercase,lowercase |
| line-height | 設(shè)置行高 | px,pt,%,em |
| letter-spacing | 設(shè)置字符間距 | px,pt,%,em |
| word-spacing | 設(shè)置字間距 | px,pt,%,em |
| 屬性 | 描述 | 值 |
| text-align | 行內(nèi)容對(duì)齊 | left，center，right，justify |
| text-decoration | 增加下劃線 | underline,overline,line-thrughblink,none |
| text-indent | 首行縮進(jìn) | px,pt,%,em |
| text-overflow | 如何處理太長文本 | clip,ellipsis,ellipsis-word |
| text-shadow | 設(shè)置文本陰影 | 例：px,px,px,#ff0000 |
| text-shadow | 設(shè)置文本陰影 | 例:px,px,px,#ff0000 |
| text-transfom | 修改文本大小寫 | capitalize ,uppercase,lowercase |
| line-height | 設(shè)置行高 | px,pt,%,em |
| letter-spacing | 設(shè)置字符間距 | px,pt,%,em |
| word-spacing | 設(shè)置字間距 | px,pt,%,em |
css屬性–textCSS屬性-background
| 屬性 | 描述 | 值 |
| background-color | 背景顏色 | 顏色（名稱，RGB，HEX） |
| background-image | 背景圖片 | url(“圖片URL”) |
| background-repead | 是否及如何重復(fù)背景圖片 | repeat,repeat-x,repeat-y,no-repeat |
| background-attachment | 背景圖片是否固定或者頁面其余部分滾動(dòng) | fixed,scroll |
| background | 簡寫屬性，在一個(gè)聲明中設(shè)置所有背景屬性 | #ff0000url(/i/eg_bg_03.gif) no-repeat fixed center |
| 屬性 | 描述 | 值 |
| background-color | 背景顏色 | 顏色（名稱，RGB，HEX） |
| background-image | 背景圖片 | url(“圖片URL”) |
| background-repead | 是否及如何重復(fù)背景圖片 | repeat,repeat-x,repeat-y,no-repeat |
| background-attachment | 背景圖片是否固定或者頁面其余部分滾動(dòng) | fixed,scroll |
| background | 簡寫屬性，在一個(gè)聲明中設(shè)置所有背景屬性 | #ff0000url(/i/eg_bg_03.gif) no-repeat fixed center |
/*css文件*/h2{ font-family: 華文宋體;}p{ font-family: Courier; font-size: 14pt;}body{ background-image: url("網(wǎng)站修改.png"); background-repeat: repeat-x; background-position: center;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h2> This heading will be blue now. </h2> <p> this a 字體測試 </p></body></html>/*css文件*/ol{ list-style-type: armenian;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h2> This heading will be blue now. </h2> <p> this a 字體測試 </p> <ol> <li>HTML</li> <li>css</li> <li>php</li> </ol></body></html>注意
樣式繼承與沖突
多種樣式應(yīng)用到一個(gè)元素，這樣樣式將被繼承
更緊的匹配將覆蓋一般意義的繼承
樣式?jīng)_突：兩種樣式發(fā)生相同時(shí)屬性沖突時(shí)，后面的樣式優(yōu)先
ID和ID選擇器
- 一頁上允許給任何元素一個(gè)唯一的ID
- 每個(gè)ID必須唯一，每個(gè)頁面僅能用一次
對(duì)ID格式進(jìn)行格式化CSS，使用#ID
/*css文件*/ol{ list-style-type: armenian;}#mission{ font-style: italic;}<p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers <q>esplode</q> with splendor!</p>鏈接到頁面中的某部分—-錨點(diǎn)
- 一個(gè)鏈接可能包含包括ID，前面要加一個(gè)#號(hào)
- 瀏覽器將載入相關(guān)頁面，并且滾動(dòng)到包含該ID的元素
<p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers <q>esplode</q> with splendor!</p> <p> Visit<a href="https://www.foryouos.com">foryouos.com</a> to get textPad editor. </p> <a href="#mission">View our Mission statement</a>類與類選擇器—-類
- 類可為一組元素設(shè)置相同的樣式
- 不像ID，類可以被多次使用
<p class="shout">Spatula City! Spatula City!</p> <p class="special">See our spectacular spatula specials!</p> <p class="special">Today only:satisfaction guaranteed.</p>類選擇器
.special{ font-weight: bold;}p.shout{ color: red; font-family: Courier;}/*css文件*/| 屬性 | 描述 |
| :active | 向被激活的元素增加樣式 |
| :hover | 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素增加樣式 |
| :link | 向未被訪問的鏈接增加樣式 |
| :visited | 向已被訪問的鏈接增加樣式 |
| :focus | 向擁有鍵盤輸入焦點(diǎn)的元素增加樣式 |
偽類選擇器
/*css*/a:link{color: #FF0000}a:visited{color: #00FF00}a:hover{color: #FF00FF}a:active{color: #0000FF}<!--html--> <p><b><a href="style.css" target="_blank">這是一個(gè)鏈接。</a></b></p> <p><b>注釋：</b>在CSS定義中，a:hover必須位于a:link和a:visited之后，這樣才能生效</p> <p><b>注釋：</b>在CSS定義中，a:active必須位于a:hover之后，這樣才能生效</p><div> </div> 分割區(qū) 對(duì)一個(gè)頁面實(shí)現(xiàn)不同的功能顯示
span 僅在一定范圍內(nèi)使用樣式的行內(nèi)元素
頁面劃分(div)
- 改標(biāo)簽用來指出頁面的邏輯區(qū)域
- 缺省情況下，它是不顯示的，但是可以在其中應(yīng)用樣式
<!--HTMl--><div class="shout"> <h2>Spatula City!</h2> <p class="special">See our spectacular</p> <p>we'll beat any advertised price!</p> </div>/*css文件*/.special{ background-color: yellow; font-weight: bold;}.shout{ color: red; font-family: Courier;}span的使用
僅在一定范圍內(nèi)使用樣式的行內(nèi)元素
<h2>Spatula City!</h2> <p>See our <span class="special"> spectacular</span></p> <p>we'll beat <span class="shout">any advertised price!</span> </p>后代選擇器
<!--HTML--><ul class="newslist"> <li>html</li> <li>CSS</li> <li>Javascrip</li></ul>/*css文件*/.newslist { background-color: yellow; font-weight: bold;}/*css文件*/.newslist li { background-color: yellow; font-weight: bold;}子元素選擇器
<ul class="newslist"> <li>html</li> <li>CSS</li> <li>Javascrip</li> <ul> <li>apple</li> <li>android</li> </ul> </ul>/*css文件*/li { background-color: cyan; font-weight: normal;}.newslist { background-color: yellow; font-weight: bold;}擴(kuò)展閱讀
CSS樣式優(yōu)先級(jí)
選擇器優(yōu)先級(jí)
頁面布局及盒模型
塊元素布局
行內(nèi)元素布局
整頁布局
盒模型
CSS盒模型主要思想是每個(gè)元素的布局由四部分組成
- 元素的內(nèi)容顯示區(qū)(content area);
- 圍繞著元素的邊界（border）；
- 內(nèi)容和邊界的距離（padding）;
- 邊界和其它內(nèi)容外邊界的距離（margin）
border
<h2>CSS基礎(chǔ)知識(shí)</h2>/*css文件*/h2 { border: 5px solid red; border-left: thick dotted #cc0088; border-bottom-color: rgb(0,128,128); border-bottom-style: double;}border—-table collapse
<table> <tr><th>學(xué)號(hào)</th><th>成績</th></tr> <tr><td>2130505052</td><td>89</td></tr> <tr><td>2130822535</td><td>58</td></tr> </table>/*css文件*/table,td,th { border:2px solid black;} <table> <tr><th>學(xué)號(hào)</th><th>成績</th></tr> <tr><td>2130505052</td><td>89</td></tr> <tr><td>2130822535</td><td>58</td></tr> </table>/*css文件*/table,td,th { border:2px solid black; border-collapse: collapse;}box-shadow
<h1>Web編程基礎(chǔ)</h1> <p>學(xué)習(xí)HTML，CSS</p> <p>PHP,哈哈</p>/*css文件*/p { border: 1px dotted black; box-shadow: 10px 10px 5px gray;}h1 { box-shadow: 20px 20px 10px gray inset;}padding
| 屬性 | 含義 |
| padding | 4邊的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1邊的padding |
| 屬性 | 含義 |
| padding | 4邊的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1邊的padding |
| 屬性 | 含義 |
| padding | 4邊的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1邊的padding |
| 屬性 | 含義 |
| padding | 4邊的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1邊的padding |
padding
h1 { padding:1em 2em 3em 4em ;}注意: 從top開始，沿順時(shí)針方向，即top,right,bottom,left
h1 { padding : 1em 4em ;}注意：從第一項(xiàng)指top和bottom，第二項(xiàng)指right，left
padding示例
<h1>Web編程基礎(chǔ)</h1> <h1>第一講</h1> <h2>第二講</h2> <h3>第三講</h3> <h4>第四講</h4>/*css文件*/h1 { padding: 1em; background-color: yellow; border: 2px solid black;}h2 { padding: 0em; background-color: #BBFFBB;}h3 { padding-left: 200px; padding-top: 30px; background-color: green;}margins
| 屬性 | 含義 |
| margin | 4邊的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1邊的margin |
| 屬性 | 含義 |
| margin | 4邊的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1邊的margin |
| 屬性 | 含義 |
| margin | 4邊的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1邊的margin |
| 屬性 | 含義 |
| margin | 4邊的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1邊的margin |
marginsh1 { margin:1em 2em 3em 4em ;}注意: 從top開始，沿順時(shí)針方向，即top,right,bottom,left
h1 { margin : 1em 4em ;}注意：從第一項(xiàng)指top和bottom，第二項(xiàng)指right，left
<h1>Web編程基礎(chǔ)</h1> <h1>第一講</h1> <h2>第二講</h2> <h3>第三講</h3> <h4>第四講</h4>/*css文件*/h1 { margin: 1em; background-color: yellow; border: 2px solid black;}h2 { margin: 0em; background-color: #BBFFBB;}h3 { margin-left: 200px; padding-top: 30px; background-color: green;}floating元素
| 屬性 | 含義 | 值 |
| width | 設(shè)置元素內(nèi)容顯示區(qū)的寬度 | 一種尺寸（px,pt,%,em） |
| float | 浮動(dòng)，即從正常內(nèi)容流中提升元素 | left,right,none(default) |
width和float注意：width屬性僅對(duì)塊元素和img元素有效
<div> <h1>學(xué)習(xí)web</h1> <p>第一個(gè)塊元素</p> <span>第一個(gè)行內(nèi)元素</span> </div>/*css文件*/h1,p,span { border:2px solid black; width: 50%;}p{ text-align: center;}span { background-color: red; color: white;} <div> <p><img src="https://i2.kknews.cc/SIG=k2clg6/ctp-vzntr/1534508967149q7o61qp7op.jpg" alt="koala" class="headericon" />樹袋熊</p> </div>/*css文件*/p{ width: 800px;border: 2px solid black;}img.headericon{ float: right; width: 202px; border: 1px dotted black;}浮動(dòng)元素經(jīng)常會(huì)設(shè)置一個(gè)width值
如果沒有指定width值，其他內(nèi)容將不能環(huán)繞著浮動(dòng)元素
| 屬性 | 含義 | 值 |
| clear | 規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素 | left,right,both,none(default) |
| overflow | 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情 | visible(default),hidden,scroll ,auto |
| css屬性 | 描述 | 值 |
| column-count | 規(guī)定元素應(yīng)該被分隔的列數(shù) | 一個(gè)整數(shù) |
| column-gap | 規(guī)定列之間的間隔 | 尺寸（px，pt，em，%） |
| column-rule | 設(shè)置列之間的豎線寬度，樣式和顏色規(guī)則 | 2px solid green |
| column-span | 規(guī)定元素應(yīng)橫跨多少列 | 1或者all |
| column-width | 規(guī)定列的寬度 | 尺寸（px，pt，em，%） |
多列屬性
| 屬性 | 含義 |
| width，height | 設(shè)置元素內(nèi)容顯示區(qū)的寬度和高度 |
| max-widthmax-heightmin-widthmin-height | 設(shè)置元素的最大，最小高度和寬度 |
| 屬性 | 含義 |
| width，height | 設(shè)置元素內(nèi)容顯示區(qū)的寬度和高度 |
| max-widthmax-heightmin-widthmin-height | 設(shè)置元素的最大，最小高度和寬度 |
| 屬性 | 含義 |
| width，height | 設(shè)置元素內(nèi)容顯示區(qū)的寬度和高度 |
| max-widthmax-heightmin-widthmin-height | 設(shè)置元素的最大，最小高度和寬度 |
| 屬性 | 含義 |
| width，height | 設(shè)置元素內(nèi)容顯示區(qū)的寬度和高度 |
| max-widthmax-heightmin-widthmin-height | 設(shè)置元素的最大，最小高度和寬度 |
width和height注意：以上 屬性僅對(duì)塊元素和img元素有效，如果出現(xiàn)在其它元素中國，將被忽略
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
| 屬性 | 描述 | 值 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式 | baseline(默認(rèn)),與安娜蘇放置在父元素的基線上，top,元素的頂部與行中最高元素的頂端對(duì)齊middle元素放置在父元素的中部sub垂直對(duì)齊文本的下標(biāo)super，垂直對(duì)齊文本的上標(biāo)text-top元素頂端與父元素字體的低昂段對(duì)齊text-bottom元素的訂單與父元素字體的低端對(duì)齊a size or % |
垂直對(duì)齊定位及元素可見性
| 屬性 | 含義 | 值 |
| position | 對(duì)頁面元素進(jìn)行定位 | static:默認(rèn)值，沒有定位relative:相對(duì)于其正常位置的偏移量absolute：絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位fixed:絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位 |
| top,bottom,left，right | 元素邊界的偏移量 | 尺寸（px，pt，em，%） |
| 屬性 | 含義 | 值 |
| position | 對(duì)頁面元素進(jìn)行定位 | static:默認(rèn)值，沒有定位relative:相對(duì)于其正常位置的偏移量absolute：絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位fixed:絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位 |
| top,bottom,left，right | 元素邊界的偏移量 | 尺寸（px，pt，em，%） |
| 屬性 | 含義 | 值 |
| position | 對(duì)頁面元素進(jìn)行定位 | static:默認(rèn)值，沒有定位relative:相對(duì)于其正常位置的偏移量absolute：絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位fixed:絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位 |
| top,bottom,left，right | 元素邊界的偏移量 | 尺寸（px，pt，em，%） |
| 屬性 | 含義 | 值 |
| position | 對(duì)頁面元素進(jìn)行定位 | static:默認(rèn)值，沒有定位relative:相對(duì)于其正常位置的偏移量absolute：絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位fixed:絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位 |
| top,bottom,left，right | 元素邊界的偏移量 | 尺寸（px，pt，em，%） |
定位
| 屬性 | 含義 | 值 |
| z-index | 設(shè)置元素的3維折疊順序 | auto:堆疊順序與父元素相等an interger:設(shè)置元素的堆疊順序 |
| 屬性 | 含義 | 值 |
| z-index | 設(shè)置元素的3維折疊順序 | auto:堆疊順序與父元素相等an interger:設(shè)置元素的堆疊順序 |
<h1>這是一個(gè)標(biāo)簽</h1> <img class="x" src="psc.png"/> <p>默認(rèn)的z-index是0.z-index -1擁有最低的優(yōu)先級(jí)1擁有最高的等級(jí)</p>/*css文件*/img.x { position: absolute;left: 0px; top: 0px;z-index: -1;}| 屬性 | 含義 | 值 |
| display | 設(shè)置元素應(yīng)該生成的框的類型 | block:元素將顯示為塊元素，元素前后帶有換行符 |
| visibility | 設(shè)置元素能否可見 | visible:默認(rèn)值，元素是可見的hidden：元素是不可見的 |
| opacity | 設(shè)置 元素的透明度 | 從0.0(完全透明)到1.0(完全不透明） |
| 屬性 | 含義 | 值 |
| display | 設(shè)置元素應(yīng)該生成的框的類型 | block:元素將顯示為塊元素，元素前后帶有換行符 |
| visibility | 設(shè)置元素能否可見 | visible:默認(rèn)值，元素是可見的hidden：元素是不可見的 |
| opacity | 設(shè)置 元素的透明度 | 從0.0(完全透明)到1.0(完全不透明） |
元素可見性
<h2>這是一個(gè)標(biāo)題</h2> <h2>這是另一個(gè)標(biāo)題</h2>/*css文件*/h2 { background-color: yellow; border: 1px solid black; display: inline;}將列表顯示為行內(nèi)元素
<ul id="menubar"> <li>新聞</li> <li>友情鏈接</li> <li>會(huì)員</li> <li>注冊(cè)</li> </ul>/*css文件*/li{ padding: 0.5em; border: 2px solid gray; display: inline;}visibility屬性
display和visibility的主要區(qū)別
-display：none ;元素不會(huì)占用頁面上的空間
-visibility:hidden;雖然它的內(nèi)容用戶看不到，但元素仍然占用頁面空間
在線咨詢
