CSS04 css的屬性 列表,浮動,邊框

2021-09-17 20:27:09 字數 1211 閱讀 3826

css列表屬性:

有列表屬性的列表一般指ul ol不包含自定義列表

list-style-type:定義列表符號樣式

屬性值:none(去掉列表符號)

list-style:複合式寫法

屬性值:none(去掉所有列表樣式)

注:一般css中的列表樣式全部去除

css的浮動屬性*

浮動:特點:1:不佔據空間

2:如果讓多個元素橫向排列,這些元素都要新增浮動

3:如果新增浮動的總寬超過父元素,最後乙個子元素會被擠下來.

float:浮動

left(左浮動)

right(右浮動)

none(不浮動)    

注:只要子元素有浮動,父元素一定新增高度

邊框屬性:

1:border-style:線型(實線/虛線)

屬性值:solid(實線)*

dashed(虛線)

dotted(點狀線)

double(雙線)

none(沒有邊框)

2:border-width:邊框的寬度

屬性值:數值(10px)

位置:乙個值:四周

兩個值:上下 左右

三個值:上 左右 下

四個值:上 右 下 左

3:border:復合屬性

屬性值:邊框的大小  邊框的樣式(實線/虛線)  邊框的顏色

4:給單一方向新增邊框:

border-left/right/top/bottom:

屬性值:邊框的大小  邊框的樣式  邊框的顏色

5:transparent:代替顏色值為透明

6:使用邊框切乙個向上的三角形

優點:在移動端使用**實現比實現載入要少消耗流量

思路:確定邊框的位置,給要切的邊框設定大小,顏色;將要切的邊框兩端的邊框顏色設為透明色(transparent)

border-bottom: 20px solid red;

border-left:15px solid transparent;

border-right: 15px solid transparent;

浮動屬性CSS

這是第1個盒子 這是第2個盒子 這是第3個盒子 這是乙個div1 這是乙個div2 這是乙個span1 這是乙個span2 浮動的盒子可以向左浮動,也可以向右浮動,直到它的外邊緣碰到包含框或另乙個浮動盒子為止。本網頁中共有三個,分別代表日用品 圖書和鞋子。這裡使用這三個和本段文本來演示講解浮動在網頁...

css浮動屬性

1 為什麼需要浮動 html中的標籤元素大致分為三類 塊狀元素 內聯元素 內聯塊元素。每種元素都有其各自的特點,其中塊狀元素會獨佔一行,而內聯元素和內聯塊元素則會在一行內顯示。如果我們想讓兩個甚至多個塊狀元素在同一行顯示,這就需要用到css的浮動屬性。2 什麼是浮動 float 浮動 float 是...

css浮動屬性

浮動屬性使用非常多 一般為垂直排布的瀑布流,但是如果使用浮動主題就可以將垂直變為水平 如果一行的寬度不夠就會換行顯示 浮動主要為了脫離文件流 垂直排列 語法 選擇符 特點 1.div塊元素失去 塊狀 換行顯示特徵,變為行內元素 2.緊貼上乙個浮動元素 同方向 或父級元素的邊框,如寬度不夠將換行顯示 ...