HTML標(biāo)簽PGW

/* 標(biāo)題樣式 # , ## , ### */

HTML~


換行

1.table表格元素

border外邊框粗細(xì)；
cellspacing每個(gè)表格之間的間距；
cellpadding單元邊沿與其內(nèi)容之間的空白。

2.表單元素：input：?jiǎn)涡形谋究?/h2>

name=""

屬性規(guī)定 input 元素的名稱

value=""

是input 文本框內(nèi)的值。是占位符，刷新后，可以顯示真實(shí)內(nèi)容在文本框內(nèi)

placeholder=""

內(nèi)容不占位。是非占位符，刷新后，只會(huì)顯示灰色字體，輸入內(nèi)容的時(shí)候，會(huì)自動(dòng)覆蓋，是文本框的提示語(yǔ)句
readonly 這個(gè)屬性沒有值，它寫在input后面，用于顯示只讀文本，即文本框中的內(nèi)容不可以修改填寫

type="" 屬性規(guī)定 input 元素的類型

text    定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。
button  定義可點(diǎn)擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動(dòng)腳本）。
submit  定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。常和PHP使用，用于提交數(shù)據(jù)。
image   定義圖像形式的提交按鈕。
reset   定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。
checkbox    定義復(fù)選框。生成這樣的框子 □ ，單擊打鉤，再單擊，鉤號(hào)消失。
            （常見于記住密碼模塊）傳輸?shù)臄?shù)據(jù)是Boolean類型的數(shù)據(jù)
radio   定義單選按鈕。生成這樣的圓圈 ○ 。單擊選中，變成這樣 ⊙，再單擊，點(diǎn)號(hào)不會(huì)消失。
        如果定義的所有name都相同的話，就可以變成多選一。
        如果在某一個(gè)選項(xiàng)元素后面加上checked="checked"，就會(huì)變成默認(rèn)選項(xiàng)，即刷新后，自動(dòng)顯示選中的。
range   定義滑塊。默認(rèn)從0~100，step是1，value是50（默認(rèn)就是這些量不寫的情況）
        min=""滑塊最小值 max=""滑塊的最大值 step=""滑塊的單次滑動(dòng)步數(shù) value=""設(shè)置滑塊初始位置
number  定義數(shù)字文本框。（只能輸入數(shù)字）
        min=""設(shè)置數(shù)字大小的下限 max=""設(shè)置數(shù)字大小的上限 value=""設(shè)置初始默認(rèn)的數(shù)字
date    （或datetime-local）獲取時(shí)間。在谷歌瀏覽器顯示的效果相對(duì)較好。
hidden  定義隱藏的輸入字段。即影藏該文本字段
password    定義密碼字段。該字段中的字符被掩碼。但是在PHP或其他后臺(tái)中是以明文的形式進(jìn)行傳輸?shù)?image   生成圖像按鈕
src 地址。就是插入東西原來所在的地址
file    定義上傳文件按鈕。按鈕后面會(huì)顯示是否上傳圖片以及上傳圖片的名稱

3.<button> 按鈕 </button>

這個(gè)按鈕通常會(huì)和 JS 一起使用，button后面常會(huì)接onclick事件

4.<textarea:多行文本框

<textarea rows="20" cols="50">  文本框，文本區(qū)域。rows，cols是來控制長(zhǎng)寬大小的

5.<select> 下拉列表。

<!--下拉顯示選擇的內(nèi)容，內(nèi)容只能選擇，不能重寫，區(qū)別于datalist-->
<select>
    <option>蘋果</option> <!--<option>是設(shè)置量-->
    <option>香蕉</option>
    <option>橘子</option>
</select>

6.<datalist>下拉列表，內(nèi)容可以重寫。

<!--datalist常要配合input的text類型使用，并且input的list屬性值要和datalist的id值一致-->
<input type="text" list="a">
<datalist id="a">
    <option>蘋果</option> <!--<option>是設(shè)置量-->
    <option>香蕉</option>
    <option>橘子</option>
</datalist>

7.列表元素：(列表樣式可以參考下面的CSS的第5項(xiàng))

<ol> </ol> 有序列表，內(nèi)容項(xiàng)前面會(huì)顯示序號(hào)，默認(rèn)是 compact 升序的，是阿拉伯?dāng)?shù)字1 2 3...

<ol reversed>  </ol>    降序列表
<ol type="a">  </ol>    設(shè)置序號(hào)樣式，可以是阿拉伯?dāng)?shù)字、英文字母、羅馬數(shù)字等等

<ul> </ul> 無序列表，無序標(biāo)簽前面會(huì)顯示小圓點(diǎn)

<li> </li> 列表中的項(xiàng)

8.插入圖片：

<img src="" width="" height="" alt="提示信息">
  • img是插入圖片的
  • width是設(shè)置圖片寬度的
  • height是設(shè)置圖片長(zhǎng)度的
  • alt是提示性語(yǔ)句，定義圖片備用內(nèi)容。
    當(dāng)圖片正常插入的時(shí)候，alt內(nèi)的值是不會(huì)顯示的；
    當(dāng)插入的圖片有問題的時(shí)候，或者地址出現(xiàn)錯(cuò)誤的時(shí)候，會(huì)顯示alt內(nèi)部的提示性語(yǔ)句

9.超鏈接 a標(biāo)簽 href

<a href="xxxxx.html"></a>

點(diǎn)擊鏈接后，在本頁(yè)面刷新顯示

<a href="xxxxx.html" target="_blank"></a>

點(diǎn)擊鏈接后，新建一個(gè)空白頁(yè)刷新顯示
target="_blank"新建一個(gè)空白頁(yè)刷新顯示

10.創(chuàng)建圖片分區(qū)響應(yīng)：

就是一張圖片點(diǎn)擊不同的區(qū)域，會(huì)有不同的響應(yīng)，會(huì)有不同的鏈接

<img src="圖片地址" usemap="#a">
<map name="a">
    <area href="xxxx.html" shape="rect" coord="0,0,0,0">
        <area><!--這邊的 href 不需要a標(biāo)簽-->
        <area>
        <area>
</map>

map 客戶端分區(qū)響應(yīng)圖的關(guān)鍵元素（地圖）

area 可以有多個(gè)area，每個(gè)area代表圖像上可以被點(diǎn)擊的一塊區(qū)域（地圖上的區(qū)域）

area元素屬性分兩類

  1. 點(diǎn)擊后，導(dǎo)航到指定的url
    href 就是鏈接地址
    alt 定義圖片提示性語(yǔ)句，和上面第8點(diǎn)插入圖片里的alt功能一致
  2. shape屬性和coords屬性，共同作用，標(biāo)明用戶可以點(diǎn)擊各個(gè)圖像區(qū)域
    coords 表示所選區(qū)域的邊緣區(qū)域，每個(gè)整數(shù)值之間用逗號(hào)隔開
    shape 就是解析畫出的area是什么圖形
  • rect表示矩形 ，coords 的四個(gè)值表示圖像的左上右下的坐標(biāo)
  • circle 表示圓形，coords 的三個(gè)值表示圖像左邊緣到圓心的距離、圖像右邊緣到圓心的距離、圓的半徑
  • poly 表示多邊形，coords 至少有六個(gè)值，每個(gè)數(shù)字代表多邊形的一個(gè)頂點(diǎn)
  • dafault 表示默認(rèn)區(qū)域，即整張圖，不要coords

不知道這些coords的值的時(shí)候，可以用在form的input屬性中看

<form>
      <input type="image" src="圖片地址">
</form>

這樣在單擊圖片區(qū)域的時(shí)候，就可以在地址欄中看到所點(diǎn)區(qū)域的坐標(biāo)值了，以后也可以用JS解決

11.視頻播放：

<video>

(<audio>為音頻播放器，和視頻播放器類似)

src 視頻地址
width 視頻寬度
height 視頻長(zhǎng)度
autoplay 網(wǎng)頁(yè)完成后自動(dòng)播放視頻
preload 預(yù)先加載視頻
    none 不會(huì)自動(dòng)加載
    metadata只加載第一幀
    auto 視頻自動(dòng)全部加載
controls 顯示播放、暫停、進(jìn)度條、音量等播放器控件，其后面沒有值
loop 視頻循環(huán)播放
poster 視頻載入時(shí)顯示圖片，就是設(shè)置視頻載入的第一幀顯示的圖片
muted 視頻靜音

<source>

設(shè)置視頻格式（任何一種視頻格式不是所有瀏覽器都支持的，所以在代碼中寫入多種格式的視頻文件，防止文件放不了）

src 視頻地址（同一視頻，添加不同的格式）
type 該視頻的視頻格式

<body>
    <video src="演講視頻.mp4" controls preload="metadata">
        <source src="演講視頻.mp4" type="video/mp4">
        <source src="演講視頻.ogv" type="video/ogg">
        <source src="演講視頻.mkv" type="video/webm">
        <source src="演講視頻.wmv" type="video/wmv">
    </video>
</body>

valign的對(duì)齊：有：top（頂對(duì)齊） Middle（垂直居中） bottom（底對(duì)齊）
position: fixed; 固定，固定在屏幕的某個(gè)地方，不會(huì)隨著滾輪的滾動(dòng)而變化
top: 0; / bottom: 0; 置頂 / 置底

CSS~

<p> 段落 </p> 中間寫每段落的文字
<h1> 標(biāo)題 </h1> 中間寫標(biāo)題
float: ; 水平放置元素

CSS的創(chuàng)建方法：

① 元素內(nèi)嵌樣式表

eg：

<body>
    <a style="font-size: 40px; color: #ffad2a ">Hello World!</a>
</body>

② 文檔內(nèi)嵌樣式表

eg：

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        a
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a> Hello World! </a>
</body>

③ 外部樣式表

在外部文件中，建立一個(gè)單獨(dú)的 .CSS 文件
創(chuàng)建方法：CSS樣式表（右擊）——New——Stylesheet
eg：
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

hello.html文件
<head>
    <meat charset="UTF-8">
    <title> </title>
    <link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
    <a> Hello World! </a>
</body>

-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

a.css文件
a
{
    font-size: 40px;
    color: #ffad2a;
}

-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

CSS基本選擇器：

① 選擇所有元素

<style type="text/css">
    *   /*  *標(biāo)簽是指body中的所有內(nèi)容都將是這種樣式*/
    {
        font-size: 40px;
        color: #ffad2a;
    }
</style>

② 根據(jù)類型選擇元素

<style type="text/css">
    a   /*a 是一個(gè)標(biāo)簽，a標(biāo)簽下的內(nèi)容都將是這種樣式*/
    {
        font-size: 40px;
        color: #ffad2a;
    }
</style>

③ 根據(jù)類選擇元素

class選擇器，style中用 . 號(hào)訪問選擇器
可以多個(gè)標(biāo)簽共同擁有同一個(gè)class名字

④ 根據(jù)ID選擇元素

id選擇器，style中用 # 號(hào)訪問選擇器
一個(gè)id只能屬于一個(gè)標(biāo)簽

⑤ 根據(jù)屬性選擇元素

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        [href]          /*屬性選擇元素*/
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a href="TestDemo.html"> Hello World! </a>
</body>

⑥ 其他選擇器

既用了屬性名，又用了屬性值的選擇器

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        [href="TestDemo.html"]  /*當(dāng)出現(xiàn)多個(gè)同屬性名的內(nèi)容時(shí)*/
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a href="TestDemo.html"> Hello World! </a>
</body>

⑦ :選擇器

如hover屬性，鼠標(biāo)觸發(fā)時(shí)，產(chǎn)生效果的選擇器，其實(shí) :選擇器有很多的，用到再記
eg：

<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        a:hover
        {
            font-size: 40px;
            color: #ffad2a;
        }
    </style>
</head>
<body>
    <a href="TestDemo.html"> Hello World! </a>
</body>
hover選擇器使用CSS過渡：
①直接過渡（鼠標(biāo)放上去，瞬間顯示效果，效果顯示生硬）
<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        p:hover
        {
            width:200px;
            height:200px;
            background-color:#ffad2a;
        }
    </style>
</head>
<body>
<p>    </p>
</body>

②間接過渡（鼠標(biāo)放上去，產(chǎn)生的過渡效果有延時(shí)，畫面更為人性化）
<head>
    <meat charset="UTF-8">
    <title> </title>
    <style type="text/css">
        p:hover
        {
            width:200px;
            height:200px;
            background-color:#ffad2a;
            transition-delay:1s;  /*鼠標(biāo)放上去，過1s后，才會(huì)變化*/
            transition-duration:500ms;  /*鼠標(biāo)懸浮，產(chǎn)生動(dòng)態(tài)效果延時(shí)500ms，效果平滑過渡，更舒適*/
            transition-property:width;    /*寬度瞬間響應(yīng)過渡，其他屬性平滑過渡。其值內(nèi)容為上面的屬性，效果是值的屬性沒有延時(shí)*/
        }
    </style>
</head>
<body>
<p>    </p>
</body>

1.字體（font）：

font-size: 字體大小 px/16=em

設(shè)置 <body>元素的默認(rèn)字體大小的是百分比

font-family: 字體系列（宋體、微軟雅黑）

font-style: 字體樣式

值：normal正常字體；italic斜體字；  oblique斜體字（但斜體效果并沒有italic強(qiáng)）

font-variant: small-caps; 英文小型大寫設(shè)置

（將所有字母都設(shè)置為大寫，但這些大寫字符比一般大寫字符的尺寸小一些）；如果設(shè)置為normal，就是正常字體

font-weight: 設(shè)置字體粗細(xì)

值可以設(shè)置整百，如100、200等，也可以設(shè)置為bold、bolder

2.文本（text）：

color: 字體顏色

text-align: 水平對(duì)齊方式（左、中、右）

值：left靠左  center居中 right靠右

vertical-align: 垂直對(duì)齊方式（上、中、下）

值：top上  center居中  bottom底部

text-decoration: 屬性用來設(shè)置或刪除文本的裝飾

值：none刪除所有裝飾（如下劃線）；overline添加上劃線；line-through添加中劃線；underline添加下劃線

text-transform: 指定在一個(gè)文本中的大寫和小寫字母

值：默認(rèn)一句話首字母大寫；uppercase全部大寫；lowercase全部小寫；capitalize每個(gè)單詞首字母大寫

text-indent: 指定文本的第一行的縮進(jìn)

letter-spacing:10px; 每個(gè)字符間距是10px，漢字也是如此，但英文狀態(tài)下是每個(gè)字母的間距

word-spacing:10px; 英文狀態(tài)下的，每個(gè)單詞的間距為10px，但中文狀態(tài)下沒有這種說法

line-height 設(shè)置行高

text-index:50px; 首行縮進(jìn)

text-shadow:1px 2px 3px red; 創(chuàng)建文本陰影。

水平偏移1px，豎直偏移2px，模糊程度3px，陰影顏色是紅色。（順序不能變）

3.背景（background）：

background-color: 背景顏色

background-image: 背景圖像，默認(rèn)情況下圖片 水平或者垂直方向平鋪

background-image:url(picture.jpeg);

background-repeat: 背景圖片排版

值：no-repeat不重復(fù)顯示；  repeat-x在水平方向展開；  repeat-y在豎直方向展開；

background-position: 改變圖像在背景中的位置

值：right top顯示在右上角

background-attachment 設(shè)置背景是否隨著滾輪移動(dòng)；

fixed為不隨滾輪移動(dòng)而移動(dòng)

background-size 設(shè)置背景圖片大小

4.CSS中的鏈接（link）：

有超鏈接<a href=" ">時(shí)

a:link {color:#000000;} /* 未點(diǎn)擊訪問鏈的接*/

a:visited {color:#00FF00;} /* 已點(diǎn)擊訪問的鏈接 */

a:hover {color:#FF00FF;} /* 鼠標(biāo)移動(dòng)到鏈接上 */

a:hover 必須跟在 a:link 和 a:visited后面，a:hover{} 為偽類，改鼠標(biāo)懸停效果對(duì)誰(shuí)做偽類就對(duì)誰(shuí)產(chǎn)生懸停效果

a:active {color:#0000FF;} /* 鼠標(biāo)點(diǎn)擊鏈接的時(shí)候 */

a:active 必須跟在 a:hover后面
值：color、background、text-decoration等，設(shè)置四種狀態(tài)下的效果

5.列表樣式（ul）：

ul. 無序列表 - 列表項(xiàng)標(biāo)記用特殊圖形（如小黑點(diǎn)、小方框等）

ol. 有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母

list-style：用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中
    list-style:none;  去標(biāo)記
list-style-position：設(shè)置列表中列表項(xiàng)標(biāo)志的位置
    inside  列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。
    outside  默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。
list-style-image:  要指定列表項(xiàng)標(biāo)記的圖像，使用列表樣式圖像屬性
list-style-type:  屬性指定列表項(xiàng)標(biāo)記的類型
    ul下，不寫是實(shí)心小圓點(diǎn)
        circle  空心小圓點(diǎn)
        square  實(shí)心小方塊
    ol下，不寫是阿拉伯?dāng)?shù)字
        upper-roman  羅馬數(shù)字
        lower-alpha  字母

6.表格（table）：由一個(gè)或多個(gè) tr、th 或 td 元素組成。

tr 元素定義表格行；在每行tr中，th或td都是該行的元素

th 元素定義表頭，首行加粗；

td 元素定義每行的表格單元。

*合并單元格

 //主要在HTML body內(nèi)部寫
 <td colspan="2">  colspan合并橫單元格。合并兩個(gè)單元格，向右合并，右邊可以少寫一個(gè)td元素
 <td rowspan="2"> rowspan合并列單元格。向下合并2個(gè)單元格，下邊的單元格可以不寫，少寫一個(gè)td元素

caption 標(biāo)題

border 表格中的邊框正常都是獨(dú)立的，兩個(gè)子邊框中間都是有間距的

border: 1px solid black; 邊框一個(gè)像素寬，黑色實(shí)線

border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開

text-align: 表格的值水平對(duì)齊方式（左、中、右）

值：left靠左  center居中  right靠右

vertical-align: 表格的值垂直對(duì)齊方式（上、中、下）

值：top上  center居中   bottom底部

padding: 距內(nèi)邊框的距離

7.盒子模型box：

Margin：外邊距（清除邊框外的區(qū)域，外邊距是透明的。）

Border：邊框（圍繞在內(nèi)邊距和內(nèi)容外的邊框。）

Padding：內(nèi)邊距（清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。）

Content：內(nèi)容（盒子的內(nèi)容，顯示文本和圖像。）

8.邊框（border）：

border-style: 邊框樣式

值：
none;    無邊框
dotted; 點(diǎn)線邊框  定義一個(gè)點(diǎn)線邊框
dashed; 虛線邊框  定義一個(gè)虛線邊框
solid;     實(shí)線邊框  定義實(shí)線邊框
double; 雙邊框      定義兩個(gè)邊框，兩個(gè)邊框的寬度和 border-width 的值相同
groove; 凹槽邊框  定義3D溝槽邊框，效果取決于邊框的顏色值
ridge;    壟狀邊框  定義3D脊邊框，效果取決于邊框的顏色值
inset;     嵌入邊框  定義一個(gè)3D的嵌入邊框，效果取決于邊框的顏色值
outset;   外凸邊框  定義一個(gè)3D突出邊框，效果取決于邊框的顏色值
hidden;  隱藏邊框
border-style屬性可以有 1 到 4 個(gè)值，寬度width、顏色color也一樣：

border-style: ___ 四面邊框同種樣式
border-style: ___ ___ 上下一樣，左右一樣
border-style: ___ ___ ___ 上一種、左右一種、下一種
border-style: ___ ___ ___ ___ 上、右、下、左 逆時(shí)針的順序定樣式

可以指定不同的側(cè)面不同的邊框，寬度width、顏色color也一樣：

border-top-style: 邊框上部的樣式
border-bottom-style: 邊框下部的樣式
border-left-style: 邊框左邊的樣式
border-right-style: 邊框右邊的樣式

border-width：屬性為邊框指定寬度

注：可指定長(zhǎng)度或使用 3 個(gè)關(guān)鍵字之一，它們分別是 thick 、medium（默認(rèn)值） 和 thin

border-color: 設(shè)置邊框的顏色

注：border-color單獨(dú)使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式

  border-style: solid;
  border-color: #98bf21;

border-radius 設(shè)置圓角邊框

eg：
border-radius:20px/15px

同時(shí)設(shè)置四個(gè)圓角，即在四個(gè)直角處放置一個(gè)圓弧，圓心離左右邊框20px，離上下邊框15px

9.輪廓屬性（outline）：

outline-color：規(guī)定邊框的顏色：

值：color-name、hex-number、rgb-number、invert、inherit

outline-style：規(guī)定邊框的樣式：

  • one 默認(rèn)。定義無輪廓。
  • dotted 定義點(diǎn)狀的輪廓。
  • dashed 定義虛線輪廓。
  • solid 定義實(shí)線輪廓。
  • double 定義雙線輪廓。雙線的寬度等同于 outline-width 的值。
  • groove 定義 3D 凹槽輪廓。此效果取決于 outline-color 值。
  • ridge 定義 3D 凸槽輪廓。此效果取決于 outline-color 值。
  • inset 定義 3D 凹邊輪廓。此效果取決于 outline-color 值。
  • outset 定義 3D 凸邊輪廓。此效果取決于 outline-color 值。
  • inherit 規(guī)定應(yīng)該從父元素繼承輪廓樣式的設(shè)置。

outline-width：規(guī)定邊框的寬度：

值：thin、medium、thick、length、inherit

10.外邊距（margin）、內(nèi)邊距（padding）：

值：

    auto  設(shè)置瀏覽器邊距，這樣做的結(jié)果會(huì)依賴于瀏覽器
    length  定義一個(gè)固定的margin（使用像素，pt，em等）
    %  定義一個(gè)使用百分比的邊距
  • margin-top: 距離頂部的距離
  • margin-bottom: 距離底部的距離
  • margin-right: 距離右邊的距離
  • margin-left: 距離左邊的距離

margin屬性可以有 1 到 4 個(gè)值：

  • margin: ___ 四面邊距
  • margin: ___ ___ 上下一樣，左右一樣
  • margin: ___ ___ ___ 上一種、左右一種、下一種
  • margin: ___ ___ ___ ___ 上、右、下、左 逆時(shí)針的順序定邊距

11.尺寸（dimension）：

height 設(shè)置元素的高度。

line-height 設(shè)置行高。

max-height 設(shè)置元素的最大高度。

max-width 設(shè)置元素的最大寬度。

min-height 設(shè)置元素的最小高度。

min-width 設(shè)置元素的最小寬度。

width 設(shè)置元素的寬度。

12.顯示（display）、可見性（visibility）：

display: none; 影藏元素，元素就不顯示，不占用原來的頁(yè)面空間，進(jìn)而不影響頁(yè)面布局

visibility:hidden; 影藏元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會(huì)影響布局。

display:     inline;元素之間沒有換行，圖片之間就是前后排列而不是上下排列
             none 此元素不會(huì)被顯示。
             block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。就是影藏后的元素可以顯示。
             inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
             inline-block 行內(nèi)塊元素。（CSS2.1 新增的值）

list-item 此元素會(huì)作為列表顯示。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,189評(píng)論 0贊 1
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評(píng)論 1贊 41
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,162評(píng)論 1贊 92
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定（選定）要進(jìn)行樣式設(shè)定的標(biāo)簽（元素）”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,729評(píng)論 0贊 6
  • CSS 指層疊樣式表（Cascading Style Sheets），是一種用來為結(jié)構(gòu)化文檔（如 HTML 文檔或...
    神齊閱讀 2,232評(píng)論 0贊 14

友情鏈接更多精彩內(nèi)容