成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Web前端基礎(chǔ)知識(shí)整理-CSS篇

邱勇 / 1200人閱讀

摘要：標(biāo)簽標(biāo)簽自定義盒模型一基本概念盒模型由里向外是由構(gòu)成的。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。相對(duì)與支付的高度，通常為字體高度的一半。視口被平均分為單位的相對(duì)于視口的高度。

CSS手冊(cè)：http://t.mb5u.com/css3/
選擇器
一、元素選擇符

通配選擇符(*):選擇所有元素

類型選擇符(E)：以文檔對(duì)象類型作為選擇符

id選擇符(E#id):以唯一標(biāo)識(shí)符id屬性等于id的E對(duì)象作為選擇符

class選擇符(E.class):以class屬性包含class的E對(duì)象作為選擇符

二、關(guān)系選擇符

包含選擇符(E F):選擇所有被E元素包含的F元素

子選擇符(E>F):選擇所有作為E元素的子元素F。

相鄰選擇符(E+F):選擇緊貼再E元素之后F元素。

兄弟選擇符(E~F):選擇E元素后面的所有兄弟元素F。

三、屬性選擇符

四、偽類選擇符

五、偽對(duì)象選擇符

優(yōu)先級(jí)：
標(biāo)簽選擇符、偽類與偽對(duì)象：權(quán)重為1。
類選擇符、屬性選擇符：權(quán)重為10。
ID選擇符：權(quán)重為100。
內(nèi)聯(lián)style屬性：權(quán)重為1000。
!important：權(quán)重為無窮。

p

盒模型
一、基本概念：盒模型由里向外是由：content、padding、border、margin構(gòu)成的。
二、類型：標(biāo)準(zhǔn)盒模型、IE模型

標(biāo)準(zhǔn)盒模型：width=content

          height=content

IE盒模型：width=content+padding+border

        height=content+padding+border

三、CSS設(shè)置兩種模型

/* 標(biāo)準(zhǔn)模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

定位
一、定位position分類

static默認(rèn)值，沒有定位，元素出現(xiàn)在正常的流中。

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

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

fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

inherit：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

尺寸單位
一、文本相對(duì)長(zhǎng)度單位

em（CSS1）：相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸

如果body的font-size：設(shè)置為14px，那么1em = 14px

ex（CSS1）：相對(duì)長(zhǎng)度單位。相對(duì)與支付"x"的高度，通常為字體高度的一半。

ch（CSS3）：相對(duì)與數(shù)字“0”的寬度

rem（CSS3）：相對(duì)于根元素（html元素）font-size的計(jì)算倍數(shù)
如果html的font-szie：設(shè)置為14px，那么1rem = 14px

二、視口相對(duì)長(zhǎng)度單位

vw（CSS3）：相對(duì)于視口的寬度。視口被平均分為100單位的vw

vh（CSS3）: 相對(duì)于視口的高度。視口被平均分為100單位的vh

vm（CSS3）: 相對(duì)于視口的寬度或高度。對(duì)于視口的寬度或高度，總是相對(duì)于小的那個(gè)。視口的寬度或高度被均分為100單位的vm

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113268.html

相關(guān)文章

  • 前端開發(fā)-從入門到Offer - 收藏集 - 掘金

    摘要：一些知識(shí)點(diǎn)有哪些方法方法前端從入門菜鳥到實(shí)踐老司機(jī)所需要的資料與指南合集前端掘金前端從入門菜鳥到實(shí)踐老司機(jī)所需要的資料與指南合集歸屬于筆者的前端入門與最佳實(shí)踐。 工欲善其事必先利其器-前端實(shí)習(xí)簡(jiǎn)歷篇 - 掘金 有幸認(rèn)識(shí)很多在大廠工作的學(xué)長(zhǎng)，在春招正式開始前為我提供很多內(nèi)部推薦的機(jī)會(huì)，非常感謝他們對(duì)我的幫助?，F(xiàn)在就要去北京了，對(duì)第一份正式的實(shí)習(xí)工作也充滿期待，也希望把自己遇到的一些問題和...

    sf_wangchong 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    muddyway 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評(píng)論0 收藏0

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

    摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...

    madthumb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<