day46

目錄

• 標籤設置長寬
• 字體顏色 color後面能夠跟不少種顏色數據
• 06a0de 直接用pycharm提供的吸管工具取色
• 取消a標籤默認的下劃線
• 背景圖片 默認是鋪滿整個區域
• 邊框
• 盒子模型
• 浮動
• 如何解決父標籤坍塌問題？
• overflow溢出屬性
• 定位

標籤設置長寬

只有快級標籤才能設置長寬

行內標籤設置了沒有任何做用

字體顏色 color後面能夠跟不少種顏色數據

顏色英文形式 red

06a0de 直接用pycharm提供的吸管工具取色

rgb（1,1,1） 能夠利用截圖軟件獲取三基色數字

rgba（128,128,128,0.3） 最後一個數字 只能用來調節顏色的透明度

取消a標籤默認的下劃線

a {

text-decoration:none;

}

背景圖片 默認是鋪滿整個區域

一般一個頁面上的一個個小的圖標 並非單獨的

是一張大的圖片 該圖片上有網址所用的全部的小圖標

經過控制背景圖片的位置 來顯示不一樣的圖標樣式

邊框

border 後面寫三個參數 位置 沒有關係

顏色

字體

樣式

能夠單獨設置 樣式 顏色 粗細

border-top-style：dotted

border-top-color：red

border-right-style ：solid

border-bottom-style：dotted

border-left-style ：none

能夠設置某一邊的樣式

/*border-top: 3px solid red;*/
    /*border-left: 1px dotted green;*/
    /*border-right: 5px dashed blue;*/
    /*!*border-bottom: 10px solid pink;*!*/
    
    也能夠簡寫統一設置
            border: solid 10px red;

display

inline  將塊級標籤變成行內標籤
block 能將行內標籤  設置成長寬和獨佔一行
inline-block 既能夠設置長寬  也能夠設置一行展現

display：none  隱藏標籤  而且標籤原來佔的位置也沒了
visibility：hidden  隱藏標籤 可是標籤原來的位置還在

盒子模型

谷歌瀏覽器body默認有8px外邊框

body {
            margin:0px;
        }

以快遞盒子爲例

兩個快遞盒子之間的距離（標籤與標籤之間的距離） 外邊距（margin）

快遞盒子的厚度（邊框） 邊框border

物品之間的距離 （內部文本與內邊框之間的距離） 內邊框（padding）

物品的大小 （文本的大小） 內容（content）

margin: 10px 20px 30px 40px;  /*上  右   下  左*/
            padding簡寫規律跟margin同樣

#d1 {
            margin: 0 auto;
        }
        只能左右居中  不能上下居中

浮動

float 在css中 ，任何元素均可以浮動

浮動的元素 是脫離正常文檔流的（原來的位置會讓出來）

瀏覽器會優先展現文本的內容

浮動帶來的影響

會形成父標籤塌陷（相似於口袋癟了）

如何解決父標籤坍塌問題？

.clearfix:after{
content：‘’；
clear：both；/左右兩邊都不能有浮動的元素
display：block；
}
哪一個父標籤坍塌就給誰加clearfix這個類的屬性值

overflow溢出屬性

overflow:hidden；溢出的直接隱藏
overflow：auto  能夠滾動

定位

全部的標籤默認都是靜態的 沒法改變位置

position：static

必須將靜態的狀態修改爲定位以後

相對定位，relative

相對於標籤原來的位置移動

絕對定位（小米的購物出）absolute

相對於已經定位過（只要不是static均可以relative）的父標籤 再作定位

固定定位（回到頂部）fixed

相對於瀏覽器 固定在某個位置不動

位置是否脫離文檔流

不脫離文檔流

相對定位

脫離文檔流

浮動的元素

絕對定位

固定定位