day 3
border-radious:px|%(各個角都可設定)
box-shadow:h-shadow 、v-shadow(blur\spread\color]inset)
其中,h-shadow和v-shadow是必選的,分別是水平陰影的位置和垂直陰影的位置可以為負值,blur為模糊距離(虛到實),color為陰影顏色,inset是將outset(預設為外部陰影 並且外部陰影不能寫 )外部陰影改為內部陰影,spread 陰影的尺寸
text-shadow:h-shadow\v-shadow blur color
方式1:普通流(標準流/文件流):標籤按照規定好的預設方式排列ul、dl、form、table....
2.浮動
3.定位
實際開發中乙個頁面基本都包含了這三種布局方式
(多個塊級盒子如果縱向排列找標準流,多個會計盒子橫向排列找浮動)
definition:float屬性用於建立浮動框,將其移動到一邊,直到左邊緣或右邊緣觸及到包含快或另乙個浮動框的邊緣
float:left|right|none
背景:讓多個盒子在一行中顯示
如果利用inline-block的話,盒子當中會有縫隙,不容易控制
很多的布局效果,標準流無法完成,此時就可以利用浮動來完成布局,因為浮動可以改變元素標籤的預設排列方式
浮動典型應用之一就是讓多個盒子在一行當中顯示
①脫硫標準普通流的控制(浮)移動到指定位置(動)-->脫標
②浮動的盒子不在保留原先的位置
如果多個盒子都設定了浮動,則它們會按照屬性值一行內顯示並且頂端對齊排列(除非一行裝不開才會另起一行來顯示),高度不一樣也是頂端對齊
任何元素都可以浮動,不管原先什麼模式的元素,新增浮動之後都具有行內塊元素的相似特性,所以說當行內元素有了浮動之後就不用再將其轉換了(行內塊元素不給寬度的話是由本身的內容來撐開的)
為了約束浮動元素的位置,我們網頁布局一般採取的策略是:先用標準流的父元素排列上下位置,然後,內部的子元素採取浮動排列左右位置,符合網頁布局的第一準則
CSS基本知識總結
day 1 eg.eg.不獨佔一行,一行可以顯示多個 高 寬 外邊距及內邊距不可以自行控制,無效果 寬度預設為自己的寬度 靠自己把它撐開 只能容納文字或其他行內元素 注 鏈結不能巢狀鏈結 特殊情況下可以包含塊級元素 其實就是某些行內元素具有塊狀元素的某些特點,比如img input和td form等...
CSS基本知識總結2 1
簡單點來說盒子模型就是把html中的布局元素看作是乙個矩形的盒子 css盒子模型本質上是乙個盒子,封裝周圍的html元素,它包括以上的內容 由邊框寬度 樣式以及顏色組成 add 的細線邊框border collapse 控制相鄰單元格的邊框 collapse屬性值表示相鄰邊框合併 給 設定邊框時會出...
CSS基本知識
選擇符表示要定義樣式的物件,可以是元素本身,也可是一類元素或制定名稱的元素 在css選擇符中,大致可有10種 類選擇符 id選擇符 class選擇符 萬用字元 群組選擇符 包含選擇符 偽類選擇符 偽物件選擇符 關於選擇符的權重問題,css中用四位數來表示權重,權重的表示式如0000 在這裡特別要注意...