一些重溫CSS須要注意的小細節

<!-- CSS是用於描述頁面展現的語言

       字體、顏色、大小、間距，將內容分爲多列

       或者簡單的動畫及其餘的裝飾效果

       決定了長啥樣

       html房子的骨架

       css負責裝修

       怎麼裝修一個房子呢？

       首先就是佈局

       臥室，客廳，廚房，廁所分別在哪，劃分好位置是大前提

       用<div></div>標籤去分塊 

       去掉css代碼後的頁面樣式？

       查看源代碼

       爲網頁添加樣式 -->

 

 /* 選擇器：選中元素

                      1 選中對應id值的元素，這個id的值是惟一的值

                      2 元素選擇器，只要是該元素所有選中 

                      3 類選擇器 使用範圍最廣的 敲級靈活 可同時使用多個類

                      */

 

                      /* css代碼書寫位置 樣式

                      1 內部樣式表//樣式比較少 200行之內 少一個文件 反而是提升反應速度

                        放在style元素裏 最好在head裏面 這樣就能夠提早加載出來，也能夠放在後面，可是逐漸加載出來。。就emmm

                      2 內聯樣式表 //。。。。最好不用，js裏面還有。。用處吧，如今是實在沒用

                        直接寫在body的每一個標籤裏 

                      3 外部樣式表

                        寫在獨立的css文件中

                        1 解決多頁面樣式重複的問題//儘可能避免重複代碼   相同代碼寫一塊，單獨導入   

                        2 有利於瀏覽器緩存，從而提升頁面響應速度//重複打開就不用再讀一遍

                        3 有利於代碼分離（HTML和CSS）更容易維護和閱讀  每次都單獨修改

 

                        */

 

 

<!-- 層疊

 

聲明衝突，同一個樣式，屢次應用到同一個元素中 

    <a> color red 打開瀏覽器 覆蓋掉了默認樣式

    直接在瀏覽器中加text-decoration：none

 

    那你看它叫衝突，是否是就是很差，就要避免呢？

    其實不是啊，就是要好好利用這個衝突

 

    層疊 解決聲明衝突的過程，這個過程是瀏覽器自動解決的（權重計算）

 

    （就像絕地求生，最後只能有一個樣式勝出，最後呈現給咱們）

 

    1 比較重要性

       重要性從高到低

       1做者樣式表中的！important樣式   就是在屬性後加入！important

             做者樣式表：開發者書寫的樣式   (比較少使用，由於泰無敵了，除非萬不得已)

       2做者樣式表中的普通樣式

       3瀏覽器默認樣式表

 

    若是重要性比較好了就不用進行後面的了，要是重要性同樣就繼續往下走

 

    2 比較特殊性

      整體規則  看選擇器

                選擇器選中的範圍越窄越特殊

      具體規則  經過選擇器計算出一個四位數（XXXX）進行比較

 

      1  千位 若是是內聯樣式 記爲1 不然記爲0

      2 百位 等於全部id選擇器的數量

      3 十位 等於選擇器中全部類選擇器，屬性選擇器，僞類選擇器的數量

      4 個位 等於選擇器中全部元素選擇器，僞元素選擇器的數量

 

      逢256進1

 

    3 比較源次序

      代碼書寫靠後的勝出

    

-->

 

 

 

 

 

 

<!-- 繼承

子元素會繼承父元素的某些CSS屬性

把這個頁面所有的文字一塊兒改變

在 div里加class="container"

li繼承ulul繼承div

只有某些會屬性才能繼承

一般，跟文字內容相關的屬性都能被繼承 font-啥啥啥的 -->

 

 

<!-- 盒模型！！！

box：盒子，每一個元素在頁面中都會生成一個矩形區域（盒子）才能進行佈局

 

盒子類型：

 

1 行盒 display等於inline的元素

2 塊盒 display等於block的元素

 

行盒在頁面中不換行，塊盒獨佔一行 

 

display默認類型爲inline

能夠本身改

 

瀏覽器默認樣式表中設置的塊盒就有：容器元素（div。。）h1-h6 p

                      行盒     span a imag video audio  一般是一些文本元素

 

盒子的組成部分

從內到外

 

1 內容 content  裝的內容 文字啥啥啥的

   

width height 設置的是盒子內容的寬高

 

內容部分一般叫作整個盒子的內容盒  content-box

 

2 填充 padding   盒子和包裹中的空隙 就是泡沫啊啥的

 

盒子邊框到盒子內容的距離   尺寸

padding-left  padding-right padding-top padding-bottom

設置背景顏色

直接瀏覽器裏面改 padding-left

 

padding 簡寫屬性

 

padding 上右下左 50 30 50 30 簡寫屬性，最後仍是會轉換爲四個

也有多種寫法

 

填充區+內容區=填充盒 padding-box

 

3 邊框 border    盒子自己

 

   邊框=邊框樣式+邊框寬度+邊框顏色

 

   border-style

   border-width

   border-color

 

   都是縮寫屬性  可分爲四個

 

   邊框+填充區+內容區=邊框盒子 border-box

 

4 外邊距 margin  盒子與盒子之間的距離   佈局

   margin-top margin-left margin-right margin-bottom

-->