CSS基礎知識總結之背景 尺寸 顯示 盒子 定位

2021-08-03 19:59:09 字數 2540 閱讀 5113

背景

(1)background-color:背景顏色

(2)background-image:url("路徑");

(3)background-repeat:複製屬性,幾個常用取值

①repeat,重複,預設

②no-repeat,不重複

③repeat-x,橫軸重複

④repeat-y,縱軸重複

⑤round,迴圈

(4)background-position:位置

①top,頂部

②bottom,底部

③right,右邊

④left,左邊

⑤center,中心

background-color: #a1ff54;

background-image: url("");

background-repeat:repeat-x;

background-position: center;

當然可以將一組屬性封裝到乙個屬性background中,表達更加簡潔。有書寫順序:

background-color background-image,background-repeat  background-position

background: gainsboro

url("") no-repeat right top; 尺寸

(1)height:高度

(2)width:寬度

div

(3)max-height最大高度

(4)max-width最大寬度

(5)min-height最小高度

(6)min-width最小寬度顯示

(1)隱藏元素的方法

①visibility:hidden,僅僅隱藏內容,該元素所佔的位置依然存在。

②dispaly:none,不僅隱藏內容,而且隱藏一切格式。

(2)display可以設定元素的顯示模式。

①inline,將塊級元素以內聯元素的形式顯示,通俗的講就是在一行顯示,此時width和height屬性無效,其空間取決於元素的內容。

②inline-block,將塊級元素以內聯的形式來顯示,同是兼具塊級元素的某些特徵,比如可以使用width和height屬性設定所佔位置大小。

③block,可以將內聯元素以塊級元素的形式來顯示,自己理解的就是可以換行。邊距

(1)margin外邊距

①margin:**px;表示上下左右外邊距都是**px

margin: 30px

margin-top

margin-right

margin-bottom

margin-left

③一起設定四個方向的外邊距,順序分別是上右下左。

margin: 10px 20px 30px 40px;

(2)padding內邊距,同margin

(3)border邊框

順序是border-width:10px;寬度
border-style 邊框的樣式
①solid實線
②dotted虛線
③double雙實線
④groove 凹槽。就像相框一樣,看著像立體的。
border-color: red;
border: 10px dashed red;

(4)outline輪廓

outline: 5px dotted gold; 定位

定位方式有:

static(靜態的),預設。無定位,元素正場出現在流中。

divdiv>靜態定位的演示

<.body>

fixed(固定的),

relative(相對的),

<style

type=

"text/css">

#div1

#div2

style>

<style

type=

"text/css">

#div1

#div2

style>

從結果可以看出,fixed定位會將元素從流中摘出來,定位取決去left和top

重新定位之後可能會出現重疊,通過z-index可以調整其順序,但是

#div1

#div2

#div2

#div3

style>

absolute(絕對的),絕對定位的元素也會從流中摘出來,依靠left屬性進行定位,與fixed類似,但是的參照物不同。fixed參照根元素(html),absolute參照物是父容器

#div1

#div2

#div3

style>

CSS基礎知識 backgroung(背景)

背景圖 background 縮寫形式 background color 背景顏色 語法 background color 顏色 background image 背景 語法 background image url background repeat 背景圖重複位置 其屬性值可以為 repeat ...

CSS基礎知識總結

1 使用css 2 css的優勢是容易修改樣式.標籤與css搭配起來使用能夠較好地修改格式。css中除了在標籤中編碼選擇器外,也可以在html本身的標籤中使用屬性來設定css格式。3 外部css的使用 4 css的優先順序基本原則是就近原則 因此在書寫是一般講外部式放在最前 在有相同權值的情況下,優...

css基礎知識總結

一.權重的比較 1.元素被選中 id選擇器 類選擇器 標籤選擇器 2.元素未選中 誰離目標近選誰 二.元素的居中 1.居中 文字居中 水平居中 單行 多行 屬性 text align center 垂直居中 單行文字 line height height 設定行高等於個高 多行文字 不設定高度,同時...