day05 css屬性相關筆記

2021-10-23 20:29:59 字數 2269 閱讀 6611

(1)預定義顏色:bule,red,black。。。

(2)十六進製制顏色:#0f0f0f

(3)rgb顏色(128,0,0)全紅

(4)rgba:在rgb的基礎上又新增了表示透明度的alpha

(5)hsi:用色調、飽和度、和透明度三個分量來表示顏色

(6)hsla:在his的基礎上又新增了表示透明度的alpha

**實現:

"color:blue"

>預定義顏色

"color: rgb(500,0,0);"

>rgb顏色

"color:#ffc0cb"

>16進製制顏色

background-color:背景顏色

background-image:背景

background-repeat:複製選項(repeat在水平,垂直兩個方向複製)

(repeat-x/y 在水平/垂直方向複製)

(no-repeat 不複製)

background-position:所在位置 上top 下bottom 左left 右right

簡寫:將所有元素放在一起

有順序要求:背景顏色->背景->重複方式->所在位置

(1) 固定高度與寬度(height:200px)

(2) 自適應高度(高度會根據內容的增加而增加)

(3) 指定最大高度max-height(內容增加到指定的高度的時候就不會增加,自動換行)

(4) 指定最小高度min-height(開始時高度固定,內容增加到一定地步時開始增加高度)

(1)visibility:hidden 僅僅隱藏內容,該元素所佔位置依然存在

(2)display:none 不僅隱藏內容,而且隱藏位置

display:inline將塊級元素以內聯元素形式顯示,此時寬,高等屬性對其無效

display:inline-block將塊級元素以內聯元素形式顯示並且具有塊級元素的特徵,寬,高

屬性依然有效

display:block將內聯元素以塊級元素的形式展現

margin:外邊距

margin-top(上)margin-bottom(下)margin-left(左)margin-right(右)

常用方式:

(1)margin:30px,表示上下左右外邊距都設定30px

(2)margin-left:30px,表示設定距離左方30px

(3)margin:10px 20px 10px 20px 分別設定上右下左四個邊的邊距,順序按照順時針方向

(4)margin:20px 30px 分別設定上下邊距為20px,左右邊距為30px

padding:內邊距

與margin類似 上下左右邊距都有

border:邊框

如果想讓兩個盒子在一行內,那麼兩個盒子都需要浮動(float)並且給他們的父親清除浮動

什麼是父類:box是div1和div2的父類

css字型屬性相關。

出處 css 參考手冊 說明 這個屬性允許對文字設定某種效果,如加下劃線。如果後代元素沒有自己的裝飾,祖先元素上設定的裝飾會 延伸 到後代元素中。不要求使用者 支援 blink。可能的值 描述 none 預設。定義標準的文字。underline 定義文字下的一條線。overline 定義文字上的一條...

css字型屬性相關。

出處 css 參考手冊 說明 這個屬性允許對文字設定某種效果,如加下劃線。如果後代元素沒有自己的裝飾,祖先元素上設定的裝飾會 延伸 到後代元素中。不要求使用者 支援 blink。可能的值 描述 none 預設。定義標準的文字。underline 定義文字下的一條線。overline 定義文字上的一條...

前端 CSS屬性相關

width 屬性可以為標籤設定寬度 height 屬性可以為標籤設定高度 注意 塊級標籤才能設定寬度,行內標籤的寬度由內容決定 文字型別 font family可以選擇文字的型別 比如 微軟雅黑 宋體 楷體 p字型大小 font size 控制字型大小 p字重 粗細 font weight 用來設定...