前端學(xué)習(xí)筆記一-html+css

一、html

1.1 排版標(biāo)簽

  • 標(biāo)題：<h1></h1>~<h6></h6>
  • 段落：<p></p>
  • 換行：<br/>
  • 水平線：<hr/>
  • <div></div>
  • <span></span>

1.2 文本格式化標(biāo)簽

  • 加粗：<b></b> <strong></strong> (推薦使用strong，因?yàn)檎Z(yǔ)義化)
  • 斜體：<i></i> <em></em> (推薦使用em，原因同上)
  • 刪除線：<s></s> <del></del> (推薦使用del，原因同上)
  • 下劃線：<u></u> <ins></ins> (推薦使用ins，原因同上)

1.3 base標(biāo)簽

整體設(shè)置所有鏈接的打開(kāi)模式 <base target='_blank'>
是寫到<head></head>中的

1.4 預(yù)格式化文本標(biāo)簽

<pre>...</pre>：會(huì)直接按照我們書寫的格式顯示，保留空格和換行。用得很少。

1.5 特殊字符(記住常用的即可)

  • &nbsp; 空格
  • &lt; <
  • &gt; >
  • &amp; &

1.6 表格table

  • cellspacing：?jiǎn)卧衽c單元格之間的空間距離（默認(rèn)不是0）
  • cellpadding：每個(gè)單元格內(nèi)容與它的邊沿之前的距離
  • caption： <caption>表格標(biāo)題</caption>表格標(biāo)題放在table內(nèi)部
<table border="1" cellpadding="5" cellspacing="0" width="400" align="center">
       <caption><h3>小說(shuō)排行榜</h3></caption>
       <tr>
           <td>11</td>
           <td>22</td>
       </tr>
</table>
  • 單元格合并：
    • 合并順序：從上往下，從左至右
    • 跨行合并：rowspan="合并的單元格的格子"
    • 跨列合并：colspan="合并的列的個(gè)數(shù)"
    • 合并三步曲：
      1. 先確定是跨行還是跨列合并
      2. 找到目標(biāo)單元格（要被合并的第一個(gè)）并寫上相應(yīng)的合并方式屬性、合并單元格數(shù)量值
      3. 刪除多余的單元格
    • 表格結(jié)構(gòu)劃分
      1.<thead></thead>：用于定義表格得頭部，內(nèi)部必須有tr標(biāo)簽
      2.<tbody></tbody>：用于定義表格的主體，數(shù)據(jù)本體
      3.<tfoot></tfoot>： 腳注之類，用得很少

1.7 列表

自定義列表，雖然dt和dd是并列結(jié)構(gòu)，但dd是圍繞dt的，屬于它上面的dt類。一個(gè)dt可能對(duì)應(yīng)多個(gè)dd

<dl>
    <dt>名詞1</dt>
    <dd>名詞1解釋a</dd>
    <dt>名詞2</dt>
    <dd>名詞2解釋a</dd>
    <dd>名詞2解釋b</dd>
</dl>

1.8 表單

  • 按鈕：
    1.<input type="button" value="按鈕"/>：普通按鈕，必須有value值才有文字顯示，否則顯示空白按鈕
    2.<input type="submit"/>：提交按鈕，默認(rèn)文字是【提交】
    3.<input type="reset" value="修改默認(rèn)名稱"/>：重置按鈕，默認(rèn)文字是【重置】
    4.<input type="image" src="images/xx.jpg"/>：圖片按鈕，必須有src屬性
    5.<input type="file"/>：文件域，用途是上傳文件
  • label標(biāo)簽：
    1.作用：點(diǎn)擊label標(biāo)簽的時(shí)候，和它綁定的input獲得焦點(diǎn)。
    2.如何綁定：
    • 方法一：用<label>用戶名：<input type="text" value=""/></label>
    • 方法二： <label for="name">用戶名：</label><input type="text" value="" id="name"/>
  • form表單域：
    <form action="提交url地址" method="提交方式" name="表單名稱"></form> 
<form action="data.php" method="get" name="loginForm">
    <input type="text" name="user"/>
    <input type="password" name="psw"/>
    <input type="submit"/>//點(diǎn)擊后會(huì)執(zhí)行提交（把表單form中已輸入的數(shù)據(jù)以method的提交方式提交到action的地址），然后清空表單
    <input type="reset"/>   //點(diǎn)擊后會(huì)清空表單
</form>

二、css

2.1 內(nèi)部樣式表

規(guī)范寫法是放在</head>中的最后，<style type="text/css"></style>
在html5中，type="text/css"可以省略

2.2 外部樣式表（外鏈?zhǔn)剑?/h4>

標(biāo)準(zhǔn)格式： <link rel="stylesheet" type="text/css" href="style.css" />
也是放在<head>中，rel="stylesheet"是指它和當(dāng)前頁(yè)面的關(guān)系是用來(lái)定義該頁(yè)樣式的層疊樣式表，而在html5中，type="text/css"同樣可以省略

2.3 盡量不使用無(wú)具體語(yǔ)義的標(biāo)簽選擇器

如<div> <span>(一般只是容器，不像p有表示段落的意義，li表示列表的子項(xiàng))

2.4 長(zhǎng)度單位

- 相對(duì)長(zhǎng)度單位：

px：像素，最常用
em：其相對(duì)于當(dāng)前對(duì)象內(nèi)文本的font-size（如果當(dāng)前對(duì)象內(nèi)文本的font-size計(jì)量單位也是em，則當(dāng)前對(duì)象內(nèi)文本的font-size的參考對(duì)象為父元素文本font-size）
rem：參考對(duì)象為根元素<html>的font-size
- 絕對(duì)長(zhǎng)度單位：pt（點(diǎn)）

2.5 font-famliy設(shè)置中文字體時(shí)使用Unicode編碼更甚于英文名稱，兼容性更好

2.6 font-weight

值400等于normal，700等于bold

2.7 font綜和性寫法

font: font-style font-weight font-size/line-height font-family;
舉例：
font: normal 400 12px/26px "微軟雅黑"
必須有font-size（字號(hào)）和font-family（字體）屬性值，其他可以省略
font: 14px "微軟雅黑"

2.8 顏色十六進(jìn)制

#rrggbb：按順序前兩位、中間兩位、最后兩位分別表示紅綠藍(lán)，范圍是00～FF，最淺到最深，混合出來(lái)的顏色，因此#FF0000表示純紅色（紅色100%）
三個(gè)區(qū)域內(nèi)的兩個(gè)值兩兩相同的話就可以只簡(jiǎn)寫以為，如上面的紅色可以寫成#F00

2.9 顏色RGB代碼

color:rgb(red,green,blue)：取值范圍是255～0 相當(dāng)于100%～0% （最大值～最小值）
rgb(255,0,0)等于rgb(100%,0%,0%)等于#FF0000

2.10 行間距

行高測(cè)量

line1.png

line2.png

行高默認(rèn)是文字本身的高度，設(shè)置成文字加上上下邊距等于盒子高度的話就能使得文字垂直居中。

屬性值單位px和em用得比較多。一般比字號(hào)大7、8像素比較合適
比如字號(hào)16px，line-height: 24px

2.11 裝飾線text-decoration

屬性值有：

  • none：取消下劃線（最常用）
  • underline：下劃線（常用）
  • line-through：貫穿線，穿過(guò)文本
  • overline：上劃線

2.12 emmer語(yǔ)法小技巧

  • 生成標(biāo)簽：輸入標(biāo)簽名回車即可（一邊編輯器自帶該功能/插件并且會(huì)提示）
  • 具體類型加:，如input:s會(huì)自動(dòng)生成<input type="submit" value="">
  • 生成多個(gè)可以加上*數(shù)量，如：div*4 => 4個(gè)<div></div>
  • 父子級(jí)關(guān)系 ul>li
  • 兄弟關(guān)系 div+p
  • 可以連寫 dl>dt+dd=><dl> <dt></dt> <dd></dd> </dl>
    ul>li*2=><ul> <li></li> <li></li> </ul>
  • 生成帶類名或id名的div .demo => <div class="demo"></div>
    #demo => <div id="demo"></div>
    p.demo => <p class="demo"></p>
  • 如果生成的div類名是有順序的，可以用自增符號(hào)$
    demo$*3=><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div>
    非常利于提升效率和格式標(biāo)準(zhǔn)化，因此推薦使用

2.13 復(fù)合選擇器

  • 后代選擇器 父級(jí) 子級(jí) { } 只要發(fā)生了嵌套，內(nèi)層的標(biāo)簽就屬于外層的子級(jí)別，符合條件的子級(jí)都會(huì)起作用
  • 子元素選擇器（直接后代）父級(jí)>子級(jí) { } 下一級(jí)即直接后代元素才起作用
  • 交集選擇器 標(biāo)簽選擇器.類名選擇器 如p.demo { } 即符合是p標(biāo)簽又符合有類名.demo，即類名為demo的p標(biāo)簽元素會(huì)起作用
  • 并集選擇器 選擇器1,選擇器2,選擇器3... { } 集體聲明
  • 鏈接偽類選擇器 :就是偽類選擇器。
    a:link a:visited a:hover a:active 盡量按照這樣的順序
    但實(shí)際開(kāi)發(fā)中，很少寫全，一般都是寫默認(rèn)的和:hover a{ } a:hover{ }

2.14 標(biāo)簽顯示模式

  • 塊級(jí)元素（block-level）：獨(dú)占一行，可以控制寬高、內(nèi)邊距和外邊距，寬度默認(rèn)是100%。是一個(gè)容器及盒子，（容器級(jí)）里面可以放行內(nèi)元素和塊級(jí)元素。

注意：h、p、dt標(biāo)簽內(nèi)不能放塊級(jí)元素，它們都是文字類塊級(jí)標(biāo)簽*

  • 行內(nèi)元素（inline-level）：寬高直接設(shè)置是無(wú)效的；默認(rèn)寬度是它本身內(nèi)容的寬度；只能容納文本或者其他行內(nèi)元素
  • 行內(nèi)塊元素（inline-block）：<img/> <input/> <td>，可以設(shè)置它們的寬高和對(duì)齊屬性；和相鄰行內(nèi)元素（或行內(nèi)塊元素）在一行上，但它們之間會(huì)有縫隙；默認(rèn)寬度是它本身內(nèi)容的寬度；寬高、行高、內(nèi)邊距和外邊距都可以控制。
  • 父級(jí)設(shè)置text-align:center可以使行內(nèi)元素、塊級(jí)行內(nèi)元素以及文字水平居中

2.15 background

  • background-image:url(images/pic.jpg) 推薦背景圖片url內(nèi)不要加" "
    同時(shí)寫的情況，background-image優(yōu)先級(jí)高于background-color，即背景色疊在圖片層的下面，不平鋪的情況能看見(jiàn)背景色
  • background-positon: x坐標(biāo) y坐標(biāo);坐標(biāo)值可以是是方位名詞（top/right/bottom/left）或者精確單位(百分比或絕對(duì)單位如px)。如果兩個(gè)值都是方位名詞，則兩者順序不重要，但還是推薦先x后y的寫法，如'right center'。如果只指定了一個(gè)方位名詞，如background-positon: left;，那另一個(gè)就默認(rèn)center。
    如果兩個(gè)值是精確單位，那第一個(gè)就是距離盒子最左邊（x軸起始位置）的距離，第二個(gè)就是距離盒子最上面（y軸起始位置）的距離。如果只指定了第一個(gè)值，第二個(gè)就代表垂直居中。
    如果兩個(gè)值是精確單位和方位名詞混用，第一個(gè)一定是表示x（水平位置），第二個(gè)一定是y（縱向位置）。如10px center
  • 一般超大背景圖的做法：
body{
    height:3000px;
    overflow:auto;
    background-image:url(images/bg.jpg);
    background-repeat:no-repeat;
    background-positon:center top;
    background-attachment: fixed;
}
  • 背景附著：背景是固定的還是滾動(dòng)的
    background-attachment: scroll || fixed 默認(rèn)是滾動(dòng)的，設(shè)置成fixed適用于背景圖不隨容器對(duì)象內(nèi)容滾動(dòng)的場(chǎng)景，如上例
  • 背景簡(jiǎn)寫：background:color url repeat attachment position
    舉例：background:#ccc url(images/bg.jpg) no-repeat fixed center top;
    沒(méi)有強(qiáng)制的順序和必須寫的屬性值，很多都可以省略，但出于可讀性推薦以上順序。

2.16 CSS三大特性

  • 層疊性
    樣式?jīng)_突，就近原則。那個(gè)樣式離結(jié)構(gòu)更近，就執(zhí)行哪個(gè)樣式。

  • 繼承性
    子標(biāo)簽會(huì)繼承父標(biāo)簽的部分樣式：text- font- line-開(kāi)頭的，以及color屬性

  • 優(yōu)先級(jí)（權(quán)重）
    如果選擇器相同，執(zhí)行層疊性
    如果選擇器不同，就按權(quán)重來(lái)執(zhí)行

    1.權(quán)重計(jì)算公式（權(quán)重排行從小到大）
    | 標(biāo)簽選擇器 | 計(jì)算權(quán)重公式 |

    | 繼承或者 * | 0,0,0,0 |
    | 每個(gè)元素（標(biāo)簽選擇器） | 0,0,0,1 |
    | 每個(gè)類，偽類 | 0,0,1,0 |
    | 每個(gè)ID | 0,1,0,0 |
    | 每個(gè)行內(nèi)樣式 style="" | 1,0,0,0 |
    | 每個(gè)!important 重要的 | ∞ 無(wú)窮大 |

    2.權(quán)重疊加
    即把所有基礎(chǔ)選擇器的權(quán)重疊加起來(lái)，才得出最終的權(quán)重

    • div ul li ------> 0,0,0,3
    • .nav ul li ------> 0,0,1,2
    • a:hover -----—> 0,0,1,1
    • .nav a ------> 0,0,1,1
      注意：數(shù)位之間沒(méi)有進(jìn)制 比如說(shuō)： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況。
      如果權(quán)重相同，執(zhí)行就近原則

2.17 CSS盒子模型（Box Model）

  • 表格邊框
    border-collapse: collapse：合并相鄰邊框
    table,th,td{ border-collapse:collapse }
  • 內(nèi)邊距
    沒(méi)有指定寬度（width）的情況，盒子不會(huì)被加上的padding撐開(kāi)而變大，實(shí)際寬度仍然和父級(jí)一樣寬
  • 外邊距
    (1)相鄰?fù)膺吘嗨?/strong>：如果兩個(gè)相鄰的盒子上面的盒子有下外邊距，下面的盒子有上外邊距，它們兩個(gè)的垂直外間距是這兩個(gè)間距的較大那個(gè)值，而不是兩者之和。
    解決方案：盡量只給上面的盒子添加下外邊距或者下面的添加上外間距，不要都加。
    (2)嵌套外邊距塌陷：如果父級(jí)盒子沒(méi)有上內(nèi)邊距（padding-top）及邊框，給子元素設(shè)定了上外邊距的話，父級(jí)的上外邊距會(huì)和子級(jí)盒子的這個(gè)外邊距產(chǎn)生合并成兩者中的較大者(即合并成父級(jí)盒子的上外邊距，子級(jí)上外邊距為0)。
    解決方案：給父級(jí)盒子添加overflow: hidden;

但是如果子級(jí)盒子有設(shè)置浮動(dòng)的話，就不會(huì)產(chǎn)生嵌套外邊距塌陷

  • 盒子模型布局穩(wěn)定性
    優(yōu)先使用順序：width > padding > margin
  • 圓角邊框（css3）border-radius：半圓形邊框只要取盒子的一半

2.18 photoshop使用小技巧

  • crtl + R ： 打開(kāi)標(biāo)尺
  • crtl + + ： 放大圖片
  • 按住空格鍵 ，可以拖動(dòng)視圖
  • crtl + D ： 取消選區(qū)
  • 選中圖層---圖層菜單---新建基于圖層的切片

2.19 CSS書寫規(guī)范

/*選擇器后加一個(gè)空格*/
.selecter {
    width: 200px;/*屬性名后加一個(gè)空格*/
    height: 100px;/*屬性定義都另起一行，不要寫在一行*/
}
/*并集選擇器獨(dú)占一行*/
.selecter,
goods,
page {
}
/*選擇器的嵌套不要大于三級(jí)*/

2.20 浮動(dòng)float-浮漏特口訣

  • 為什么塊級(jí)元素排版需要浮動(dòng)而不是轉(zhuǎn)化成行內(nèi)塊級(jí)元素，因?yàn)閕nline-block的元素之間會(huì)有很難去掉和無(wú)法改變尺寸的間隔縫隙，而且只能左對(duì)齊。
  • 浮動(dòng)之浮-漂浮在普通流（標(biāo)準(zhǔn)流）的上面（脫標(biāo)）
    浮動(dòng)脫標(biāo)
  • 浮動(dòng)之漏-把自己原來(lái)的位置騰給下面標(biāo)準(zhǔn)流的盒子
  • 浮動(dòng)之特-改變display屬性，類似轉(zhuǎn)成了互相之間沒(méi)有縫隙的行內(nèi)塊（inline-block）

重要的導(dǎo)航欄都要采取li包含a的結(jié)構(gòu)，不然搜索引擎會(huì)覺(jué)得有堆砌關(guān)鍵字的問(wèn)題，從而影響網(wǎng)站排名

  • 子級(jí)設(shè)置了浮動(dòng)，如果父級(jí)盒子有內(nèi)邊距或邊框，那么子級(jí)不會(huì)與父級(jí)的邊框重疊，也不會(huì)壓過(guò)父級(jí)的內(nèi)邊距
    父子盒子關(guān)系示意圖.png

    -清除浮動(dòng)的方法：
    （1）額外標(biāo)簽法：在父級(jí)內(nèi)最后一個(gè)浮動(dòng)元素后面添加一個(gè)<div style="clear: both;"></div>。缺點(diǎn)是添加額外的標(biāo)簽，結(jié)構(gòu)化差。
    （2）父級(jí)添加overflow: hidden。缺點(diǎn)是有局限性，會(huì)把原本需要溢出顯示的元素隱藏掉。
    （3）使用:after偽元素，給浮動(dòng)元素的父級(jí)盒子加上我們預(yù)先定義好的clearfix類
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {/*ie6\7專屬*/
    *zoom: 1;
}

（4）使用雙偽元素：同樣給浮動(dòng)元素的父級(jí)盒子加上我們預(yù)先定義好的clearfix類

.clearfix:before,.clearfix:after { 
    content: "";
    display: table; 
}
.clearfix:after {
   clear: both;
}
.clearfix {
    *zoom: 1;
}

優(yōu)點(diǎn)：相較偽元素代碼更簡(jiǎn)潔

切圖插件：Cutterman

2.21 CSS書寫順序

建議遵循以下順序：
-布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個(gè)寫，畢竟關(guān)系到模式）
-自身屬性：width / height / margin / padding / border / background
-文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-其他屬性：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;
}

2.22 定位（position）

三種布局機(jī)制的上下順序：
標(biāo)準(zhǔn)流在最底層（海底）----浮動(dòng)盒子在中間層（海面）----定位盒子上最上層（天空）
定位 = 定位模式 + 邊偏移（方位名詞屬性）
邊偏移常用屬性值：

  • 相對(duì)定位relative：相對(duì)于它原來(lái)在標(biāo)準(zhǔn)流的位置來(lái)說(shuō)的（自戀型）
    效果圖：
    相對(duì)定位案例

    相對(duì)定位的特點(diǎn)：（務(wù)必記?。?br> （1）相對(duì)于自己原來(lái)在標(biāo)準(zhǔn)流中位置來(lái)移動(dòng)的
    （2）原來(lái)在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。
  • 絕對(duì)定位absolute：是元素以帶有定位的父級(jí)元素來(lái)移動(dòng)位置 （拼爹型）
    （1）完全脫標(biāo) —— 完全不占位置；
    （2）父元素沒(méi)有定位，則以瀏覽器為準(zhǔn)定位（Document 文檔）。
    絕對(duì)定位_父級(jí)無(wú)定位

    （3）父元素要有定位：將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素（祖先，即未必需要是直接父元素）進(jìn)行定位。
    絕對(duì)定位_父級(jí)有定位

    絕對(duì)定位的特點(diǎn)：（務(wù)必記住）
    （1）絕對(duì)是以帶有定位的父級(jí)元素來(lái)移動(dòng)位置 （拼爹型） 如果父級(jí)都沒(méi)有定位，則以瀏覽器文檔為準(zhǔn)移動(dòng)位置
    （2）不保留原來(lái)的位置，完全是脫標(biāo)的。
    絕對(duì)定位的盒子要和父級(jí)搭配一起來(lái)使用。
定位口訣 —— 子絕父相 —— 子級(jí)是絕對(duì)定位，父級(jí)要用相對(duì)定位。

結(jié)論：父級(jí)要占有位置，子級(jí)要任意擺放，這就是子絕父相的由來(lái)。

  • 固定定位fixed：固定定位是絕對(duì)定位的一種特殊形式： （認(rèn)死理型）
    （1） 完全脫標(biāo) —— 完全不占位置；
    （2）只認(rèn)瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來(lái)設(shè)置元素的位置；

    • 跟父元素沒(méi)有任何關(guān)系；單獨(dú)使用
    • 不隨滾動(dòng)條滾動(dòng)。

  • 堆疊順序（z-index）

加了定位的盒子，默認(rèn)后來(lái)者居上， 后面的盒子會(huì)壓住前面的盒子。
應(yīng)用 z-index 層疊等級(jí)屬性可以調(diào)整盒子的堆疊順序。

z-index 的特性如下：
（1） 屬性值：正整數(shù)、負(fù)整數(shù)或 0，默認(rèn)值是 0，數(shù)值越大，盒子越靠上；
（2）如果屬性值相同，則按照書寫順序，后來(lái)居上；

注意：z-index 只能應(yīng)用于相對(duì)定位、絕對(duì)定位和固定定位的元素，其他標(biāo)準(zhǔn)流、浮動(dòng)和靜態(tài)定位無(wú)效。

  • 定位改變display屬性

display 是 顯示模式， 可以改變顯示模式有以下方式:

  • 可以用inline-block 轉(zhuǎn)換為行內(nèi)塊
  • 可以用浮動(dòng) float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類似，并不完全一樣，因?yàn)楦?dòng)是脫標(biāo)的）
  • 絕對(duì)定位和固定定位也和浮動(dòng)類似， 默認(rèn)轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。

所以， 一個(gè)行內(nèi)的盒子，如果設(shè)置了浮動(dòng)/固定定位/絕對(duì)定位，那么不用轉(zhuǎn)換，就可以給這個(gè)盒子直接設(shè)置寬度和高度等。另外行內(nèi)塊元素的默認(rèn)寬度就是內(nèi)容寬度，沒(méi)有內(nèi)容就無(wú)法顯示。

浮動(dòng)元素、絕對(duì)定位(固定定位）元素的都不會(huì)觸發(fā)外邊距合并的問(wèn)題。 （我們以前是用padding border overflow解決的）

2.23 圓角矩形設(shè)置4個(gè)角

圓角矩形可以為4個(gè)角分別設(shè)置圓度， 但是是有順序的，border后面的屬性名記住先寫上下，再寫左右，然后從左上角開(kāi)始順時(shí)針按順序來(lái)寫，養(yǎng)成習(xí)慣

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

我們也可以按照簡(jiǎn)寫的形式，然后從左上角開(kāi)始順時(shí)針?lè)謩e寫每個(gè)角的數(shù)值，具體如下:

border-radius: 左上角 右上角 右下角 左下角;

實(shí)現(xiàn)貼合版心的固定定位的一個(gè)小技巧:

dingwei.png

2.24 隱藏和顯示元素使用display和visibility的區(qū)別

  • display
    屬性值：block | none
    隱藏狀態(tài)不保留位置，使用較多
  • visibility
    屬性值：visible | hidden
    隱藏狀態(tài)保留位置，使用較少

2.25 用戶界面樣式

  • 鼠標(biāo)樣式cursor
    move : 移動(dòng)（常應(yīng)用于放大鏡特效）
    text : 文本（表示可輸入）
    not-allowed : 禁止（表示不能再點(diǎn)擊）
  • 輪廓線outline
    元素外圍的一圈輪廓，一般表單元素獲得焦點(diǎn)時(shí)會(huì)顯示出來(lái)，起到突出元素的作用。但是實(shí)際開(kāi)發(fā)中由于體驗(yàn)并不好，我們一般會(huì)把這個(gè)樣式去掉。
    outline: 0或outline: none
    一般都會(huì)如下加在公共統(tǒng)一樣式中
input, textarea {
    outline: none;
}
  • 防止拖拽
    resize: none 防止用戶拖拽文本域（textarea）

2.25 vertical-align 垂直對(duì)齊

屬性值有: baseline(默認(rèn)) | middle | top | bottom
只針對(duì)行內(nèi)元素或行內(nèi)塊元素，在塊級(jí)元素如div內(nèi)設(shè)置無(wú)效。通常（特別是行內(nèi)塊元素）用來(lái)控制圖片/表單與文字的對(duì)齊。

默認(rèn)基線對(duì)齊

<div><!--默認(rèn)是基線對(duì)準(zhǔn)-->
    <img src="xxx.png" alt="" style="vertical-align: baseline"/>
    我是文字
</div>
<div><!--中線對(duì)準(zhǔn)最常用-->
    <input type="text" style="vertical-align: middle"/>
    我是文字
</div>

由于圖片默認(rèn)是基線對(duì)齊，放在盒子中會(huì)撐開(kāi)盒子底部（給基線之外的文字預(yù)留空間），因此用vertical-align可以解決這個(gè)bug（方案一，常用）?；蛘咦寛D片轉(zhuǎn)為塊級(jí)元素也可以解決 img {display: blockl}（方案二）

2.26 文字溢出省略號(hào)顯示（三步曲）

（1）先強(qiáng)制文本一行顯示white-space: nowrap;
（2）超出的部分隱藏overflow: hidden;
（3）用省略號(hào)代替超出的部分文字text-overflow: ellipsis;

2.27 CSS精靈技術(shù)（sprite）

為了有效減少服務(wù)器接收和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度
寫背景position樣式時(shí)建議用Fireworks工具，比PS方便

2.28 CSS滑動(dòng)門技術(shù)

特殊形狀的背景圖能夠自由拉伸滑動(dòng)，以適應(yīng)元素內(nèi)部不固定寬度的文本內(nèi)容
一般經(jīng)典布局

<li>
    <a href="#">/*a設(shè)置左側(cè)背景*/
        <span></span>/*span設(shè)置左側(cè)背景*/
    </a>
</li>

a {
    /*因?yàn)槲覀兪腔瑒?dòng)門，左右推拉跟文字內(nèi)容多少有關(guān)系，此時(shí)需要用文字撐開(kāi)盒子， 就要用到行內(nèi)塊*/
    display: inline-block;
    height: 33px;
    background: url(images/to.png) no-repeat;
    margin: 10px 20px;
    padding-left: 15px;
    color: #fff;
}
a span {
     display: inline-block;
     height: 33px;
     /*一定注意 span 需要背景圖片 右對(duì)齊*/
     background: url(images/to.png) no-repeat right;
     padding-right: 15px;
}

2.29 margin 負(fù)值

消除相鄰盒子的邊框疊加

div li{//淘寶做法，浮動(dòng)的盒子緊貼在一起，前面的盒子往左移1px，后面的盒子也會(huì)移貼近它然后再左移1px
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    border: 1px solid #ccc
}
div li:hover {
    position: relative;//定位的盒子層級(jí)默認(rèn)是在標(biāo)準(zhǔn)流和浮動(dòng)層上面的，所以因?yàn)閙argin是負(fù)值，li的邊框原本是會(huì)被后面一個(gè)li的邊框擋?。ㄓ疫叺哪菞l），但給鼠標(biāo)移上那個(gè)層加上定位后它就變成最上顯示了
    border: 1px solid #F00;
    //如果li本身就有定位屬性，那么給鼠標(biāo)經(jīng)過(guò)的CSS加上z-index就可以了
    /*z-index: 1;*/
}

2.30 CSS 三角形

如果一個(gè)盒子寬高都是0，那給單邊邊框顏色就可以模擬三角形效果

p {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    boder-color: #F40 transparent transparent transparent;
    /*以下樣式照顧低版本瀏覽器*/
    font-size: 0;
    line-height: 0;
}
最后編輯于 ：
?著作權(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)容

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