pink-css标签
選擇器：基礎(chǔ)選擇器和復(fù)合選擇器。基礎(chǔ)選擇器由單個(gè)選擇器組成。
基礎(chǔ)選擇器：標(biāo)簽選擇器，類選擇器，id選擇器，通配符選擇器。
1.標(biāo)簽選擇器
div????????{
? ? ? ? background-color:? ? ? ? red;
? ? ? ? text-indent:? ? ? ? 2em;
}
多個(gè)選擇器}后也沒有標(biāo)點(diǎn)符號(hào)。
2.類選擇器
.類名? ? ? ? {
}
<div class="類名"></div>
多類名：一個(gè)標(biāo)簽有多個(gè)類名。<div class="red box"></div>空格隔開
3.id選擇器(JS)
#id名? ? ? ? {
}
<div id="id名"></div>
不能用標(biāo)簽名做id名,.star-sing可。不要純數(shù)字或中文。
4.通配符選擇器
*? ? ? ? {
}
不需要調(diào)用
5.CSS字體屬性
? ? ? ? 字體系列：font-family:? ? ? ? ‘微軟雅黑’,"宋體"；√
? ? ? ? ? ? ? ? 各個(gè)字體間英文逗號(hào)隔開，'',""都可，單個(gè)英文單詞不用“”隔開即可。
????????字體大小：font-size:? ? ? ? 20px;√
? ? ? ? ? ? ? ? px不能省，用body類選擇器只能定義h之外的字體大小，h特殊一般需要單獨(dú)定義
????????字體粗細(xì)：font-weight:? ? ? ? bold light 400 700；(看手冊(cè))
? ? ? ? 字體斜體：font-style：? ? ? ? nomal italic;
? ? ? ? 復(fù)合屬性：font:? ? ? ? italic 700 20px/16px?"宋體"；(從下往上的順序，/后是行高)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 順序不能錯(cuò)，空格隔開。可部分不設(shè)置，但必須有size family的
6.CSS文本屬性
? ? ? ? 文本屬性有：文本顏色，文本對(duì)齊，文本裝飾，文本縮進(jìn)，行間距。
? ? ? ? 文本顏色：color:????????pink?#00ff00 rgb(0,255,0);逗號(hào)隔開
? ? ? ? 文本水平對(duì)齊：text-align:? ? ? ? ? center left right; (本質(zhì)是讓h1盒子里面的文字居中對(duì)齊)。
? ? ? ? 文本裝飾(加線)：text-decoration：? ? ? ? none underline overline line-through;
? ? ? ? 文本首行縮進(jìn)：text-indent：? ? ? ? 10px 2em;(一般對(duì)段落標(biāo)簽p使用)
? ? ? ? ? ? ? em按當(dāng)前文字一個(gè)字大小，若當(dāng)前元素沒有設(shè)置大小按父元素的一個(gè)字大小(CSS繼承)。
? ? ? ? 行間距(行高)：line-height:? ? ? ? 26px;(上間距+文本高度+下間距=26px)，文字默認(rèn)16px。
*Chrome調(diào)試工具->檢查
ctrl滾輪調(diào)大小。
CSS可改數(shù)值顏色。
點(diǎn)元素右側(cè)無樣式：類名或樣式引入錯(cuò)誤；有樣式但前有黃色感嘆號(hào)：樣式屬性書寫錯(cuò)誤。
7.CSS引入方式
? ? ? ? 內(nèi)部樣式表，行內(nèi)樣式表，外部樣式表。
? ? ? ? 內(nèi)部樣式表：上面。上面屬性用：鍵值對(duì)形式。
? ? ? ? 行內(nèi)樣式表：<div style="color:????????pink;font-size:? ? ? ? 12px;">粉色</div>這里style是屬性。
? ? ? ? 外部樣式表：CSS代碼放到.css文件 只有樣式div{XX：XX;} 沒有style。
? ? ? ? ? ? ? ? ? ? ? ? <link rel="stylesheet" href="css文件路徑">連接
*新標(biāo)簽<button>XX</button>
和<input type="button" value="XX">不同在于input應(yīng)在form內(nèi)要傳到服務(wù)器這個(gè)不用
實(shí)際這里可用placeholder屬性
8.emmet語法
? ? ? ? 生成HTML標(biāo)簽:
? ? ? ? ? ? ? ? 生成標(biāo)簽：標(biāo)簽名*3
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ul>li? ? ? ? div+p
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .class名????????#id名
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $*5
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? div{XX}
? ? ? ? 生成CSS樣式：單詞首字母
CSS復(fù)合選擇器：
9.后代選擇器
? ? ? ? 元素1 元素2 (元素3)..{}? ? ? ? ?/如/.nav? ? ? ? .bg1{}中間無空格會(huì)顯示不出效果
? ? ? ? 1.? ?2必須是1后代，最終選的是元素2，
? ? ? ? 2.? ?元素2可為兒子，孫子3只要是后代就可被選出。(所以2可不寫，提倡寫)
? ? ? ? 3.? ?元素可以是任意選擇器
? ? ? ? 選定某父元素的子元素。
10.子選擇器
? ? ? ? 元素1>元素2{}
? ? ? ? 1.? ?選元素1所有直接后代且元素2
? ? ? ? 2.? ?最終選的是元素2
11.并集選擇器
? ? ? ? 元素1，元素2{}
? ? ? ? //樣式要求相同的可以為了方便管理放到一類
12.偽類選擇器
? ? ? ? ：hover{}//鼠標(biāo)經(jīng)過，只變hover內(nèi)與之前設(shè)置不同部分，hover未變動(dòng)的按之前樣式
? ? ? ? ：firstchild{}
? ? ? ? 添加特殊效果。
? ? ? ? 分類：鏈接偽類，結(jié)構(gòu)偽類，(表單偽類)。。
? ? ? ? (1)鏈接偽類選擇器(比類選擇器多個(gè).)
? ? ? ? ? ? ? ? a:link{}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //選擇所有未被訪問過的鏈接
? ? ? ? ? ? ? ? a:visited{}? ? ? ? ? ? ? ? ? ? ? ? ? ?//選擇所有已被訪問過的鏈接
? ? ? ? ? ? ? ? a:hover{}? ? ? ? ? ? ? ? ? ? ? ? ? ? //選擇鼠標(biāo)指在其上的鏈接
? ? ? ? ? ? ? ? a:active{}? ? ? ? ? ? ? ? ? ? ? ? ? ?//選擇鼠標(biāo)按下未彈起的鏈接，即活動(dòng)鏈接
? ? ? ? ? ? ? ? 1.? ?LVHA順序(上->下)
? ? ? ? ? ? ? ? 2.? ?鏈接a用body不能指定樣式，需要單獨(dú)指定a。
? ? ? ? (2)focus偽類選擇器
? ? ? ? ? ? ? ? input：focus{}
? ? ? ? ? ? ? ? 獲取焦點(diǎn)表單元素。
13.元素顯示模式
? ? ? ? (1)定義：標(biāo)簽以什么方式顯示，為了更好的網(wǎng)頁布局。
? ? ? ? (2)分類：
????????????????????????塊元素：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如：h1~h6,p,div,ul,ol,li...
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點(diǎn)：1.獨(dú)占一行；
????????????????????????????????????????2.高寬，內(nèi)外邊距可設(shè)置；
????????????????????????????????????????3.寬度默認(rèn)是父級(jí)100%；
????????????????????????????????????????4.內(nèi)可放行內(nèi)或塊級(jí)元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文字類(如p，h1~h6)內(nèi)部不能放塊級(jí)元素。
? ? ? ? ? ? ? ? ? ? ? ? 行內(nèi)元素：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如a,strong,b,em,i,del,s,ins,u,span...
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點(diǎn)：1.一行可顯示多個(gè)；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.寬高直接設(shè)置無效；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.默認(rèn)寬度是本身內(nèi)容寬度；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.內(nèi)可放文本或其他行內(nèi)元素，不可放塊級(jí)元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 鏈接里不能放鏈接。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a內(nèi)特殊，可以放塊級(jí)元素，但最好a轉(zhuǎn)換成塊級(jí)模式更安全。
? ? ? ? ? ? ? ? ? ? ? ? 行內(nèi)塊元素：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如：img,input,td(單元格)...
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點(diǎn)：1.一行可以顯示多個(gè)(行級(jí)元素特點(diǎn))，中間有空白縫隙
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.默認(rèn)寬度是本身內(nèi)容寬度(行級(jí)元素特點(diǎn))
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.高度，行高，內(nèi)外邊距可控制(塊級(jí)元素特點(diǎn))
1.只有塊級(jí)元素默認(rèn)寬度是父級(jí)100%，其他都是本身內(nèi)容寬度。h p?ul ol li
2.只有行級(jí)元素不能直接設(shè)置寬高，垂直內(nèi)外間距，不能直接放塊級(jí)進(jìn)去，需轉(zhuǎn)換。a
????????(3)轉(zhuǎn)換：
? ? ? ? ? ? ? ? 當(dāng)一個(gè)模式的元素需要另一個(gè)元素的特點(diǎn)時(shí)。
? ? ? ? ? ? ? ? 如：增加鏈接a的觸發(fā)范圍。display:block;(inline;/inline-block)
snipaste:(Fn+)F1截圖(量大小加文字)，F3置頂移動(dòng)，alt取色，shift切顏色模式，c復(fù)制，esc去掉
https://zh.snipaste.com
//代碼分析元素應(yīng)是什么元素，原本是行塊級(jí)，現(xiàn)在表現(xiàn)為行塊級(jí)(看是否獨(dú)占一行、設(shè)置了寬高)，怎么轉(zhuǎn)換和設(shè)置；
//鼠標(biāo)經(jīng)過等設(shè)置
小技巧：單行文字垂直居中：讓文字行高等于盒子高度。
14.CSS背景
? ? ? ? 1.? ?背景顏色(學(xué)查手冊(cè))
? ? ? ? ? ? ? ? background-color：XX；
? ? ? ? ? ? ? ? 默認(rèn)transport透明
? ? ? ? 2.? ?背景圖片
? ? ? ? ? ? ? ? background-image：none、url(圖片地址)；? ? ? ? //默認(rèn)平鋪滿重復(fù)圖
? ? ? ? ? ? ? ? 如：logo，裝飾性小圖片，超大圖片。。
? ? ? ? ? ? ? ? 相比插入圖片非常容易控制位置，圖片非透明區(qū)壓住背景顏色。
? ? ? ? 3.? ?背景平鋪
? ? ? ? ? ? ? ? background-repeat:repeat/no-repeat/repeat-x/repeat-y
? ? ? ? ? ? ? ? 默認(rèn)平鋪至設(shè)置的高寬。
? ? ? ? 4.? ?背景圖片位置(精靈圖時(shí)大量使用)
? ? ? ? ? ? ? ? background-position:x y;
? ? ? ? ? ? ? ? X/Y可為：
???????????????????????方位名詞：top/center/bottom/left/center/right(若XY都指定方位名詞，前后順序不影響效果)。只寫一個(gè)詞時(shí)，另一個(gè)默認(rèn)居中。小圖div{}，背景圖body{top,center}，要寫寬高。
? ? ? ? ? ? ? ? ? ? ? ?精確單位：第一個(gè)是X第二個(gè)是Y，前后順序影響效果。只寫一個(gè)值時(shí)，默認(rèn)寫的是X值，垂直默認(rèn)居中。20px
? ? ? ? ? ? ? ? ? ? ? ?混合單位：第一個(gè)是X第二個(gè)是Y。
摳圖：檢查找圖片鏈接，新標(biāo)簽頁打開，圖片另存為? ? ? ? ? ? ?
? ? ? ? 5.? ?背景圖像固定
? ? ? ? ? ? ? ? background-attachment:scroll/fixed;
? ? ? ? 6.背景屬性復(fù)合寫法
? ? ? ? ? ? ? ? background：顏色 地址 平鋪 滾動(dòng) 位置(實(shí)際順序沒要求)
? ? ? ? 如：background:?pink?url("../images/background.jpg")?no-repeat?fixed?center?20px;
? ? ? ? 7.背景顏色半透明
? ? ? ? ? ? ? ? background：rgba(0,0,0,0.3);? ? ? ? //最后一個(gè)參數(shù)是透明度0~1，0完全透明，IE9+，用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //習(xí)慣把0.3的0去掉，只是背景色半透明，其他無影響
alt+shift鼠標(biāo)拉下來同時(shí)輸入幾列數(shù)據(jù)
15.CSS三大特性：
????????層疊性：對(duì)相同的選擇器的同一屬性，附不同的屬性值時(shí)? ? ? ? ->? ? ? ? 就近原則? ? ? ? (即覆蓋性)
????????繼承性：部分樣式可子承父業(yè)，簡化CSS代碼復(fù)雜性。(文字類text-,font-,line-,color),其他不繼承
????????另外a標(biāo)簽樣式需要單獨(dú)設(shè)置(因?yàn)閍瀏覽器默認(rèn)指定了樣式，優(yōu)先級(jí)>body)
????????行高可跟單位可不跟單位1.5，寫在父元素里時(shí)，表示子元素行高繼承了子元素現(xiàn)文字大小的1.5倍
????????子元素可根據(jù)自己文字大小調(diào)整行高，常用。沒設(shè)置大小一直找父元素到設(shè)置為止。
????????優(yōu)先級(jí)：同一標(biāo)簽同一屬性，附不同的屬性值時(shí)，
? ? ? ? ? ? ? ? 1.同一選擇器：層疊性(就近原則覆蓋)；
? ? ? ? ? ? ? ? 2.選擇器不同：選擇器權(quán)重：
????????????????????????????????????????!important(加在CSS重要屬性分號(hào)的前面)
????????????????????????????????????????>style=""行內(nèi)樣式
????????????????????????????????????????>id>類/偽類class/:
????????????????????????????????????????>標(biāo)簽
????????????????????????????????????????>*/繼承
? ? ? ? ? ? ? ? 3.復(fù)合選擇器：權(quán)重疊加(只疊加，不進(jìn)位如：10個(gè)標(biāo)簽選擇器權(quán)重為0，0，0，10，因此再多標(biāo)簽選擇器疊加優(yōu)先級(jí)依然小于類選擇器。。)
*.CSS注釋
16.盒子模型：(網(wǎng)頁布局核心：盒子模型，浮動(dòng)，定位)
? ? ? ? 1.網(wǎng)頁布局過程：
? ? ? ? ? ? ? ? 1.? ?先準(zhǔn)備好相關(guān)網(wǎng)頁元素，網(wǎng)頁元素基本都是盒子。
??????????????????????2.? ?用CSS設(shè)置盒子寬高，樣式，擺到相應(yīng)位置。(浮動(dòng)和定位)
? ? ? ? ? ? ? ? 3.? ?往盒子里面裝內(nèi)容。
? ? ? ? ? ? ? ? 網(wǎng)頁的核心本質(zhì)就是利用CSS擺放盒子。
? ? ? ? 2.盒子模型：
????????????????把HTML頁面中的布局元素看成一個(gè)矩形的盒子，盛放內(nèi)容的容器。用CSS設(shè)置邊框，內(nèi)外邊距，實(shí)際內(nèi)容。(border,padding,margin,content)
? ? ? ? 3組成部分:
? ? ? ? ? ? ? ? 1.? ?border邊框(邊框?qū)挾?#xff0c;邊框樣式，邊框顏色)
? ? ? ? ? ? ? ? ? ? ? ? border-width:????????XXpx;
? ? ? ? ? ? ? ? ? ? ? ? border-style:????????solid/dashed/dotted;
? ? ? ? ? ? ? ? ? ? ? ? border-color:? ? ? ? pink;
? ? ? ? ? ? ? ? ? ? ? ? 簡寫border: ????????XXpx soild pink;沒有順序要求
? ? ? ? ? ? ? ? ? ? ? ? 指定一個(gè)邊框樣式顏色border-top/bottom/left/right: ????????XXX;
? ? ? ? ? ? ? ? ? ? ? ? 表格的細(xì)線邊框border-collapse:? ? ? ? collapse;? ? ? ? //相鄰邊框合并到一起
? ? ? ? ? ? ? ? ? ? ? ? 邊框會(huì)影響盒子實(shí)際大小。->測盒子本身寬度時(shí)，不帶邊框測；
????????????????????????????????????????????????????????含邊框時(shí)：width,height分別-邊框?qū)挾?2=盒子本身大小。
? ? ? ? ? ? ? ? 2.? ?content內(nèi)容
????????????????????????直接書寫。
? ? ? ? ? ? ? ? 3.? ?padding內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ? ? padding-top:? ? ? ? XXpx;
? ? ? ? ? ? ? ? ? ? ? ? padding-right:
? ? ? ? ? ? ? ? ? ? ? ? padding-bottom:
? ? ? ? ? ? ? ? ? ? ? ? padding-left:
? ? ? ? ? ? ? ? ? ? ? ? padding：1上下左右? ? ? ? 2上下? ?左右? ? ? ? 3上? ?左右? ?下? ? ? ? 4上? ?右? ?下? ?左
? ? ? ? ? ? ? ? ? ? ? ? 如果盒子已附寬高，內(nèi)邊距會(huì)影響盒子實(shí)際大小。(可盒子本身不給寬高，根據(jù)輸入多少和padding定寬高，更靈活)
????????????????????????padding只影響默認(rèn)值或設(shè)置值，不影響默認(rèn)繼承的寬度。
????????????????????????實(shí)際寬=pr+pl+盒子本身寬，高同理。范圍固定 盒子本身寬高=范圍-測量內(nèi)邊距*2
? ? ? ? ? ? ? ? 4.? ?margin外邊距
? ? ? ? ? ? ? ? ? ? ? ? margin-top:? ? ? ? XXXpx;
????????????????????????margin-right:
? ? ? ? ? ? ? ? ? ? ? ? margin-bottom:
? ? ? ? ? ? ? ? ? ? ? ? margin-left:
? ? ? ? ? ? ? ? ? ? ? ? margin和padding簡寫方式一致。
? ? ? ? ? ? ? ? 不會(huì)撐大盒子。
? ? ? ? ? ? ? ? 外邊距可以讓塊級(jí)盒子實(shí)現(xiàn)水平居中，前提：
? ? ? ? ? ? ? ? ? ? ? ? 1.? ?這個(gè)塊級(jí)盒子必須指定了寬度；
? ? ? ? ? ? ? ? ? ? ? ? 2.? ?盒子左右的外邊距設(shè)置為auto。
? ? ? ? ? ? ? ? 給父元素添加text-align:center;讓行級(jí)元素和行級(jí)塊元素文字實(shí)現(xiàn)水平居中。(轉(zhuǎn)化為塊級(jí)可用外邊距實(shí)現(xiàn)居中)
? ? ? ? ? ? ? ? 外邊距合并，分為：
? ? ? ? ? ? ? ? ? ? ? ? 1.? ?相鄰塊元素垂直外邊距的合并
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 上下盒子的垂直間距不是margin-bottom，margin-top的和，而是取這倆最大值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 解決方法：盡量給一個(gè)盒子添加margin值。
? ? ? ? ? ? ? ? ? ? ? ? 2.? ?嵌套塊元素垂直外邊距的塌陷
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兩個(gè)嵌套關(guān)系的塊元素，同時(shí)都有上外邊距時(shí)，外邊距合并，父元素塌陷較大的那個(gè)外邊距。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 解決方案：父元素定義上邊框/父元素定義內(nèi)邊距/父元素添加overflow:hidden
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第三個(gè)方法不會(huì)變表現(xiàn)盒子的大小，推薦。
? ? ? ? ? ? ? ? ? ? ? ? 浮動(dòng)，固定，絕對(duì)定位沒有塌陷問題。
? ? ? ? ? ? ? ? 清除內(nèi)外邊距：*{padding:0;? ? ? ? margin:0;}
? ? ? ? ? ? ? ? 為了照顧兼容性，行級(jí)元素可以設(shè)置左右內(nèi)外邊距，最好不要設(shè)置上下內(nèi)外邊距。(但轉(zhuǎn)換后可以)
????????????????h,p,dt特殊，是塊級(jí)元素但是內(nèi)部不能放塊級(jí)元素。
總結(jié)：1.標(biāo)簽要符合語義h，p，a。。不能全部div，span等。
????????2.類名盡量多寫，命名規(guī)范，方便后期管理和后端渲染。
? ? ? ? 3.margin和padding大多時(shí)候可以混用；定過當(dāng)前元素寬/高時(shí)padding會(huì)擴(kuò)大盒子寬/高需要算數(shù)字減一些，此時(shí)用margin比較方便；當(dāng)文字有上下邊框等用margin-左右，上下邊框會(huì)跟著跑，此時(shí)用padding比較方便。
? ? ? ? 4.先模仿再寫出自己風(fēng)格，多用輔助工具。
? ? ? ? 量盒子盡量不要量到邊框，
去掉li前面的小圓點(diǎn)：
????????list-style:none;? ? ? ? //寫在單獨(dú)li里，全部去掉。
? ? ? ? PS基本操作
? ? ? ? 5.圓角邊框(567是CSS3新增內(nèi)容，IE9及以上版本有)
? ? ? ? ? ? ? ? border-radius:? ? ? ? XXpx;/? ? ? ? 50%;? ? ? ? ...//表示寬度和高度的一半，出圓形或橢圓形
1左上右上右下左下；2左上右下? ?右上左下；3左上? ?右上左下? ?右下；4左上? ?右上? ?右下? ?左下
? ? ? ? ? ? ? ? border-top-left-radius:
? ? ? ? ? ? ? ? border-top-right-radius:
? ? ? ? ? ? ? ? border-bottom-right-radius:
? ? ? ? ? ? ? ? border-bottom-left-radius:
? ? ? ? 6.盒子陰影
? ? ? ? ? ? ? ? box-shadow:水平距離 垂直距離 模糊尺寸 大小 顏色 inset改內(nèi)部陰影；(顏色常用rgba)
? ? ? ? ? ? ? ? 陰影不占用空間，不影響盒子大小和排列。多寫outset會(huì)導(dǎo)致陰影失效，不要寫。
? ? ? ? 之后學(xué)過渡，讓陰影慢慢出來。
? ? ? ? 任何盒子都可加:hover
? ? ? ? 7.文字陰影
? ? ? ? ? ? ? ? text-shadow:水平距離 垂直距離 模糊距離 陰影顏色；
? ? ? ? ? ? ? ? X偏移量，Y偏移量，陰影模糊半徑，陰影擴(kuò)散半徑(大小)，陰影顏色
17.浮動(dòng)
? ? ? ? 網(wǎng)頁布局PC端3種方式(移動(dòng)端學(xué)新的布局方式)
? ? ? ? ? ? ? ? 網(wǎng)頁布局的本質(zhì)：用CSS擺放盒子，把盒子擺到相應(yīng)位置。
? ? ? ? ? ? ? ? 1.? ?普通流(標(biāo)準(zhǔn)流/文檔流)
? ? ? ? ? ? ? ? ? ? ? ? 按塊級(jí)元素，行級(jí)元素，行內(nèi)塊元素默認(rèn)方式排列。
? ? ? ? ? ? ? ? ? ? ? ? 塊級(jí)獨(dú)占一行，由上到下排列：div hr p h ul ol dl form table
? ? ? ? ? ? ? ? ? ? ? ? 行級(jí)由左到右，碰到父級(jí)元素邊緣自動(dòng)換行：span a i em
????????????????元素在同一盒子兩端，滾動(dòng)部分盒子不動(dòng)，用標(biāo)準(zhǔn)流不方便做。
? ? ? ? ? ? ? ? 2.? ?浮動(dòng)
? ? ? ? ? ? ? ? 3.? ?定位
? ? ? ? 浮動(dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列方式。
網(wǎng)頁布局準(zhǔn)則：
? ? ? ? 1.多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，橫向排列找浮動(dòng)。
? ? ? ??float:????????none/left/right;
? ? ? ? ? ? ? ? float屬性創(chuàng)建浮動(dòng)框，將其移動(dòng)到上級(jí)父元素的左/右邊緣或包含另一浮動(dòng)框邊緣。
? ? ? ?1.浮動(dòng)特性
? ? ? ? ? ? ? ? 1.? ?浮動(dòng)的元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo))
? ? ? ? ? ? ? ? ? ? ? ? 脫離標(biāo)準(zhǔn)流的控制浮起來，并移動(dòng)到指定位置。
? ? ? ? ? ? ? ? ? ? ? ? 浮動(dòng)的盒子不再保留原先的位置。
? ? ? ? ? ? ? ? 2.? ?浮動(dòng)的元素會(huì)一行顯示并元素頂部對(duì)齊
? ? ? ? ? ? ? ? ? ? ? ? 浮動(dòng)元素是相互貼在一起沒縫隙的，若父級(jí)元素裝不下這些盒子，多出的盒子會(huì)另起一行對(duì)齊。
? ? ? ? ? ? ? ? 3.? ?浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性
? ? ? ? ? ? ? ? ? ? ? ? 任何元素都可以添加浮動(dòng)，添加后具有行內(nèi)塊元素的特性。可設(shè)置寬高，不設(shè)按字多少
? ? ? ? ? ? ? ? ? ? ? ? 如：行內(nèi)元素若有了浮動(dòng)，不需轉(zhuǎn)換就可以添加寬高。和行內(nèi)塊不同的是中間沒有空白縫隙。
? ? ? ? ? ? ? ? 為了約束浮動(dòng)元素位置：先用標(biāo)準(zhǔn)流的父元素排列上下位置，再用內(nèi)部子元素采取浮動(dòng)排列左右位置。這樣浮動(dòng)元素以父元素為邊緣左右對(duì)齊。
? ? ? ? ? ? ? ? 2.先設(shè)置盒子大小，再設(shè)置盒子位置。
????????????????height必須設(shè)置，否則父元素的height的繼承會(huì)被float自帶的屬性覆蓋掉
? ? ? ? 1.浮動(dòng)和標(biāo)準(zhǔn)流的父盒子搭配；
? ? ? ? 2.如果一個(gè)元素浮動(dòng)了，理論上所有的兄弟元素也要浮動(dòng)。
? ? ? ? 浮動(dòng)盒子前面的非父級(jí)標(biāo)準(zhǔn)流若獨(dú)占一行會(huì)占住下面浮動(dòng)盒子的部分位置，使盒子貼住這個(gè)標(biāo)準(zhǔn)流的底部邊緣所在行(可正對(duì)邊緣或在邊緣延長線上)浮動(dòng)。上一浮動(dòng)右邊緣的延長線->
? ? ? ? 浮動(dòng)盒子只會(huì)影響該盒子后面的標(biāo)準(zhǔn)流，不會(huì)對(duì)浮動(dòng)的盒子的前面具有獨(dú)占一行屬性的標(biāo)準(zhǔn)流造成影響。在此基礎(chǔ)上浮動(dòng)的盒子貼著前一個(gè)右邊緣延長線，達(dá)不到要求就再另起一行
? ? ? ? 浮動(dòng)盒子受前面非父級(jí)的獨(dú)占一行盒子影響。
? ? ? ? 當(dāng)里面產(chǎn)品很多和新聞不知道長短時(shí)，父盒子不寫高度，希望父盒子根據(jù)子盒子高度撐開。由于浮動(dòng)元素不再占用原文檔流的位置，所以他會(huì)對(duì)后面元素的排版產(chǎn)生影響。
? ? ? ?父盒子沒有高度，且子盒子浮動(dòng)了，且影響下面布局了時(shí)清除浮動(dòng)。
? ? ? ? 清除浮動(dòng)的方法：
? ? ? ? ? ? ? ? 1.? ?額外標(biāo)簽法：
? ? ? ? ? ? ? ? ? ? ? ? 在最后一個(gè)浮動(dòng)的子標(biāo)簽后加<div style="clear:both;"></div>????????父級(jí){clear:? ? ? ? left/right/both;}實(shí)質(zhì)是閉合浮動(dòng)，把子元素浮動(dòng)造成的影響閉合到當(dāng)前父元素里。
? ? ? ? ? ? ? ? ? ? ? ? 通俗易懂，但添加無意義標(biāo)簽，結(jié)構(gòu)化較差。
????????????????????????這個(gè)新增的盒子標(biāo)簽必須是塊級(jí)元素或br，不能是行級(jí)元素
? ? ? ? ? ? ? ? 2.? ?父級(jí)添加overflow屬性
? ? ? ? ? ? ? ? ? ? ? ? 父級(jí){overflow:? ? ? ? hidden/auto/scroll;}
? ? ? ? ? ? ? ? ? ? ? ? 簡潔，但會(huì)溢出隱藏把出父元素外一部分的盒子不換行而是直接切掉
? ? ? ? ? ? ? ? 3.? ?父級(jí)添加after偽元素
? ? ? ? ? ? ? ? ? ? ? ? .clearfix::after{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? content:????????"";? ? ? ? ? ? ? ? ? ? ? ? //必寫屬性
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:? ? ? ? block;? ? ? ? ? ? ? ? //必須是塊級(jí)元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height:? ? ? ? 0;? ? ? ? ? ? ? ? //讓看不見這個(gè)元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? clear:? ? ? ? both;? ? ? ? ? ? ? ? //清除浮動(dòng)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? visibility:? ? ? ? hidden;? ? ? ? ? ? ? ? //讓看不見這個(gè)元素
????????????????????????}
? ? ? ? ? ? ? ? ? ? ? ? .clearfix{? ? ? ? //為了兼容IE6,7專有
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? *zoom:? ? ? ? 1;
????????????????????????}
? ? ? ? ? ? ? ? 4.? ?父級(jí)添加雙偽元素
? ? ? ? ? ? ? ? ? ? ? ? .clearfix:before,.clearfix:after{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? content:????????"";? ? ? ? ? ? ? ? //必寫屬性
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:????????table;? ? ? ? ?//block塊級(jí)不在一行，不行，因?yàn)楦?dòng)元素在一行
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//轉(zhuǎn)換成塊級(jí)元素并且在一行顯示
????????????????????????}
? ? ? ? ? ? ? ? ? ? ? ? .clearfix:after{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? clear:? ? ? ? both;? ? ? ? ? ? ? ? //清除浮動(dòng)
????????????????????????}
? ? ? ? ? ? ? ? ? ? ? ? .clearfix{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? *zoom:? ? ? ? 1;
????????????????????????}
*.定位
? ? ? ??常見的網(wǎng)頁布局
? ? ? ? ? ? ? ? top? ? ? ? banner? ? ? ? main(left,right,main1~...)? ? ? ? footer
? ? ? ? PS切圖
? ? ? ? ? ? ? ?1.常見圖片格式
? ? ? ? ? ? ? ? ? ? ? ? jpg：色彩保留好，產(chǎn)品類圖片。
? ? ? ? ? ? ? ? ? ? ? ? gif：保存透明背景和動(dòng)畫效果，圖片小動(dòng)畫。
? ? ? ? ? ? ? ? ? ? ? ? png：jpg，gif優(yōu)點(diǎn)綜合，切成透明背景圖片。
? ? ? ? ? ? ? ? ? ? ? ? psd：可直接復(fù)制上面文字圖片各信息，不能直接放到頁面里。
? ? ? ? ? ? ? ? 2.PS使用
? ? ? ? ? ? ? ? ? ? ? ? 1.T復(fù)制psd文字
? ? ? ? ? ? ? ? ? ? ? ? 2.圖層切圖復(fù)制圖片
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.? ?點(diǎn)擊圖層切圖:點(diǎn)擊導(dǎo)出圖片->導(dǎo)出為png(默認(rèn)原版大小)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????????選多個(gè)圖->圖層->合并圖層->導(dǎo)出為png
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 溝通
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.? ?切片切圖
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 切片選中區(qū)域->文件導(dǎo)出web->jpeg可調(diào)品質(zhì)->存儲(chǔ)->選中切片
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 透明背景先把背景取消->只有g(shù)if，png支持透明背景
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 切片后移動(dòng)位置->切完換到切片選擇工具
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.? ?PS插件切圖(PS完整版可用)
? ? ? ? ? ? ? ? ? ?安裝cutterman插件->web，路徑，png24直接透明..->選圖->(合并導(dǎo)出..)導(dǎo)出選中圖層
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 選中含截取部分的選區(qū)->矩形截取工具截部分選區(qū)->導(dǎo)出選中圖層
18.CSS屬性書寫順序
? ? ? ? 1.布局定位屬性：display/position/float/clear/visibility/overflow
? ? ? ? 2.自身屬性：width/height/margin/padding/border/background
? ? ? ? 3.文本屬性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
? ? ? ? 4.其他屬性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient/bgc:rgba()...
19.頁面布局整體思路
? ? ? ? 1.確定頁面版心(可視區(qū))w，測量得出。
????????2.分析頁面中的行模塊，每個(gè)行模塊中的列模塊。
? ? ? ? 3.一行中的列模塊常浮動(dòng)布局，先定每個(gè)列模塊大小，再定位置。
? ? ? ? 4.制作HTML結(jié)構(gòu)。
? ? ? ? 5.先清楚布局結(jié)構(gòu)(劃分成幾個(gè)模塊，怎么對(duì)齊，什么方式布局)
20.案例準(zhǔn)備工作
? ? ? ? 1.創(chuàng)建study目錄文件夾，用vscode打開此文件夾
? ? ? ? 2.在study文件夾內(nèi)新建文件夾images，新建首頁文件index.html,style.css
? ? ? ? 3.創(chuàng)建HTML骨架并在head內(nèi)link引入css，寫清除內(nèi)外邊距看是否引入成功
? ? ? ? 4.測版心，標(biāo)尺w1226居中對(duì)齊，寫到css公共類w里
? ? ? ? 5.逐行寫，小盒子+margin
? ? ??
導(dǎo)航欄實(shí)際開發(fā)用ul>li>a寫：語義清晰，避免堆砌關(guān)鍵字搜索引擎降權(quán)
三個(gè)文字塊浮動(dòng)后，想讓三文字在一行浮動(dòng)，文字由li，a隔開，所以應(yīng)該給li加浮動(dòng)，因?yàn)閍是行級(jí)元素，本身就會(huì)讓文字排在一行
字隨多少變寬度，所以用padding自動(dòng)把盒子撐開，給a設(shè)置使點(diǎn)其他位置也屬于鏈接
按鈕默認(rèn)有邊框。
行內(nèi)塊元素有默認(rèn)縫隙。
padding增大a鏈接范圍。
21.定位
? ? ? ? 1.使用場景
? ? ? ? ????????1.某元素可以自由地在一個(gè)盒子內(nèi)移動(dòng)，并且壓住其他盒子
? ? ? ? ????????2.滾動(dòng)窗口時(shí)，盒子是固定在屏幕的某個(gè)位置
? ? ? ? 2.組成
? ? ? ? ? ? ? ? 定位模式+邊偏移
? ? ? ? ? ? ? ? 定位模式 postion:? ? ? ? static靜態(tài)/relative相對(duì)/absolute絕對(duì)/fixed固定/sticky;
? ? ? ? ? ? ? ?邊偏移 top:80px;??bottom:80px;??left:80px;??right:80px; 定義元素相對(duì)父元素上邊線的距離
? ? ? ? ? ? ? ? ????????子絕父相，但不是一直不變的。
? ? ? ? ? ? ? ? 1.相對(duì)定位相對(duì)它原來的位置，不脫標(biāo)，原來的位置保留(主要用于限制絕對(duì)定位)
? ? ? ? ? ? ? ? 2.絕對(duì)定位相對(duì)祖元素位置，脫標(biāo)。行內(nèi)塊特征。
? ? ? ? ? ? ? ? 3.固定定位相對(duì)于瀏覽器可視窗口，脫標(biāo)。可看成特殊的絕對(duì)定位。行內(nèi)塊特征。
? ? ? ? ? ? ? ? ? ? ? ? 固定在版心右側(cè)：left:50%;margin-left:版心寬度/2;
? ? ? ? ? ? ? ? 4.粘性定位sticky,相對(duì)/固定定位混合:瀏覽器可視窗口為參照點(diǎn)(固),占有原先位置(相)
? ? ? ? ? ? ? ? ? ? ? ? 必須添加top,bottom,left,right其中的一個(gè)才有效。兼容性差，IE不支持(大部分用JS)
? ? ? ? ? ? ? ? 是否脫標(biāo)，以誰為基準(zhǔn)移動(dòng)位置。
? ? ? ? ? ? ? ? 定位的疊放次序：z-index:? ? ? ? 整數(shù)；? ? ? ? 值相同則后來居上，不能加單位
? ? ? ? ? ? ? ? ? ? ? ? 定位的盒子才有z-index
? ? ? ? ? ? ? ? 定位中若同一個(gè)盒子既有l(wèi)eft屬性又有right屬性，只執(zhí)行l(wèi)eft屬性(先左后右，先上后下)
? ? ? ? 特殊：
? ? ? ? ? ? ? ? 1.加絕對(duì)定位的盒子不能通過margin:0 auto和定寬度來水平居中，應(yīng)該通過left和margin-left等實(shí)現(xiàn)。瀏覽器變小也始終在中央。相對(duì)定位的盒子能實(shí)現(xiàn)水平居中(因?yàn)椴幻摌?biāo))
? ? ? ? ? ? ? ? 2.絕對(duì)定位和固定定位，和浮動(dòng)類似有類似行內(nèi)塊屬性：
? ? ? ? ? ? ? ? ? ? ? ? 添加后不用模式轉(zhuǎn)換，行級(jí)可以直接設(shè)置高度寬度；塊級(jí)不設(shè)置寬度默認(rèn)是內(nèi)容大小；脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷。
? ? ? ? ? ? ? ? 3.浮動(dòng)，定位(固定)因?yàn)槊撾x標(biāo)準(zhǔn)流，所以不會(huì)造成外邊距合并。
? ? ? ? ? ? ? ? 浮動(dòng)只會(huì)壓住標(biāo)準(zhǔn)流的盒子，不會(huì)壓住文字和圖片；絕對(duì)定位和固定定位會(huì)完全壓住標(biāo)準(zhǔn)流內(nèi)容。(因?yàn)楦?dòng)最初的目的就是做文字環(huán)繞效果)
22.元素的顯示與隱藏
? ? ? ? 如：點(diǎn)關(guān)閉消失，刷新回來；下拉菜單
? ? ? ? 1.display:none;? ? ? ? 盒子和位置全看不到了? ? ? ? dispaly:block;還有顯示元素的意思
? ? ? ? 2.visibility:hidden;? ? ? ? 盒子看不到，位置保留
? ? ? ? 溢出顯示隱藏3.overflow:visible無處理，顯示/hidden隱藏超出/auto超出帶滾動(dòng)條/scroll滾動(dòng)條
? ? ? ? 有定位的盒子，慎用隱藏(如hot)
*有圖片時(shí)，一定要讓圖片和父盒子一樣大(如果需求是并且防溢出)
23.精靈圖
? ? ? ? 1.作用
? ? ? ? ????????寫好網(wǎng)站放服務(wù)器里。用戶訪問圖片發(fā)送請(qǐng)求給服務(wù)器，若每圖發(fā)一次服務(wù)器壓力大。
? ? ? ? ????????減少服務(wù)器接收發(fā)送請(qǐng)求的次數(shù)，提高頁面加載速度：小圖整合到一張大圖中。
? ? ??????????? 針對(duì)小背景圖片使用。(因?yàn)椴迦腩?#xff0c;產(chǎn)品類圖片容易經(jīng)常更換)
? ? ? ? 2.使用范圍
? ? ? ? ? ? ? ? ?給一個(gè)有大小的盒子設(shè)置背景圖片。
? ? ? ? ? ? ? ? 用background-position移動(dòng)背景圖片x,y坐標(biāo)位置(橫X縱Y，禿往左上走負(fù))
? ? ? ? ? ? ? ? ? ? ? ? background-position:? ? ? ? -152px -20px;? ? ? ? //可以簡寫在background里
24.字體圖標(biāo)
? ? ? ? 1.使用場景
? ? ? ? ? ? ? ? 結(jié)構(gòu)樣式比較簡單的小圖標(biāo)。方便改顏色、陰影效果、透明、旋轉(zhuǎn)。
? ? ? ? 2.作用
? ? ? ? ? ? ? ? 精靈圖是圖片文件比較大，放大縮小會(huì)失真，圖片制作完后想要更換比較復(fù)雜。
? ? ? ? ????????本質(zhì)是文字，文字放大縮小不會(huì)失真；兼容性高。
? ? ? ? 3.步驟
? ? ? ? ? ? ? ? 1.字體圖標(biāo)的下載
? ? ? ? ? ? ? ? ? ??http://icomoon.io? ? ?點(diǎn)IcoMoon APP;點(diǎn)Generate Font;Download
? ? ? ? ? ? ? ? ? ? ? ? http://www.iconfont.cn? ? ? ? 淘寶，阿里巴巴圖標(biāo)
? ? ? ? ? ? ? ? 2.字體圖標(biāo)的引入(引入到HTML頁面中)
? ? ? ? ? ? ? ? ? ? ? ? 在下載的fonts里有.ttf字體文件，電腦默認(rèn)有；需要把其他后綴字體圖標(biāo)文件引入到電腦中：1.把fonts文件夾粘貼到html旁邊(4個(gè)文件是為了兼容)；2.把一大段代碼復(fù)制到css中，不用背；。。。
? ? ? ? ? ? ? ? 3.字體圖標(biāo)的追加(以后添加新的小圖標(biāo))
? ? ? ? 總結(jié)
? ? ? ? ? ? ? ? 1. http://icomoon.io選圖標(biāo)或最下Add Icons From Library...
? ? ? ? ? ? ? ? 2. 右下Generate Font;Download
? ? ? ? ? ? ? ? 3. 把下載好的fonts文件夾放在頁面根目錄下
? ? ? ? ? ? ? ? 4. 下載的style.css里@font-face{}放到CSS部分，引字體圖標(biāo)聲明? ? ?font-family對(duì)應(yīng)名稱
? ? ? ? ? ? ? ? 5.下載的demo.html把文字□復(fù)制到html對(duì)應(yīng)標(biāo)簽內(nèi)
? ? ? ? ? ? ? ? 6. 在聲明下引入的字體是下載的一堆里哪一個(gè)
? ? ? ? ? ? ? ? ? ? ? ? @font-face{}
? ? ? ? ? ? ? ? ? ? ? ? span{font-family: 'icomoon';}? ? ? ? //還可以在這指定字體顏色大小等
? ? ? ? ? ? ? ? ? ? ? ? <span>□</span>或<span>\45a9</span>
? ? ? ? ? ? ? ? 7.字體圖標(biāo)追加：http://icomoon.io還是右上icomoon APP；左上import icons；選selection.json打開yes；選好下載；換成新fonts文件
25.CSS三角
? ? ? ? 矩形盒子外多等腰三角當(dāng)對(duì)話框等。
? ? ? ? 寬高為0，有邊框正方形盒子，三邊透明一邊帶顏色。
? ? ? ? 為兼容行高，字體大小為0。
? ? ? ? 應(yīng)用：三角對(duì)于矩形絕對(duì)定位，增加top，left其他不變。
26.常見CSS用戶界面
? ? ? ? 1. 鼠標(biāo)界面
? ? ? ? ? ? ? ? cursor:????????default/pointer/move/text/not-allowed;
? ? ? ? 2. 表單輪廓線
? ? ? ? ? ? ? ? 默認(rèn)點(diǎn)進(jìn)去有藍(lán)色輪廓線，最好默認(rèn)去掉
? ? ? ? ? ? ? ? input{outline:? ? ? ? none;}
? ? ? ? 3. 防止表單域拖拽
? ? ? ? ? ? ? ? textarea{resize:? ? ? ? none;}? ? ? ? //文本域也有默認(rèn)藍(lán)色輪廓，最好也去掉
? ? ? ? ? ? ? ? <textarea></textarea>最好寫在一行，否則點(diǎn)進(jìn)會(huì)有空行。
27.vertical-align屬性應(yīng)用
? ? ? ? 實(shí)現(xiàn)圖片表單和文字的垂直對(duì)齊。? ? ? ? 寫在圖片或表單的樣式中
? ? ? ? 設(shè)置行內(nèi)或行內(nèi)塊元素的垂直對(duì)齊方式。
? ? ? ? vertical-align:? ? ? ? baseline/top/middle/bottom;
28.圖片底部有空白的bug
div邊框和圖片之間有空白。
多個(gè)img{display:? ? ? ? block;}因?yàn)榛€對(duì)齊只對(duì)于行內(nèi)或行內(nèi)塊的圖片或表格等。
或img{vertical-align:? ? ? ? top/middle/bottom;}建議
<div><img><div>
29.溢出的文字省略號(hào)顯示
? ? ? ? 1.單行
? ? ? ? ? ? ? ? white-space:? ? ? ? nowrap;? ? ? ? ? ? ? ? //先強(qiáng)制一行顯示文本，normal自動(dòng)換行
? ? ? ? ? ? ? ? overflow:? ? ? ? hidden;? ? ? ? ? ? ? ? //超出的部分隱藏
? ? ? ? ? ? ? ? text-overflow:? ? ? ? ellipsis;? ? ? ? ? ? ? ? //用省略號(hào)代替超出的部分
? ? ? ? ? ? ? ? 一般此盒子有寬高
? ? ? ? 2.多行
? ? ? ? ? ? ? ? overflow:? ? ? ? hidden;
? ? ? ? ? ? ? ? text-overflow:? ? ? ? ellipsis;
? ? ? ? ? ? ? ? display:? ? ? ? -webkit-box;? ? ? ? ? ? ? ? //彈性伸縮盒子
? ? ? ? ? ? ? ? -webkit-line-clamp:? ? ? ? 2;? ? ? ? ? ? ? ? //限制在一個(gè)塊元素文本的顯示行數(shù)
? ? ? ? ? ? ? ? -webkit-box-orient:? ? ? ? vertical;? ? ? ? ? ? ? ? //設(shè)置或檢測伸縮盒對(duì)象的子元素排列方式
? ? ? ? ? ? ? ? 然后把超出省略號(hào)的行通過改盒子高度截掉。用瀏覽器調(diào)整的高度。
? ? ? ? ? ? ? ? 一般此盒子有寬高，兼容性差，在webkit內(nèi)核可使用，建議讓后臺(tái)寫
30.常見布局技巧
? ? ? ? 1. margin負(fù)值的運(yùn)用
? ? ? ? ? ? ? ? 超細(xì)邊框的盒子讓右邊margin=-1px壓住左邊，使邊框粗細(xì)均勻。
? ? ? ? ? ? ? ? 對(duì)有細(xì)邊框的一行盒子都加margin=? ? ? ? -1px;即可
? ? ? ? ? ? ? ? 因?yàn)闉g覽器對(duì)一行html標(biāo)簽渲染css完再執(zhí)行下一行html標(biāo)簽，先浮動(dòng)緊貼過來，再左移，所以右邊盒子比前邊都多向左移動(dòng)1px，使得壓住多余的邊框。
? ? ? ? ? ? ? ? *.鼠標(biāo)放到對(duì)應(yīng)子盒子邊框變色
? ? ? ? ? ? ? ? ? ? ? ? 此方法下右邊框會(huì)被下一個(gè)盒子的左邊框壓住無法顯示變色。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 無定位時(shí)：把選中的盒子變成相對(duì)定位。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 有定位時(shí)：把選中的盒子z-index改優(yōu)先級(jí)(z-index用在不設(shè)定位的盒子不生效)
? ? ? ? 2. 文字圍繞浮動(dòng)的運(yùn)用
? ? ? ? ? ? ? ? 左圖片右文字時(shí)，可以不左右設(shè)置兩個(gè)盒子，而是利用文字圍繞浮動(dòng)。
? ? ? ? ? ? ? ? 外有一個(gè)有寬高的父盒子，內(nèi)有一個(gè)又寬高的浮動(dòng)左盒子和子圖片，和標(biāo)準(zhǔn)流文字。
? ? ? ? 3. 行內(nèi)塊的運(yùn)用
? ? ? ? ? ? ? ? 頁碼上一頁下一頁，1234..共10頁，到 頁，確定。
? ? ? ? ? ? ? ? 行內(nèi)塊本身有大小間距，給父盒子添加text-align:? ? ? ? center;子可水平居中
? ? ? ? ? ? ? ? .box內(nèi)有a，讓a變成行內(nèi)塊；父盒子text-align:center;(對(duì)內(nèi)部文字,行內(nèi),行內(nèi)塊元素生效)
? ? ? ? 4. css三角強(qiáng)化
? ? ? ? ? ? ? ? 開始是四個(gè)分別設(shè)置的15px的邊框。
? ? ? ? ? ? ? ? [/]圖的/]直角三角，然后壓到[]靠右的上面。
? ? ? ? ? ? ? ? 1. 先【X】邊框下面刪掉留[V]? ? ? ? border-bottom: 0 solid #fff;
? ? ? ? ? ? ? ? 2.把留下的變高，通過上面的角變高? ? ? ? border-top: 20px solid #111;
? ? ? ? ? ? ? ? 3.再把左側(cè)去掉得[/]? ? ? ? border-left: 0 solid #222;
? ? ? ? ? ? ? ? 4.再把上面三角改透明得彩色/]? ? ? ? border-top: 20px solid transparent;
31、css初始化
? ? ? ? 不同瀏覽器對(duì)有些標(biāo)簽?zāi)J(rèn)值不同。如京東-右鍵-查看網(wǎng)頁源代碼-firstcss-*~zoom
? ? ? ? *beautify自動(dòng)格式化css
HTML5新增特性
? ? ? ? 新的標(biāo)簽，表單，表單屬性。
? ? ? ? 1.新增語義化標(biāo)簽
? ? ? ? ? ? ? ? <header>頭部標(biāo)簽
? ? ? ? ? ? ? ? <nav>導(dǎo)航標(biāo)簽
? ? ? ? ? ? ? ? <article>內(nèi)容標(biāo)簽
? ? ? ? ? ? ? ? <section>定義文檔某個(gè)區(qū)域
? ? ? ? ? ? ? ? <aside>側(cè)邊欄標(biāo)簽
? ? ? ? ? ? ? ? <footer>尾部標(biāo)簽
? ? ? ? ? ? ? ? 標(biāo)準(zhǔn)化針對(duì)搜索引擎，使用前ie9最好先把這些元素轉(zhuǎn)化成塊級(jí)元素，移動(dòng)端更喜歡使用這些標(biāo)簽。
? ? ? ? 2.新增視頻標(biāo)簽.avi .mp4 .wmv..
? ? ? ? ? ? ? ? <video src="" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster=""></video>
? ? ? ? ? ? ? ? src視頻路徑，autoplay自動(dòng)播放，muted靜音(谷歌設(shè)置靜音后自動(dòng)播放才生效)，loop循環(huán)播放，poster播放前的畫面。reload不播放時(shí)是否預(yù)先加載，有自動(dòng)播放是不用寫。reload="auto/none"
????????????????只支持mp4,webm,ogg,不同瀏覽器支持不一樣，盡量mp4的。
????????????????兼容性寫法，了解
? ? ? ? 3.新增音頻標(biāo)簽mp3, wav, ogg
? ? ? ? ? ? ? ? 盡量用mp3。谷歌把音頻自動(dòng)播放也禁用了。
???????????????<audio?src=""?autoplay="autoplay"?controls="controls"?loop="loop"></audio>
????????????????
? ? ? ? 4.新增input標(biāo)簽
? ? ? ? ? ? ? ? 新增type語義類型。驗(yàn)證時(shí)必須添加form表單域，點(diǎn)擊提交按鈕就可以驗(yàn)證表單了。
? ? ? ? ? ? ? ? type="email" type="url" type="date" type="time" type="month" type="week" type="number" 限制用戶輸入，減少表單驗(yàn)證。type="tel"?電話type="search"?搜索框type="color"
? ? ? ? ? ? ? ? 主要number,tel,search（input：search）
? ? ? ? 5.新增表單標(biāo)簽屬性
? ? ? ? ? ? ? ? 必須包含在form表單域里。
? ? ? ? ? ? ? ? required="required"必填 placeholder=""提示文本 autofocus="autofocus"自動(dòng)聚焦表單 autocomplete="off/on"默認(rèn)顯示提交內(nèi)容(前提：表單有name屬性且之前提交過)? multiple="multiple"多選文件提交?。
? ? ? ? ? ? ? ? 主要placeholder和multiple。input::placeholder可改字體顏色。
新增CSS3特性
? ? ? ? ie9+支持，移動(dòng)端優(yōu)于PC端。新增選擇器，盒子模型，其他特性。
? ? ? ? 1.屬性選擇器
? ? ? ? ? ? ? ? input[value]{}
? ? ? ? ? ? ? ? input[value=text]{}? ? ? ? //重點(diǎn)
? ? ? ? ? ? ? ? input[value^=tex]{}? ? ? ? //值以tex開頭
? ? ? ? ? ? ? ? input[value$=tex]{}? ? ? ? //值以tex結(jié)尾
? ? ? ? ? ? ? ? input[value*=tex]{}? ? ? ? //值含tex
? ? ? ? ? ? ? ? 如果是數(shù)字要加""，不是數(shù)字可加可不加。
? ? ? ? 類選擇器，屬性選擇器，偽類選擇器權(quán)重為10(div[]權(quán)重是11)
? ? ? ? div.icon交集選擇器 是div且類名為icon的
? ? ? ? 2.結(jié)構(gòu)偽類選擇器
? ? ? ? ? ? ? ? 根據(jù)文檔結(jié)構(gòu)(兄弟，第幾個(gè))選擇：
? ? ? ? ? ? ? ? ul????????:first-child{}? ? ? ? //或ul???li:first-child? ? ? ? 第一個(gè)元素在li里，父元素是ul
? ? ? ? ? ? ? ? E????????:last-child{}? ? ? ? 最后一個(gè)子元素
? ? ? ? ? ? ? ? E????????:nth-child(n){}? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? n可以是數(shù)字，關(guān)鍵字，公式。
? ? ? ? ? ? ? ? ? ? ? ? 數(shù)字：E標(biāo)簽的第n個(gè)子元素，從1開始。? ? ? ? ul? ? ? ? li:nth-child(2){}
? ? ? ? ? ? ? ? ? ? ? ? 關(guān)鍵字：隔行變色? ? ? ? E? ? ? ? :nth-child(even偶/odd奇){}
? ? ? ? ? ? ? ? ? ? ? ? 公式：n從0開始每次加1往后計(jì)算，只能是n不能其他字母。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 因?yàn)闆]有第0個(gè)孩子和超出部分，會(huì)忽略掉。2n 2n+1 5+n(5~) -5+n(1~5)
? ? ? ? ? ? ? ? E? ? ? ? :first-of-type{}
? ? ? ? ? ? ? ? E? ? ? ? :last-of-type{}
? ? ? ? ? ? ? ? E? ? ? ? :nth-of-type(n){}
? ? ? ? E? ? li:first-child{}會(huì)把所有的孩子都排列序號(hào)，先看:first-child把元素選出來，再看元素是否是li
? ? ? ? E? ? li:first-of-type{}會(huì)看指定li標(biāo)簽的孩子，不滿足li標(biāo)簽不看
? ? ? ? 3.偽元素選擇器
? ? ? ? ? ? ? ? 用CSS創(chuàng)造標(biāo)簽元素，簡化HTML結(jié)構(gòu)。
? ? ? ? ? ? ? ? ::before{}? ? ? ? 在父元素內(nèi)容的前面創(chuàng)建元素。(CSS2用:也可以識(shí)別)
? ? ? ? ? ? ? ? ::after{}
? ? ? ? ? ? ? ? 會(huì)通過CSS的方式創(chuàng)建一個(gè)在文檔樹找不到的行內(nèi)元素，{}必須有content屬性，和標(biāo)簽選擇器一樣，權(quán)重1。
? ? ? ? 4.盒子模型
? ? ? ? ? ? ? ? 有寬高的padding,border會(huì)撐大盒子。
? ? ? ? ? ? ? ? box-sizing:"content-box/border-box"；
? ? ? ? ? ? ? ? content-box? ? ? ? 盒子最終大小為width+padding+border默認(rèn)；
? ? ? ? ? ? ? ? border-box? ? ? ? 盒子最終大小為 width,盒子不在隨border，padding撐大。(前提border+padding不超過width大小)，可以寫在*{}里。
? ? ? ? 此時(shí)垂直居中，line-height=height要減去padding和border。
? ? ? ? 5.CSS3其他特性
? ? ? ? ? ? ? ? 1. 圖片變模糊
? ? ? ? ? ? ? ? ? ? ? ? CSS濾鏡filter圖片變模糊或顏色偏移。
? ? ? ? ? ? ? ? ? ? ? ? filter:????????blur(5px);數(shù)越大越模糊
? ? ? ? ? ? ? ? 2. 計(jì)算盒子寬度width:calc()函數(shù)可運(yùn)算
? ? ? ? ? ? ? ? ? ? ? ? width:? ? ? ? calc(100% - 80px);? ? ? ? ? ? ? ? //+-*/符號(hào)的左右一定要有空格
? ? ? ? CSS3還有動(dòng)畫，2D，3D新特性。
? ? ? ? 1.CSS3過渡
? ? ? ? ? ? ? ? logo動(dòng)畫平移，漸變顏色，盒子升起加陰影。可以不使用flash和js。ie9+，不影響布局。
? ? ? ? ? ? ? ? 常:hover搭配使用。誰做過渡給誰加。
? ? ? ? ? ? ? ? transtion:? ??要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線(默認(rèn)ease) 何時(shí)開始(延遲觸發(fā)時(shí)間 默認(rèn)0);
? ? ? ? ? ? ? ? transtion:? ? ? ? all 1s ease 0.5s;? ? ? ? //時(shí)間必須寫單位s
? ? ? ? ? ? ? ? transtion:? ? ? ? width 1s,height 2s;
? ? ? ? ? ? ? ? 運(yùn)動(dòng)曲線? ? ? ? linear勻速 ease慢下?ease-in加速 ease-out減速 ease-in-out先加速再減速
? ? ? ? ?廣義HTML5=HTML5+CSS3+JavaScript? ? ? ? mdn查詢
品優(yōu)購
????????1.項(xiàng)目規(guī)劃
? ? ? ? ? ? ? ? 客戶溝通，制定方案；簽訂合同；預(yù)付訂金(不退，30%)；初稿審核(原型圖，效果圖)；前臺(tái)頁面設(shè)計(jì)，后端功能開發(fā)；測試驗(yàn)收；上線培訓(xùn)；后期維護(hù)。
? ? ? ? ? ? ? ? HTML，圖片，CSS，命名規(guī)范。
? ? ? ? ? ? ? ? HTML：屬性盡量值不簡寫，""，大小于，4空格，塊級(jí)換行寫，行內(nèi)同行寫。
? ? ? ? ? ? ? ? CSS：書寫順序。
? ? ? ? ? ? ? ? 命名：類名小寫_? ? 項(xiàng)目文件夾shoping；樣式圖片文件夾images；產(chǎn)品圖片文件夾upload；樣式文件夾css；字體類文件夾fonts；腳本類文件夾js
? ? ? ? ? ? ? ? ? ? ? ? 首頁index.html;初始化樣式文件base.css;公共樣式文件common.css
? ? ? ? ? ? ? ? *.模塊化：講一個(gè)項(xiàng)目按功能劃分，一個(gè)功能一個(gè)模塊互不影響，重復(fù)使用，更換方便。
? ? ? ? ? ? ? ? 如：頭部尾部在不同頁面一樣，可寫到common.css,再link進(jìn)來
? ? ? ? ? ? ? ? common.css:頭部尾部，版心寬度，清除浮動(dòng)，頁面文字顏色...
? ? ? ? ? ? ? ? *.favicon圖標(biāo)
? ? ? ? ? ? ? ? ? ? ? 步驟：1.制作favicon圖標(biāo)；2.favicon圖標(biāo)放在網(wǎng)站的根目錄下；3.HTML引入圖標(biāo)
? ? ? ? ? ? ? ? ? ? ??1:圖標(biāo)切成png格式；借助第三方網(wǎng)站png轉(zhuǎn)成ico? ? http://www.bitbug.net/比特蟲
? ? ? ? ? ? ? ? ? ?? ?3:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />/直接復(fù)制網(wǎng)站的
? ? ? ? ? ? ? ? 找圖標(biāo)：網(wǎng)站根目錄/favicon.ico? ? https://www.jd.com/favicon.ico
? ? ? ? ? ? ? ? *.SEO搜索引擎優(yōu)化，提升網(wǎng)站排名。頁面必須有title,description,keyword標(biāo)簽符合SEO優(yōu)化。復(fù)制SEO的關(guān)鍵詞。
????????????????????<title>品優(yōu)購</title>網(wǎng)站名(產(chǎn)品名)-網(wǎng)站的介紹
????????????????
????????????????????<meta?name="description"?content="">
????????????????????<meta?name="keywords"?content="">
?????????????????
首頁
? ? ? ? 1.shortcut行高會(huì)繼承，但只能讓文本等垂直居中，盒子不能
? ? ? ? 2.聲明字體圖標(biāo)讓common.css找到fonts路徑，不是index.html，要更換路徑
列表頁
注冊(cè)頁
發(fā)布上線
拓展篇
1.服務(wù)器：本地服務(wù)器，遠(yuǎn)程服務(wù)器
如果把電腦配成本地服務(wù)器，局域網(wǎng)的同學(xué)就可以訪問自己的網(wǎng)站了 ajax講
遠(yuǎn)程 誰都可以通過域名訪問，如www.mi.com
(電腦下小皮面板不用配置，當(dāng)服務(wù)器)
http://free.3v.do/王若琳
歡迎您使用免費(fèi)空間，本免費(fèi)空間僅支持HTML和ASP程序，如需更多功能可?購買收費(fèi)空間！
您的網(wǎng)站地址：http://wrl.3vhost.work
上傳方法：免費(fèi)空間-free.3v.do-幫助：免費(fèi)空間如何用FTP上傳文件?訪問方法：免費(fèi)空間-free.3v.do-幫助：免費(fèi)空間默認(rèn)首頁及上傳后的訪問方法
激活ftp
二 C3之轉(zhuǎn)換
1.2D轉(zhuǎn)換
轉(zhuǎn)換實(shí)現(xiàn)元素的位移，旋轉(zhuǎn)，縮放。
1.transform:translate(x,y); //100px 100px向右下移動(dòng)的目標(biāo)點(diǎn)相比初始0，0的坐標(biāo)
transform:translate(100px,0); //不能省略
translform:translateX(100px); //單個(gè)寫
最大的優(yōu)點(diǎn)：不會(huì)影響其他盒子的位置
2.transform:translate(50%);
里面參數(shù)可以用%，移動(dòng)的距離是盒子自身的寬高來對(duì)比的。
定位要計(jì)算，但是transform:translate()不會(huì)
對(duì)行內(nèi)元素沒有效果
2.rotate旋轉(zhuǎn)
transform:rotate(度數(shù));
度數(shù)單位deg不能省略，正值順時(shí)針
補(bǔ)充：
過度寫到本身上，誰做過度給誰加。
transition:all 1s;
3.1>
>可以先正方形旋轉(zhuǎn)45度，然后只要右邊兩條邊
不用下載，比>更好控制大小
3.2旋轉(zhuǎn)中心點(diǎn)
transform-origin:x y; 和bgp一樣，空格隔開，默認(rèn)50%,50%中心；可以設(shè)置成top center left，左上開始50px,50px
鼠標(biāo)放上，圖片上下移動(dòng)使用
?hover里的deg：? ? ? ? ? 是轉(zhuǎn)到多少deg，不是轉(zhuǎn)了多少deg
對(duì)行內(nèi)元素沒有效果
*。overflow:hidden;不占位置
3.縮放scale
transform:scale(x,y);
x軸y軸方向放大多少倍，所以里面跟數(shù)字，不是單位，2是兩倍；可以放大縮小
xy只寫一個(gè)數(shù)，是寬度和高度等比例縮放
1.直接用寬高放大縮小盒子：上邊框不移動(dòng)，左右下縮放，影響其他盒子布局
2.用transform:scale(x,y);放大縮小盒子：不會(huì)影響其他盒子，可以設(shè)置中心點(diǎn)
4.2D轉(zhuǎn)換綜合寫法（不會(huì)影響其他盒子）
transform:translate(50px,%)? rotate(180deg)? scale(1.1);
旋轉(zhuǎn)會(huì)導(dǎo)致坐標(biāo)軸改變，平移寫到最前面
二 css3動(dòng)畫
更多控制，可以連續(xù)自動(dòng)播放，(而2d要hover)
1.定義動(dòng)畫
? ?
keyframes關(guān)鍵幀%可以寫多個(gè)，有時(shí)0%可以省略；里面的百分比是總時(shí)間的劃分。
?三 3D
重點(diǎn)：3d位移transform:translate3D(x,y,z坐標(biāo))，3d旋轉(zhuǎn)transform:rotate3D(deg)。
? ? ? ? 透視perspective，3d呈現(xiàn)transform-style
1.transform:translate3d(x,y,zpx);
transform:translateX(常%。可px)；
transform:translateY();
transform:translateZ(常px);
transform:的都會(huì)后面把前面覆蓋，可以連寫
transform:translateX(px) translateY(%);
? ? ? ? 1.translateZ要通過透視perspective才能看到效果。
? ? ? ? 2.屬性名中X,Y,Z大寫，3d小寫。
? ? ? ? 3.使用3d連寫時(shí)，不能省略，沒有的軸的值要寫0
2.透視
? ? ? ? 人眼離物體(透視)：近大遠(yuǎn)小（只看到的），單位px
z是translateZ，d是透視，物體顯示大小由兩者共同決定.
但是一般父元素同一個(gè)透視，通過translateZ調(diào)整不同盒子不同大小。
透視寫在被觀察元素的祖先盒子上面
z為負(fù)值，結(jié)合實(shí)際考慮。默認(rèn)0?
?3.3d旋轉(zhuǎn)
transform:rotate3d(1，0，0，45deg);//沿著x軸旋轉(zhuǎn)45°，具體方向左手準(zhǔn)則
transform:translate(1,1,0,45deg);沿著x，y軸矢量方向旋轉(zhuǎn)45度。
?
transform:rotateX(deg);單杠，默認(rèn)延盒子中心。+透視
deg正值，上面變小往后翻。
transform:rotateY(deg);
transform:rotateZ(deg);
和2d旋轉(zhuǎn)沒啥區(qū)別，抽獎(jiǎng)轉(zhuǎn)盤
翻轉(zhuǎn)方向左手準(zhǔn)則（大拇指指向該軸正方向）：deg正值旋轉(zhuǎn)的方向
4.3d呈現(xiàn)transform-style:默認(rèn)子元素不開啟3d空間flat，需要設(shè)置。
transform-style:preserve-3d;只能直接加給父元素
瀏覽器私有前綴
最后一行寫沒私有前綴的總的代碼?
?
?
總結(jié)
以上是生活随笔為你收集整理的pink-css标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQLServer数据库获取重复记录中日
- 下一篇： 机器学习算法总结--朴素贝叶斯