你所不知道的CSS浮動小知識

2022-10-09 11:09:09 字數 1291 閱讀 4522

前面的話

浮動最早的使用是出自right">,用於文字環繞的排版處理。如今浮動作為css中常用的布局方式,本文將就浮動內容做詳細介紹和梳理

float 浮動

浮動元素脫離普通流,然後按照指定方向,向左或者向右移動,碰到父級邊界或者另外乙個浮動元素停止

值: left | right | none | inherit

初始值: none

應用於: 所有元素

繼承性: 無

[注意]若浮動乙個非替換元素,則必須為該元素宣告乙個width,否則,根據css規範,元素的寬度趨於0

浮動流正常流中元素乙個接乙個排列;浮動元素也構成浮動流

塊級框浮動元素自身會生成乙個塊級框,而不論這個元素本身是什麼,使浮動元素周圍的外邊距不會合併

包裹性浮動元素的包含塊是指其最近的塊級祖先元素,後代浮動元素不應該超出包含塊的上、左、右邊界。若不設定包含塊的高度,包含塊若浮動,則包含塊會延伸,進而包含其所有後代浮動元素;若不設定包含塊的寬度,包含塊若浮動,則包含塊寬度由後代浮動元素撐開

破壞性浮動元素脫離正常流,並破壞了自身的行框屬性,使其包含塊元素的高度塌陷,使浮動框旁邊的行框被縮短,從而給浮動框留出空間,行框圍繞浮動框重新排列

[1]浮動元素的左(或右)外邊界必須是源文件中之前出現的左浮動(或右浮動)元素的右(左)外邊界。除非後出現浮動元素的頂端在先出現浮動元素的底端下面

[2]左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界也不會在其左邊任何左浮動元素的右外邊界的左邊

[3]左(或右)浮動元素左邊(右邊)有另乙個浮動元素,前者右外邊界不能在其包含塊右(左)邊界的右邊(左邊)

[4]浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界

[5]乙個浮動元素的頂端不能比其父元素的內頂端更高。如果乙個浮動元素在兩個合併外邊距之間,放置這個浮動元素時就好像在兩個元素之間有乙個塊級父元素

[6]浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高

[7]如果源文件中乙個浮動元素之前出現另乙個元素,浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端要高

[8]浮動元素必須盡可能高地放置

[9]左浮動元素必須向左盡可能遠,右浮動元素則必須向右盡可能遠。位置越高,就會向右或向左浮動得越遠

浮動元素超出父元素邊界的方法有兩種:一種是浮動元素的寬度大於父元素的寬度,另一種就是設定負外邊距。如果浮動元素存在負外邊距,且浮動元素與正常流元素重疊

行內框與乙個浮動元素重疊時,其邊框、背景和內容都在該浮動元素之上顯示

塊框與乙個浮動元素重疊時,其邊框和背景在該浮動元素之下顯示,而內容在浮動元素之上顯示

你不知道的css小知識

使用 webkit transform scale 一種字型有粗體 斜體 下劃線 刪除線等諸多屬性。但是並不是所有字型都做了這些,一些不常用的字型,或許就只有個正常體,如果你用italic,就沒有效果了 這時候你就要用oblique.可以理解成italic是使用文字的斜體,oblique是讓沒有斜體...

css你所不知道技巧

當元素沒有文字內容,但有href屬性的時候,顯示它的href屬性 table layout fixed可以讓每個格仔保持等寬 table max height與 overflow hidden 一起來建立純 css 的滑塊 slider slider hover 使列表的每項都由逗號分隔 ul li...

你所不知道的 const

const 常量是不可修改的,也就是說only read,例如 const int nbuffsize 512 nbuffsize 0 error就是因為const 常量不能修改,所以定義時必須初始化預設在全域性作用域中定義的非const變數可以在整個程式中訪問,例如 int ncounter ex...