CSS筆記回顧

CSS

css基礎(chǔ)知識(shí)

  • css基礎(chǔ)知識(shí)：
    • css樣式表的定義
    • css：（Cascading Style Sheets）層疊樣式表；
  • 分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
    • 外部樣式-link調(diào)用
    • 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
  • css內(nèi)的注釋：/*注釋內(nèi)容*/
  • css樣式表的語(yǔ)法

    • CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。

    • 盒子名或者標(biāo)簽名{屬性:值;}

    • CSS中幾種顏色的表示方法

      • 用顏色名表示
        • 有17個(gè)預(yù)先確定的顏色，它們是
          • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
            　　olive, orange, purple, red, silver, teal, white, and yellow

    • 用十六進(jìn)制的顏色值表示(紅、綠、藍(lán))

      • #FF0000或者#F00

    • 用rgb(r,g,b)函數(shù)表示

      • 如：rgb(255,255,0)

    • 用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度、亮度)

      • 如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表
        藍(lán)色

    • **用rgba(r,g,b,a)函數(shù)表示 **

      • 其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明

    • 用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示

      • 色調(diào)、飽和度、亮度、透明度

    • 例子

   <div style="position:absolute;top:0px">
        <div style="background-color:gray;">background-color:gray</div>
        <div style="background-color:#F00;">background-color:#F00</div>
        <div style="background-color:#ffff00;">background-color:#ffff00</div>
        <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
        <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
        <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
        <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
    </div>
  • 內(nèi)部樣式表
    • 當(dāng)單個(gè)頁(yè)面需要設(shè)置樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。
    • 使用 <style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表
<head>
 <style type="text/css" >
  p{color:red;}
 </style>
</head>

  • 從外部引入到樣式分為兩種：（注意寫(xiě)在head標(biāo)簽里面）

  • 當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，就需要用到外部樣式表，首先需要?jiǎng)?chuàng)建一個(gè)css文件，然后引用到我們的頁(yè)面中。

  • Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>

  • Html式： <style type="text/css">@import url("css.css");></style>

  • 內(nèi)聯(lián)樣式表（優(yōu)先級(jí)高）

    • 寫(xiě)在標(biāo)簽里面的樣式

    • 如：<p style="color:red;"></p>

  • 表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色

  • 區(qū)別：外鏈樣式與導(dǎo)入樣式

    • link標(biāo)簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

    • 加載的順序的區(qū)別，link加載的css時(shí)，是一種并行(沒(méi)有嘗試是否是這樣)加載CSS方式，而@impor則在整個(gè)頁(yè)面加載完成后才加載。

    • 兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對(duì)于不兼容CSS2.1的瀏覽器來(lái)說(shuō)，無(wú)效。

    • 在樣式控制上(比如動(dòng)態(tài)改變網(wǎng)頁(yè)的布局時(shí),使用javascript操作DOM)的區(qū)別，此時(shí)@import就無(wú)能為力了。

  • 樣式的優(yōu)先級(jí)補(bǔ)充

    • 相同權(quán)值情況下，CSS樣式的優(yōu)先級(jí)總結(jié)來(lái)說(shuō)，就是——就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）：
      • 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）

  • 權(quán)值不同時(shí)，瀏覽器是根據(jù)權(quán)值來(lái)判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式

  • 層疊優(yōu)先級(jí)是:

  • 瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式

  • 其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器

  • 派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級(jí)是:

  • 瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器< 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式...共12個(gè)優(yōu)先級(jí)

  • 另外，如果同一個(gè)元素在沒(méi)有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開(kāi)，其優(yōu)先級(jí)順序?yàn)椋?/p>

    • 一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！

  • 選擇器權(quán)重

    選擇器 權(quán)重值
    !important infinity（正無(wú)窮）
    行間樣式 1000
    id選擇器 100
    class、屬性、偽類選擇器 10
    標(biāo)簽選擇器、偽元素選擇器 1
    通配符選擇器 0

css選擇器(上)

  • css選擇器：

    • class類選擇器可以重復(fù)利用
    • id選擇器唯一

  • 標(biāo)簽選擇器

    • 什么是選擇器：css選擇器就是要改變樣式的對(duì)象

  • 選擇器{屬性:值;屬性:值;}

  • 標(biāo)簽選擇器：頁(yè)面中所有的標(biāo)簽都是一個(gè)選擇器 p{color:red;}

  • 通配符選擇器 *

    • 選擇全部的元素 以 * 開(kāi)頭，如: *{color:#0f0;}

  • ID選擇器

    • 選擇id命名的元素 以 # 開(kāi)頭 #p1{color:#0f0;}

  • 類選擇器

    • class選擇器，選擇clas命名的元素 以.開(kāi)頭 .first{color:#00f;}

  • css代碼寫(xiě)完后上線前要經(jīng)過(guò)壓縮處理

  • 本地和服務(wù)器分兩個(gè)css版本（備份）

  • 壓縮后注釋都清除，空間體積減少

  • 群組選擇器

    • 選擇多個(gè)元素,以逗號(hào)隔開(kāi) #main,.first,span,a,h1{color:red;}

  • 包含選擇器

    • 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開(kāi)p
      • span{color:red;}

  • 屬性選擇器

    • 選擇包含某一屬性的元素
    • a[title]{color:red;} 選擇包含title的a標(biāo)簽
    • a[title][href]{color:red;} 選擇包含title和href的a標(biāo)簽

  • > + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）

    • p > span{color:red;}

  • 相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素

    • p + span{color:red;}

css選擇器(下)

  • <a>偽類選擇器

    • a:link {color:#FF0000;} /* 超鏈接未訪問(wèn)時(shí)的狀態(tài) */ （只用于a標(biāo)簽）

    • a:visited {color:#00FF00;} /* 超鏈接訪問(wèn)過(guò)后的狀態(tài) */ （只用于a標(biāo)簽）

    • a:hover {color:#FF00FF;}/* 鼠標(biāo)懸停狀態(tài)

    • */（可和其他標(biāo)簽結(jié)合一起用）

    • a:active {color:#0000FF;} /* 激活狀態(tài)，鼠標(biāo)按下?tīng)顟B(tài) */

    • 注意

      • 偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha

  • 輸入偽類選擇器（針對(duì)表單）

    • input:focus{color:red;} /* 鍵盤(pán)輸入焦點(diǎn) */

  • 位置偽類選擇器（針對(duì)表單）

    • p:first-child{color:red;} /* 第一個(gè)p */
    • p:last-child{color:red;} /* 最后一個(gè)p */

  • 偽元素選擇器

    • :before 在元素之前添加內(nèi)容。
    • :after 在元素之后添加內(nèi)容。

  • css優(yōu)先規(guī)則

    • 內(nèi)聯(lián)樣式表-> ID 選擇器—> Class 類選擇器->標(biāo)簽選擇器

背景屬性

  • 背景屬性：

    • 背景的添加 ：

    • 背景顏色的添加:

      • background:red;
      • backgronnd-color:red;

    • 背景圖片的添加：

      • background:url(“images/1.jpg”);
      • backgronnd-image:url(“images/1.jpg”);

    • 背景的平鋪

    • 什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)

      • 不平鋪：background-repeat:no-repeat;
      • 水平方向平鋪：background-repeat:repeat-x;
      • 垂直方向平鋪：background-repeat:repeat-y;
      • 完全平鋪：默認(rèn)為完全平鋪

    • 背景圖片的定位

      • 背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過(guò)屬性background-position來(lái)實(shí)現(xiàn)
      • background-position的取值可為英文單詞或者數(shù)值和百分值。
      • background-positon的英文單詞取值
      • top left
      • top center
      • top right
      • center left
      • center center
      • center right
      • bottom left
      • bottom center
      • ottom right

    • background-positon的數(shù)值取值

      • background-position:x y;

    • positon的百分值取值

      • background-position:x% y%;

    • 背景圖片的大小

      • 背景圖片的大小可以通過(guò)屬性background-size來(lái)設(shè)置background-size的取值可為數(shù)值和百分值。

    • background-size的數(shù)值取值

      • background-size:x y;

    • background-size的數(shù)值取值

      • background-size:x% y%;

    • 背景圖片的滾動(dòng)

      • 背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置

      • background-attachment:fixed; 固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)

      • background-attachment:scroll; 滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)

文字文本屬性

  • css文字文本屬性：

    • 文字屬性

      • color:red; 文字顏色
      • font-size:12px; 文字大小
      • font-weight:“bold” 文字粗細(xì)(bold/normal)
      • font-family:“宋體” 文字字體
      • font-variant:small-caps小寫(xiě)字母以大寫(xiě)字母顯示

  • 文本屬性

    • text-align:center; 文本對(duì)齊(right/left/center)
    • line-height:10px; 行間距(可通過(guò)它實(shí)現(xiàn)文本的垂直居中)
    • text-indent:20px; 首行縮進(jìn)
    • text-decoration:none;
      • 文本線(none/underline/overline/line-through)
    • letter-spacing: 字間距

盒子模型

  • 盒子模型

    • 盒子模型就是一個(gè)有高度和寬度的矩形區(qū)域
    • 所有html標(biāo)簽都是盒子模型
    • div標(biāo)簽自定義盒子模型

  • 所有的標(biāo)簽都是盒子模型

    • class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。

  • 盒子模型的組成

    • 盒子模型組成部分：
      • 自身內(nèi)容：width、height 寬高
      • 內(nèi)邊距： padding
      • 盒子邊框： border 邊框線
      • 與其他盒子距離： margin外邊距
      • 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積

  • border 邊框

    • 常見(jiàn)寫(xiě)法 border:1px solid #f00;

  • 單獨(dú)屬性：

  • border-width:

  • border-style:

    • dotted 點(diǎn)狀虛線
    • dashed（虛線）
    • solid（實(shí)線）
    • double（雙實(shí)線）

  • border-color (顏色)

  • padding 內(nèi)邊距

    • 值：像素/厘米等長(zhǎng)度單位、百分比

      • padding:10px; 上下左右
      • padding:10px 10px; 上下 左右
      • padding:10px 10px 10px; 上 左右 下
      • padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個(gè)點(diǎn)-->順時(shí)針?lè)较颍?/li>

  • 單獨(dú)屬性：

    • padding-top:
    • padding-right:
    • padding-bottom:
    • padding-left:

  • 當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來(lái)的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小

  • margin 外邊距

    • 值：與padding相同

    • 單獨(dú)屬性：與padding相同

  • 外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并

補(bǔ)充盒子模型內(nèi)容

  • 標(biāo)準(zhǔn)盒子模型

  • 盒子模型是css中一個(gè)重要的概念，理解了盒子模型才能更好的排版。其實(shí)盒子模型有兩種，分別是 ie盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對(duì)盒子模型的解釋各不相同，先來(lái)看看我們熟知的標(biāo)準(zhǔn)盒子模型

[圖片上傳失敗...(image-808ba7-1584672476796)]

  • 從上圖可以看到標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content部分不包含其他部分

  • ** IE盒子模型**

[圖片上傳失敗...(image-ca609a-1584672476796)]

  • 從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content

  • 和標(biāo)準(zhǔn) w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding

  • IE盒子模型width = padding+border+內(nèi)容

  • 標(biāo)準(zhǔn)盒子模型 = 內(nèi)容的寬度（不包含border+padding）

  • 例：

  • 一個(gè)盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn) w3c 盒子模型解釋，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實(shí)際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實(shí)際大小為：寬 200px、高 50px

  • 那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁(yè)的頂部加上 doctype 聲明。

  • 假如不加doctype 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)，即 ie瀏覽器會(huì)采用 ie 盒子模型去解釋你的盒子，而 ff會(huì)采用標(biāo)準(zhǔn)w3c 盒子模型解釋你的盒子，所以網(wǎng)頁(yè)在不同的瀏覽器中就顯示的不一樣了。

  • 反之，假如加上了 doctype 聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) w3c盒子模型去解釋你的盒子，網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了。

  • 用 jquery 做的例子來(lái)證實(shí)一下
<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
document.write("您的頁(yè)面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
  • 上面的代碼沒(méi)有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c 盒子模型”。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
document.write("您的頁(yè)面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
  • 代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) w3c盒子模型”

塊元素、行元素與溢出

  • 基本概念

    • 塊級(jí)元素：默認(rèn)情況下獨(dú)占一行的元素，可控制寬高、上下邊距；
    • 行內(nèi)元素：默認(rèn)情況下一行可以擺放多個(gè)的元素，不可控制寬高和上下邊距

  • 行塊轉(zhuǎn)換

    • display:none; 不顯示
    • display:block; 變成塊級(jí)元素
    • display:inline; 變成行級(jí)元素
    • display:inline-block; 以塊級(jí)元素樣式展示，以行級(jí)元素樣式排列

  • 溢出

    • overflow:hidden; 溢出隱藏
    • overflow:scroll; 內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條
    • overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動(dòng)條

  • 文本不換行：white-space:nowrap;

  • 長(zhǎng)單詞換行：word-wrap:break-word;

  • 行內(nèi)元素和快級(jí)元素小結(jié)

  • 一、塊級(jí)元素：block element

    • 每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無(wú)法一般無(wú)法添加其他元素（float浮動(dòng)后除外）。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)，會(huì)在頁(yè)面自動(dòng)換行顯示。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；

    • 塊級(jí)元素一般作為容器出現(xiàn)，用來(lái)組織結(jié)構(gòu)，但并不全是如此。有些塊級(jí)元素，如只能包含塊級(jí)元素。

    • DIV 是最常用的塊級(jí)元素，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。

  • 二、行內(nèi)元素：inline element

    • 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語(yǔ)義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見(jiàn)內(nèi)聯(lián)元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個(gè)字母 之間橫向排列，到最右端自動(dòng)折行。

  • 三、block（塊）元素的特點(diǎn):

    • ①、總是在新行上開(kāi)始；
    • ②、高度，行高以及外邊距和內(nèi)邊距都可控制；
    • ③、寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
    • ④、它可以容納內(nèi)聯(lián)元素和其他塊元素

  • 四、inline元素的特點(diǎn)

    • ①、和其他元素都在一行上；
    • ②、高，行高及外邊距和內(nèi)邊距不可改變；
    • ③、寬度就是它的文字或圖片的寬度，不可改變
    • ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

  • 對(duì)行內(nèi)元素，需要注意如下:

    • 設(shè)置寬度width 無(wú)效。 設(shè)置高度height無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。 設(shè)置margin
    • 只有左右margin有效，上下無(wú)效。
    • 設(shè)置padding只有左右padding有效，上下則無(wú)效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒(méi)影響的。

  • 五、常見(jiàn)的塊狀元素

    • address – 地址
    • blockquote – 塊引用
    • center – 舉中對(duì)齊塊
    • dir – 目錄列表
    • div – 常用塊級(jí)容易，也是CSS layout的主要標(biāo)簽
    • dl – 定義列表
    • fieldset – form控制組
    • form – 交互表單
    • h1 – 大標(biāo)題
    • h2 – 副標(biāo)題
    • h3 – 3級(jí)標(biāo)題
    • h4 – 4級(jí)標(biāo)題
    • h5 – 5級(jí)標(biāo)題
    • h6 – 6級(jí)標(biāo)題
    • hr – 水平分隔線
    • isindex – input prompt
    • menu – 菜單列表
    • noframes – frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
    • noscript – 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
    • ol – 有序表單
    • p – 段落
    • pre – 格式化文本
    • table – 表格
    • ul – 無(wú)序列表

  • 六、常見(jiàn)的內(nèi)聯(lián)元素

    • a – 錨點(diǎn)
    • abbr – 縮寫(xiě)
    • acronym – 首字
    • b – 粗體(不推薦)
    • bdo – bidi override
    • big – 大字體
    • br – 換行
    • cite – 引用
    • code – 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
    • dfn – 定義字段
    • em – 強(qiáng)調(diào)
    • font – 字體設(shè)定(不推薦)
    • i – 斜體
    • img – 圖片
    • input – 輸入框
    • kbd – 定義鍵盤(pán)文本
    • label – 表格標(biāo)簽
    • q – 短引用
    • s – 中劃線(不推薦)
    • samp – 定義范例計(jì)算機(jī)代碼
    • select – 項(xiàng)目選擇
    • small – 小字體文本
    • span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
    • strike – 中劃線
    • strong – 粗體強(qiáng)調(diào)
    • sub – 下標(biāo)
    • sup – 上標(biāo)
    • textarea – 多行文本輸入框
    • tt – 電傳文本
    • u – 下劃線

  • 七，可變?cè)?/strong>

    • 可變?cè)貫楦鶕?jù)上下文語(yǔ)境決定該元素為塊元素或者內(nèi)聯(lián)元素。
    • applet - java applet
    • button - 按鈕
    • del- 刪除文本
    • iframe - inline frame
    • ins - 插入的文本
    • map - 圖片區(qū)塊(map)
    • object - object對(duì)象
    • script - 客戶端腳本

  • 八、行內(nèi)元素與塊級(jí)元素有什么不同

    • 區(qū)別一：

      • 塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度
      • 行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。

    • 區(qū)別二：

      • 塊級(jí)：塊級(jí)元素可以設(shè)置寬高
      • 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高

    • 區(qū)別三：

      • 塊級(jí)：塊級(jí)元素可以設(shè)置margin，padding
      • 行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right;

    • padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

    • 區(qū)別四：

    • 塊級(jí)：display:block;

    • 行內(nèi)：display:inline;

  • 替換元素有如下：（和img一樣的設(shè)置方法）

  • <img>、<input>、<textarea>、<select>

  • <object>都是替換元素，這些元素都沒(méi)有實(shí)際的內(nèi)容

  • 可以通過(guò)修改display屬性來(lái)切換塊級(jí)元素和行內(nèi)元素

定位

  • static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）

    • 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。

  • fixed固定定位（參照物--瀏覽器窗口）---做 彈窗廣告用到

    • 生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。 元素的位置通過(guò) "left", "top", "right"以及 "bottom"屬性進(jìn)行規(guī)定。

  • relative（相對(duì)定位 ）（參照物以他本身）

    • 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

  • absolute（絕對(duì)定位）(除了static都可以，找到參照物-->與它最近的已經(jīng)有定位的父元素進(jìn)行定位)

  • 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

  • 元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定

  • z-index

    • z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
    • 定位的基本思想: 它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。

  • 一切皆為框

    • 塊級(jí)元素: div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
    • 行內(nèi)元素: span,strong,a等元素 即：內(nèi)容顯示在行中稱 "行內(nèi)框";
    • 使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級(jí)元素，display:none; 沒(méi)有框

  • 相對(duì)定位：

    • 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。
    • 通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)
    • .adv_relative { position: relative; left: 30px; top: 20px; }

  • 絕對(duì)定位：

    • 元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位 的祖先元素，它的位置相對(duì)于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

HTML框架

  • frameset框架：

    • <frameset> ---- 用來(lái)定義一個(gè)框架；雙標(biāo)簽
      不能和 <body> 一起使用

  • rows、cols屬性

    • rows 定義行表示框架有多少行（取值 px/%/ * ）
    • cols 定義列表示框架有多少列（取值px/ %/ * ）

  • frame子框架

    • <frame> ---- 表示框架中的某一個(gè)部分；單標(biāo)簽，要跟結(jié)束標(biāo)志
      • src 顯示的網(wǎng)頁(yè)的路徑
      • name 框架名
      • frameborder 邊框線（取值 0 / 1）

  • <noframes>屬性

  • <noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標(biāo)簽

<frameset>
     <frame  src=“”  />
     <frame  src=“” />
     <frame  src=“” />
     <noframes>
      <body>內(nèi)容</body>
     </noframes>
</frameset>
  • <iframe>內(nèi)聯(lián)框架
    • iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
    • 允許和 body 一起使用
    • width 寬（取值 px / %）
    • height 高（取值 px / %）
    • name 框架名
    • frameborder 邊框線（取值 0 / 1）
    • src 顯示的網(wǎng)頁(yè)的路徑

css3樣式屬性（一些）

  • opacity透明屬性
  • opacity
    • 對(duì)于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
    • 對(duì)于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1
    • 對(duì)于早期火狐，使用-moz-opacity:值; 值為0-1
    • 所以寫(xiě)透明屬性時(shí)，一般寫(xiě)法是
 {  
    opacity:0.5;
   filter:alpha(opacity：50);/*0-100*/
   -moz-opacity:0.5;    /*取值0-1*/-->針對(duì)早起版本的火狐兼容問(wèn)題的解決
}

  • border-radius圓角邊框?qū)傩?/p>

    • 向 div 元素添加圓角邊框
      • border-radius:10px;

  • box-shadow陰影屬性

    • box-shadow屬性向框添加陰影效果,后面跟4個(gè)參數(shù)。

    • box-shadow:0px 0px 10px #000;

  • <embed>屬性

    • 是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽，可以通過(guò)<embed>插入音頻或視頻

    • <embed src=“media/music.mp3” />

    • 格式.mid .wav .mp3等

最后編輯于 ：
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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