整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS Float(浮動)

          么是 CSS Float(浮動)?

          CSS 的 Float(浮動),會使元素向左或向右移動,其周圍的元素也會重新排列。

          Float(浮動),往往是用于圖像,但它在布局時一樣非常有用。


          元素怎樣浮動

          元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。

          一個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

          浮動元素之后的元素將圍繞它。

          浮動元素之前的元素將不會受到影響。

          如果圖像是右浮動,下面的文本流將環繞在它左邊:

          實例

          img

          {

          float:right;

          }


          彼此相鄰的浮動元素

          如果你把幾個浮動的元素放到一起,如果有空間的話,它們將彼此相鄰。

          在這里,我們對圖片廊使用 float 屬性:

          實例

          .thumbnail

          {

          float:left;

          width:110px;

          height:90px;

          margin:5px;

          }


          清除浮動 - 使用 clear

          元素浮動之后,周圍的元素會重新排列,為了避免這種情況,使用 clear 屬性。

          clear 屬性指定元素兩側不能出現浮動元素。

          使用 clear 屬性往文本中添加圖片廊:

          實例

          .text_line

          {

          clear:both;

          }

          嘗試一下 ?

          更多實例

          為圖像添加邊框和邊距并浮動到段落的左側

          讓我們為圖像添加邊框和邊距并浮動到段落的左側

          標題和圖片向右側浮動

          讓標題和圖片向右側浮動。

          讓段落的第一個字母浮動到左側

          改變樣式,讓段落的第一個字母浮動到左側。

          創建一個沒有表格的網頁

          使用 float 創建一個網頁頁眉、頁腳、左邊的內容和主要內容。


          CSS 中所有的浮動屬性

          "CSS" 列中的數字表示不同的 CSS 版本(CSS1 或 CSS2)定義了該屬性。

          屬性描述CSS
          clear指定不允許元素周圍有浮動元素。leftrightbothnoneinherit1
          float指定一個盒子(元素)是否可以浮動。leftrightnoneinherit1

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          文首發自「慕課網」,想了解更多IT干貨內容,程序員圈內熱聞,歡迎關注!

          作者| 慕課網精英講師 Lison

          這篇文章我們了解一下 JavaScript 中現有的八個數據類型,當然這并不是 JavaScript 中的所有數據類型,而是現在版本的 TypeScript 支持的基本類型,在學習基礎類型之前,我們先來看下如何為一個變量指定類型:

          為一個變量指定類型的語法是使用"變量: 類型"的形式,如下:

          let num: number = 123

          如果你沒有為這個變量指定類型,編譯器會自動根據你賦給這個變量的值來推斷這個變量的類型:

          let num = 123
          num = 'abc' // error 不能將類型“"123"”分配給類型“number”

          當我們給num賦值為123但沒有指定類型時,編譯器推斷出了num的類型為number數值類型,所以當給num再賦值為字符串"abc"時,就會報錯。

          這里還有一點要注意,就是numberNumber的區別:TS中指定類型的時候要用number,這個是TypeScript的類型關鍵字。而Number為JavaScript的原生構造函數,用它來創建數值類型的值,它倆是不一樣的。包括你后面見到的stringboolean等都是TypeScript的類型關鍵字,不是JavaScript語法,這點要區分開。接下來我們來看下,這八個JS中你見過的類型。

          2.1.1 布爾類型

          類型為布爾類型的變量的值只能是 true 或 false,如下:

          let bool: boolean = false;
          bool = true;
          bool = 123; // error 不能將類型"123"分配給類型"boolean"

          當然了,賦給 bool 的值也可以是一個計算之后結果是布爾值的表達式,比如:

          let bool: boolean = !!0
          console.log(bool) // false

          2.1.2 數值類型

          TypeScript 和 JavaScript 一樣,所有數字都是浮點數,所以只有一個number類型,而沒有int或者float類型。而且 TypeScript 還支持 ES6 中新增的二進制和八進制數字字面量,所以 TypeScript 中共支持二、八、十和十六四種進制的數值。

          let num: number;
          num = 123;
          num = "123"; // error 不能將類型"123"分配給類型"number"
          num = 0b1111011; //  二進制的123
          num = 0o173; // 八進制的123
          num = 0x7b; // 十六進制的123

          2.1.3 字符串

          字符串類型中你可以使用單引號和雙引號包裹內容,但是可能你使用的 tslint 規則會對引號進行檢測,使用單引號還是雙引號可以在 tslint 規則里配置。你還可以使用 ES6 語法——模板字符串,拼接變量和字符串更為方便。

          let str: string = "Lison";
          str = "Li";
          const first = "Lison";
          const last = "Li";
          str = `${first} ${last}`;
          console.log(str) // 打印結果為:Lison Li

          另外還有個和字符串相關的類型:字符串字面量類型。即把一個字符串字面量作為一種類型,比如上面的字符串"Lison",當你把一個變量指定為這個字符串類型的時候,就不能再賦值為其他字符串值了,如:

          let str: 'Lison'
          str = 'haha' // error 不能將類型“"haha"”分配給類型“"Lison"”

          2.1.4 數組

          在 TypeScript 中有兩種定義數組的方式:

          let list1: number[] = [1, 2, 3];
          let list2: Array<number> = [1, 2, 3];

          第一種形式通過number[]的形式來指定這個類型元素均為number類型的數組類型,這種寫法是推薦的寫法,當然你也可以使用第二種寫法。注意,這兩種寫法中的number指定的是數組元素的類型,你也可以在這里將數組的元素指定為任意類型。如果你要指定一個數組里的元素既可以是數值也可以是字符串,那么你可以使用這種方式:number|string[],這種方式我們在后面學習聯合類型的時候會講到。

          當你使用第二種形式定義時,tslint 可能會警告讓你使用第一種形式定義,如果你就是想用第二種形式,可以通過在 tslint.json 的 rules 中加入"array-type": [false]關閉 tslint 對這條的檢測。

          后面我們講接口的時候,還會講到數組的一個特殊類型:ReadonlyArray,即只讀數組。

          2.1.5 null 和 undefined

          null 和 undefined 有一些共同特點,所以我們放在一起講。說它們有共同特點,是因為在 JavaScript 中,undefined 和 null 是兩個基本數據類型。在 TypeScript 中,這兩者都有各自的類型即 undefined 和 null,也就是說它們既是實際的值,也是類型,來看實際例子:

          let u: undefined = undefined;// 這里可能會報一個tslint的錯誤:Unnecessary initialization to 'undefined',就是不能給一個值賦undefined,但我們知道這是可以的,所以如果你的代碼規范想讓這種代碼合理化,可以配置tslint,將"no-unnecessary-initializer"設為false即可
          let n: null = null; 

          默認情況下 undefined 和 null 可以賦值給任意類型的值,也就是說你可以把 undefined 賦值給 void 類型,也可以賦值給 number 類型。當你在 tsconfig.json 的"compilerOptions"里設置了"strictNullChecks": true時,那必須嚴格對待。undefined 和 null 將只能賦值給它們自身和 void 類型,void類型我們后面會學習。

          2.1.6 object

          object 在 JS 中是引用類型,它和 JS 中的其他基本類型不一樣,像 number、string、boolean、undefined、null 這些都是基本類型,這些類型的變量存的是他們的值,而 object 類型的變量存的是引用,看個簡單的例子:

          let strInit = "abc";
          let strClone = strInit;
          strClone = "efg";
          console.log(strInit); // 'abc'
          
          let objInit = { a: "aa" };
          let objClone = objInit;
          console.log(objClone) // {a:"aa"}
          objInit.a = "bb";
          console.log(objClone); // { a: 'bb' }

          通過例子可以看出,我們修改 objInit 時,objClone 也被修改了,是因為 objClone 保存的是 objInit 的引用,實際上 objInit 和 objClone 是同一個對象。

          當我們希望一個變量或者函數的參數的類型是一個對象的時候,使用這個類型,比如:

          let obj: object
          obj = { name: 'Lison' }
          obj = 123 // error 不能將類型“123”分配給類型“object”

          這里有一點要注意了,你可能會想到給 obj 指定類型為 object 對象類型,然后給它賦值一個對象,后面通過屬性訪問操作符訪問這個對象的某個屬性,實際操作一下你就會發現會報錯:

          let obj: object
          obj = { name: 'Lison' }
          console.log(obj.name) // error 類型“object”上不存在屬性“name”

          這里報錯說類型 object 上沒有 name 這個屬性。如果你想要達到這種需求你應該使用我們后面章節要講到的接口,那 object 類型適合什么時候使用呢?我們前面說了,當你希望一個值必須是對象而不是數值等類型時,比如我們定義一個函數,參數必須是對象,這個時候就用到object類型了:

          function getKeys (obj: object) {
              return Object.keys(obj) // 會以列表的形式返回obj中的值
          }
          getKeys({ a: 'a' }) // ['a']
          getKeys(123) // error 類型“123”的參數不能賦給類型“object”的參數

          這里你要明白object類型的使用。

          2.1.6 symbol

          Symbol 是 ES6 加入的新的基礎數據類型,因為它的知識比較多。

          本節小結

          本篇文章我們總結了八個在JavaScript中我們就見過的數據類型,它們是:布爾類型、數值類型、字符串、數組、null、undefined、object以及ES6中新增的symbol。在TypeScript中它們都有對應的類型關鍵字,對應關系為:

          • 布爾類型:boolean
          • 數值類型:number
          • 字符串類型:string
          • 數組:Array<type>或type[]
          • 對象類型:object
          • Symbol類型:symbol
          • null和undefined:null 和 undefined,這個比較特殊,它們自身即是類型

          這些類型是基礎,我們后面的高級類型很多都是它們的組合或者變形,所以一定要把這些基礎先學會。

          歡迎關注「慕課網」,發現更多IT圈優質內容,分享干貨知識,幫助你成為更好的程序員!

          、有float屬性的元素會跑

          代碼:<div id="box1"></div>

          <div id="box2"></div>

          <div id="box3"></div>

          CSS:div{ width: 50px; height: 50px; }

          #box1{background: blue; float: left;}

          #box2{ background: red;float: left; }

          #box3{background: black;float: left; }

          在瀏覽器中的樣式:

          從圖中可以看出,div本為塊級標簽,本應各自占一行,但是添加浮動屬性之后,都向左浮動,跑到了一排。

          二、如果上一行沒有float元素,那么float元素是跑不上去的

          代碼:<div id="box1"></div>

          <div id="box2"></div>

          <div id="box3"></div>

          CSS:div{ width: 50px; height: 50px; }

          #box1{background: blue;}

          #box2{ background: red;float: left; }

          #box3{background: black;float: left; }



          從圖中可以看出,div1沒有floa屬性,所以div2不能浮動上去;而div2有浮動屬性,所以div3會浮動上來。

          三、有float屬性的元素是脫離文檔流的,非浮動元素會忽略掉前面的浮動元素

          代碼:<div id="box1"></div>

          <div id="box2"></div>

          <div id="box3"></div>

          CSS:div{ width: 50px; height: 50px; }

          #box1{background: blue;float:left;}

          #box2{ background: red;float: left; }

          #box3{background: black;width:150px;height:100px; }

          在瀏覽器中的樣式:

          從圖中可以看出,div1和div2浮動在文檔之上,div3忽略了div1和div2,div1和div2沒有影響div3的位置。


          主站蜘蛛池模板: 精品久久久久中文字幕一区| 国产伦一区二区三区免费| 国产精品特级毛片一区二区三区| 亚洲乱色熟女一区二区三区蜜臀 | 亚洲精品无码一区二区| 激情综合一区二区三区| 国产成人一区二区三区在线观看| 人妻无码久久一区二区三区免费| 中文字幕精品一区二区日本| 亚洲高清毛片一区二区| 精品国产免费一区二区| 国产免费一区二区三区免费视频| 国模丽丽啪啪一区二区| 免费日本一区二区| 成人毛片无码一区二区| 精品一区二区三区免费观看| 亚洲国产精品一区第二页| 精品人妻少妇一区二区三区不卡 | 无码人妻久久一区二区三区蜜桃| 国产精品男男视频一区二区三区| 亚洲日本一区二区三区| 波多野结衣AV一区二区三区中文 | 精品国产高清自在线一区二区三区| 精品女同一区二区| 亚洲制服中文字幕第一区| 日本免费一区二区三区最新| 中文字幕人妻丝袜乱一区三区| 国产日本一区二区三区| 亚洲一区日韩高清中文字幕亚洲 | 精品无码综合一区二区三区| 日本一区二区三区中文字幕| 3d动漫精品一区视频在线观看| 日本一区中文字幕日本一二三区视频| 国产精品 一区 在线| 日韩最新视频一区二区三| 一区二区高清视频在线观看| 人妻天天爽夜夜爽一区二区| 无码精品久久一区二区三区| 亚洲av无一区二区三区| 国产一区二区三区乱码| 波霸影院一区二区|