重要的CSS屬性總結

時間 2019-11-19

標籤重要 css 屬性總結欄目 CSS 简体版

原文原文鏈接

　　1.邊框盒模型和box-sizing屬性css

　　　　標準CSS盒模型規定width和height樣式屬性只包含內容區域，不包括內邊距和邊框。稱做「內容盒模型」。html

　　　　box-sizing:border-box將會變成邊框盒模型，即,height和widht包括內邊距和邊框。web

　　　　Chrome和Safari使用-webkit-box-sizing,Firefox使用-moz-box-sizing瀏覽器

<!DOCTYPE html>
<html>
    <body>
        <div id="myDiv">

        </div>
    </body>
</html>
<style>
    #myDiv{
        height: 100px;
        width: calc(50% - 8px); /*計算CSS值*/
        background-color: red;
        box-sizing: border-box;
        padding: 10px;
        border: solid black 2px;
    }
</style>

　　2.元素顯示和可見性字體

　　　visibility和display，區別在於visibility設置hidden時候會佔用位置，而display不會。spa

　　3.顏色、透明度和般透明度code

　　　(1)rgba()，alpha設置透明度，0~1。orm

　　　(2)background-color:transparent 能夠覆蓋默認顏色，變成透明的。htm

　　　(3)opacity,設置透明度0~1,CSS3標準屬性blog

　　　(4)filter:alpha(opacitry=75) IE設置透明度，沒有小數點

　　4.部分可見：overflow和clip

　　　visibility屬性能夠讓文檔元素徹底隱藏，而overflow和clip屬性容許只顯示元素的一部分。

　　　overflow可選屬性

　　　　　visible 默認值，若是須要，內容能夠溢出並繪製在元素的邊框外面

　　　　　hidden 裁減並隱藏溢出的內容

　　　　　scroll 元素一直顯示水平和垂直滾動條

　　　　　auto 滾動條只有在內容超出元素尺寸時纔出現，並不是一直顯示。

　　5.text-align只應用於塊級元素的內聯內容

　　6.七個水平屬性的總和等於父元素的width,只要全部屬性都是大於或等於0的，元素就不會大於其父元素的內容區。只有外邊距能夠爲負數。

　　　　百分數設置width、內邊距和外邊距：

　　　　　　假設你但願一個元素的內容時其包含元素寬度的三分之二，左右內邊距分別設置爲5%，左外邊距爲5%，剩下的就是右外邊距，即18%。

　　　　垂直屬性：

　　　　　　若是正常流中一個塊元素的margin-top或margin-bottom設置爲auto、它會自動計算爲0，也就是元素框沒有外邊距。對於定位元素來講，上下外邊距設置

　　　　　　auto，其處理會有所不一樣。七個垂直屬性加一塊兒等於父元素的width。

　　7.合併外邊距

　　8.行內元素：

　　　　width,height,內外邊距的top/bottom都無法設置

行內元素：
* a – 錨點
* abbr – 縮寫
* acronym – 首字
* b – 粗體(不推薦)
* big – 大字體
* br – 換行
* em – 強調
* font – 字體設定(不推薦)
* i – 斜體
* img – 圖片
* input – 輸入框
* label – 表格標籤
* s – 中劃線(不推薦)
* select – 項目選擇
* small – 小字體文本
* span – 經常使用內聯容器，定義文本內區塊
* strike – 中劃線
* strong – 粗體強調
* sub – 下標
* sup – 上標
* textarea – 多行文本輸入框
* tt – 電傳文本
* u – 下劃線
* var – 定義變量

　　9.塊級元素：

2.塊級元素
* address – 地址
* blockquote – 塊引用
* center – 舉中對齊塊
* dir – 目錄列表
* div – 經常使用塊級容易，也是css layout的主要標籤
* dl – 定義列表
* fieldset – form控制組
* form – 交互表單
* h1 – 大標題
* h2 – 副標題
* h3 – 3級標題
* h4 – 4級標題
* h5 – 5級標題
* h6 – 6級標題
* hr – 水平分隔線
* isindex – input prompt
* menu – 菜單列表
* noframes – frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容）
* noscript – ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
* ol – 排序表單
* p – 段落
* pre – 格式化文本
* table – 表格
* ul – 非排序列表

　　10.line-height

　　　　能夠應用於哪些元素：

　　　　line-height隻影響行內元素，並不能直接應用於塊級元素

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。