Css基本知識總結3(float)

2021-10-04 20:25:28 字數 1009 閱讀 6704

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 在這裡特別要注意...