搜尋
首頁web前端前端問答css語言中哪一項是漂浮的語法

css語言中的漂浮語法為「float:屬性值;」。 float屬性用於定義元素在哪個方向浮動,會讓盒子(元素)漂浮在標準流的上面,其周圍的元素也會重新排列,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。此屬性有三個屬性值:1、“left”,定義元素向左浮動;2、“right”,定義元素向右浮動;3、“none”,定義元素不浮動。

css語言中哪一項是漂浮的語法

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css語言中,想要元素漂浮起來需要使用float屬性;該屬性指定一個盒子(元素)是否應該浮動以往這個屬性總是應用於圖像,使文字圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會產生一個區塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄。

註解:假如在一行之上只有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。

float浮動屬性的三個屬性值:

  • left    元素向左浮動。   

  • right    元素向右浮。   

  • none    預設值。元素不浮動,並會顯示在文字中出現的位置。

浮動

一、 CSS佈局的三種機制


css提供了3種機制來設置盒子的擺放位置,分別是:普通流(標準流)、浮動和定位,其中: 

#1、 普通流(標準流:「塊級元素」會獨佔一行,「從上向下」排列;「行內元素」會依照順序,「從左到右」排列,碰到父元素邊緣自動換行;

2、 浮動:讓盒子從普通流中「漂浮」起來,主要作用讓多個塊級盒子一行顯示。 

3、定位:將盒子「定位」在某一個位置-CSS離不開定位,特別是後面的js特效。

二、為什麼需要浮動?


**概念:**元素浮動是指**設定了浮動屬性的元素會:**

  • 脫離標準普通流的控制。
  • 移動到指定位置。

作用:

  • ##讓多個盒子(div)水平排列成一行,使浮動成為佈局的重要手段。
  • 可以實現盒子的左右對齊等等…
  • #浮動最早是用來
  • 控制圖片,實現文字環繞圖片的效果。
浮動口訣之——浮

nbsp;html>


    <meta>
    <meta>
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgba(255,0,0,0.5);
            float: left;
        }
        .box2{
            width: 300px;
            height: 150px;
            background-color: skyblue;
        }
    </style>


    <div></div>
    <div></div>

css語言中哪一項是漂浮的語法

<span style="background-color: rgb(255, 192, 0);"></span><span style="background-color: rgb(255, 192, 0);"></span>


css語言中哪一項是漂浮的語法

css語言中哪一項是漂浮的語法

## float


屬性會讓盒子漂浮在標準流的上面,所以第二個標準流的盒子跑到浮動盒子的底下了

css語言中哪一項是漂浮的語法浮動口訣之— —漏

浮動-漏漏~~~浮動的盒子,把自己原來的位置漏給下面標準流的盒子,就是不佔有原來位置,是脫離標準流的,我們俗稱「脫標誌」

nbsp;html>


    <meta>
    <meta>
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgba(255,0,0,0.5);
            /* 让第一个盒子浮动起来,不占位置 */
            float: left;
        }
        .box2{
            width: 300px;
            height: 150px;
            background-color: skyblue;
        }
    </style>


    <div></div>
    <div></div>

所以,box2下面的其實就是跑到box1盒子下面了, 被box1給壓住了,遮擋起來了css語言中哪一項是漂浮的語法

浮動口訣之——特

浮動——特性float屬性會改變元素display屬性。

###任何元素都可以浮動。浮動元素會產生一個區塊級框,而不論它本身是何種元素。產生的區塊級框和我們前面的行內塊極其相似。###
div {
  width: 200px;
  height: 200px;
  background-color: pink;
  /* 转换为行内块元素,可以水平显示,不过 div 之间有间隙,不方便处理 */
  /* display: inline-block; */
  /* 设置浮动属性,可以让 div 水平排列,并且没有间隙 */
  float: left;
}

.two {
  background-color: hotpink;
}
############ 浮動的元素互相貼靠一起的,但是如果父級寬度裝不下這些浮動的盒子, 多出的盒子會另起一行對齊######浮動的擴展##########一、浮動元素與父盒子的關係######## ####- 子盒子的浮動參考父盒子對齊。 ################- 不會與父盒子的邊框重疊,也不會超過父盒子的內邊距。 ##################二、浮動元素與兄弟盒子的關係############在一個父級盒子中,如果**前一個兄弟盒子**是:###
  • 浮动的,那么当前盒子会与前一个盒子的顶部对齐;
  • 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。

结论: 如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题

ps:浮动只会影响当前的或者后面的标准流的盒子,不会影响前面的标准流

建议:如果一个盒子里面有多个盒子,如果其中的一个盒子浮动了,其他兄弟也应该浮动。防止引起问题

三、为什么要清除浮动


因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。 !

结论:

  • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
  • 准确地说,并不是清除浮动,而是清除浮动后造成的影响

四、清除浮动本质


清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。 清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。 父级有了高度,就不会影响下面的标准流了

五、清除浮动的四种方式


在CSS中,clear属性用于清除浮动

语法:

选择器{clear:属性值;}   //clear 清除
属性值 右描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右俩侧浮动的影响

但是我们实际工作中, 几乎只用 clear: both;

1.额外标签法(隔墙法)

<!-- 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签:
  1.添加在浮动元素最后
  2.该元素必须是块元素,行内元素无效
 -->

<div></div>
  • 优点:通俗易懂,书写方便
  • 缺点:添加许多无意义的标签,结构化较差

2.父级添加overflow属性方法

可以给父级添加: overflow为 hidden| auto| scroll  都可以实现。
  • 优点:代码简洁
  • 缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

3.使用after伪元素清除浮动
after 方式为空元素额外标签法的升级版,好处是不用单独加标签了

.clearfix:after {  
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}   

.clearfix {
  /* IE6、7 专有 */
  *zoom: 1;
}
  • 优点:符合闭合浮动思想 结构语义化正确
  • 缺点:由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

4.使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
  • 优点:代码更简洁
  • 缺点:由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

总结

  • 标准流(普通流)在布局中 块级元素会独占一行,从上向下排列;行内元素会按照顺序,从左到右排列,碰到父元素边缘则自动换行。

  • 浮动的应用场景大部分用于让盒子水平排列成一行和控制图片。

  • 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

  • 清除浮动一共有4中方式:

    • 额外标签法(隔墙法)

    • 父级添加overflow属性方法

    • 使用after伪元素清除浮动

    • 使用双伪元素清除浮动

(学习视频分享:web前端

以上是css語言中哪一項是漂浮的語法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版