Web前端基礎知識整理-CSS篇

邱勇發布于2019-08-29 15:21 / 1091人閱讀

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

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

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

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

id選擇符(E#id):以唯一標識符id屬性等于id的E對象作為選擇符

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

二、關系選擇符

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

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

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

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

三、屬性選擇符

四、偽類選擇符

五、偽對象選擇符

優先級：
標簽選擇符、偽類與偽對象：權重為1。
類選擇符、屬性選擇符：權重為10。
ID選擇符：權重為100。
內聯style屬性：權重為1000。
!important：權重為無窮。

盒模型
一、基本概念：盒模型由里向外是由：content、padding、border、margin構成的。
二、類型：標準盒模型、IE模型

標準盒模型：width=content

          height=content

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

        height=content+padding+border

三、CSS設置兩種模型

/* 標準模型 */
box-sizing:content-box;

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

定位
一、定位position分類

static默認值，沒有定位，元素出現在正常的流中。

absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

relative：生成相對定位的元素，相對于其正常位置進行定位。

fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。

inherit：規定應該從父元素繼承 position 屬性的值。

尺寸單位
一、文本相對長度單位

em（CSS1）：相對于當前對象內文本的字體尺寸

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

ex（CSS1）：相對長度單位。相對與支付"x"的高度，通常為字體高度的一半。

ch（CSS3）：相對與數字“0”的寬度

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

二、視口相對長度單位

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

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

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

GPU云服務器云服務器 web前端基礎 web前端零基礎零基礎web前端 web前端0基礎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113268.html

前端開發-從入門到Offer - 收藏集 - 掘金

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

sf_wangchong 2019-08-20 16:10 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

muddyway 2019-08-29 13:21 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

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

madthumb 2019-08-23 14:15 評論0 收藏0