整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          技術(shù)干貨:CSS的浮動(dòng)和定位,我是這么來(lái)理解的!

          準(zhǔn)流的默認(rèn)特性

          1、分行、塊級(jí)元素,并且能夠dispay轉(zhuǎn)換。

          2、塊級(jí)元素(block):默認(rèn)獨(dú)占一行,不能并列顯示,能夠設(shè)置寬、高,寬度為父盒子的100%。例如:div、p、標(biāo)題元素(h1-h6)、列表元素(ul li、dl dt dd)

          3、行內(nèi)元素(inline):默認(rèn)并排顯示,不能設(shè)置寬、高,寬度為內(nèi)容的寬度。例如:span、a、b、i

          4、margin-bottom 和margin-top 塌陷,以最大值為準(zhǔn)。

          脫標(biāo)的元素的特性

          只要是脫離了標(biāo)準(zhǔn)流,元素都是不區(qū)分行、塊的,體現(xiàn)在任何元素都可以設(shè)置寬、高了。都有了收縮的 性質(zhì),就是不設(shè)置寬度,就自動(dòng)縮減為里面內(nèi)容的寬度。

          浮動(dòng)的元素有貼邊的性質(zhì),絕對(duì)定位的元素可以自由定位。

          1.盒子的浮動(dòng)(float 屬性):

          在標(biāo)準(zhǔn)流中,一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展,直到包含它的元素的邊界;在豎直方向和兄弟元素一次排列。不能并排。

          CSS的float屬性默認(rèn)為none,將float屬性設(shè)置為left或者right后,元素會(huì)向其父元素的左側(cè)或右側(cè)緊靠,同時(shí)默認(rèn)情況下,盒子的寬度不再伸展,而是根據(jù)盒子里面的內(nèi)容的寬度來(lái)確定。 脫離了標(biāo)準(zhǔn)文件流。(但是,本顯示會(huì)占據(jù)一定的空間)。

          這樣未填滿的部分就會(huì)進(jìn)行填充。 為了消除影響,不讓后面的元素因?yàn)楦?dòng)產(chǎn)生的這些空間進(jìn)行填充,使用clear屬性進(jìn)行消除浮動(dòng)對(duì)后面的元素造成的影響:

          clear 屬性:

          clear屬性除了可以設(shè)置right、left 也可以設(shè)置為both,表示同時(shí)消除左右兩邊的影響。

          clear屬性設(shè)置要放到 float 之后的 要消除float影響的兄弟div里面,而不是float本身所在的div。

          設(shè)置上clear之后,該div會(huì)把前面設(shè)置float的div 當(dāng)做塊級(jí)div來(lái)看待。

          使用示例:

          因?yàn)楦?dòng)的元素都不在標(biāo)準(zhǔn)流里,如果盒子內(nèi)部元素都是浮動(dòng)元素,父級(jí)div 縮成一條。

          解決方法,在后面加一個(gè)空div 并清除 浮動(dòng)影響.

          高度消失后,父級(jí)將只保留margin和border的高度,與父級(jí)平行的div 將會(huì)緊挨著父級(jí)顯示,顯示漂浮的內(nèi)容 會(huì)占據(jù)空間,后面div內(nèi)容 會(huì)依次緊挨著漂浮的內(nèi)容顯示。

          脫離了標(biāo)準(zhǔn)流,但內(nèi)容顯示上 會(huì)被其他元素包圍。(其他元素可以“趁空而入”)

          浮動(dòng)可以使塊級(jí)元素并排顯示,用于頁(yè)面布局。

          2.盒子的定位(position):

          static (標(biāo)準(zhǔn)流中默認(rèn))

          盒子按照標(biāo)準(zhǔn)流(包括浮動(dòng)方式)進(jìn)行布局。

          relative (位于標(biāo)準(zhǔn)流中):

          以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ),然后使盒子相對(duì)于它在原本的的標(biāo)準(zhǔn)位置偏移指定的距離。相對(duì)定位的盒子,仍在標(biāo)準(zhǔn)流中,它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。

          只要標(biāo)識(shí)該div position:relative ;使用 top left 等屬性 可以設(shè)置偏移量,與父級(jí)元素的定位方式無(wú)關(guān)。

          總結(jié):

          1.使用相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中,它對(duì)付款和兄弟盒子沒(méi)有任何影響。

          2.使用相對(duì)定位的菏澤仍在標(biāo)準(zhǔn)流中,它對(duì)父塊和兄弟盒子沒(méi)有任何影響。

          對(duì)浮動(dòng)的盒子使用相對(duì)于定位 也是一樣的

          absolute (非標(biāo)準(zhǔn)流)

          絕對(duì)定位,盒子位置以它的包含框?yàn)榛鶞?zhǔn)進(jìn)行偏移,絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離,其他盒子就當(dāng)這個(gè)盒子不存在一樣。

          設(shè)置position后:div 脫離標(biāo)準(zhǔn)流,寬度自動(dòng)按內(nèi)容寬度,覆蓋在后面的元素之上。

          設(shè)置top,left等屬性:

          top:5px;

          跑出了父級(jí)的div ,

          把father div塊 設(shè)置成相對(duì)定位:

          1.使用絕對(duì)定位的盒子 以它的”最近“的一個(gè)”已經(jīng)定位“的祖先元素 為基準(zhǔn)進(jìn)行偏移,如果沒(méi)有定位定位的祖先元素, 那會(huì)以瀏覽器窗口進(jìn)行定位。

          已經(jīng)定位:position 屬性被設(shè)置,且被設(shè)置的不是 static的任意一種方式。

          最近,離該節(jié)點(diǎn)最近的一個(gè)已經(jīng)定位的節(jié)點(diǎn)。

          2.絕對(duì)定位的框從標(biāo)準(zhǔn)流中脫離,這意味著對(duì)其后兄弟盒子的定位沒(méi)有影響,其他盒子就好像這個(gè)盒子不存在一樣。

          通過(guò)實(shí)驗(yàn)可知道:

          如果設(shè)置了絕對(duì)定位,而沒(méi)有設(shè)置偏移屬性,那么它仍將保持原來(lái)的位置,這個(gè)性質(zhì)可以用于需要使某個(gè)元素脫離標(biāo)準(zhǔn)流,而仍然希望保持原來(lái)的位置的情況。

          fixed (以窗口為基準(zhǔn))

          固定定位,基準(zhǔn)不是祖先元素 而是瀏覽器窗口 或者其他縣市設(shè)備的窗口。

          z-index:

          當(dāng)塊被設(shè)置了position屬性時(shí),該值便可設(shè)置各塊之間的重疊高低關(guān)系,默認(rèn)z-index值為0

          盒子的display屬性:

          none :此元素不會(huì)被顯示。

          block:顯示為塊級(jí)元素,前后會(huì)帶有換行符。

          inline:默認(rèn) 此元素被顯示為內(nèi)聯(lián)元素,元素前后沒(méi)有換行符。

          list-item:作為列表顯示

          圖書推薦:大家可以參考《CSS徹底研究》來(lái)進(jìn)行學(xué)習(xí),如需相關(guān)資料請(qǐng)留言!


          動(dòng)

          浮動(dòng)是為了元素標(biāo)簽的并排顯示問(wèn)題。

          我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候,經(jīng)常會(huì)看到 幾個(gè) div 塊是可以并排顯示的, 浮動(dòng)就是解決這樣問(wèn)題的方法之一。

          float屬性有以下的值

          • float: left; 左浮動(dòng)
          • float: right 右浮動(dòng)

          浮動(dòng)的特點(diǎn)

          • 浮動(dòng)主要針對(duì)的是并排顯示的盒子而言。
          • 在一個(gè)父容器的盒子里, 兄弟元素之間要浮動(dòng)必須都浮動(dòng)。
          • 父容器必須要有一個(gè)足夠的寬度,否則不足以使得各個(gè)子元素之間并排展示。
          • 一個(gè)父容器的盒子內(nèi),兄弟元素會(huì)按照順序貼靠,如果是左浮動(dòng),就往左貼合;如果是右浮動(dòng),就往右貼合。如果發(fā)現(xiàn)貼合的盒子后沒(méi)有足夠的空間,則會(huì)在尋找前一個(gè)兄弟元素進(jìn)行貼靠。直到空間合適為止。
          • 浮動(dòng)的元素已經(jīng)脫離了標(biāo)準(zhǔn)的HTML文檔流,不再區(qū)分塊級(jí)元素、行內(nèi)元素并且一律能設(shè)置寬度和高度,即使它是span標(biāo)簽或者a標(biāo)簽


          一個(gè)浮動(dòng)的例子

          <!--一個(gè)浮動(dòng)的例子-->
          <style>
          
          
              .box1 {
                  width: 600px;
                  height: 200px;
                  border: 1px solid #000;
              }
          
          
              .box1 .con1 {
                  width: 200px;
                  height: 200px;
                  background-color: orange;
                  float: left;
              }
          
          
              .box1 .con2 {
                  width: 200px;
                  height: 200px;
                  background-color: blue;
                  float: left;
              }
          
          
              .box1 .con3 {
                  width: 201px;
                  height: 200px;
                  background-color: yellowgreen;
                  float: left;
              }
          </style>
          <div class="box1">
                  <div class="con1"></div>
                  <div class="con2"></div>
                  <div class="con3"></div>
          </div>
          
          


          一個(gè)順序貼靠的例子

          <!--  一個(gè)順序貼靠的例 子-->
          <!-- 以下代碼中 兄弟元素 con1, con2, con3 之間會(huì)進(jìn)行順序貼靠-->
          <!-- con3 在貼靠 con2 的時(shí)候,發(fā)現(xiàn)父容器的寬度只能是400px, 分別被con1 和 con2 占據(jù), 所以con3 會(huì)找 cont1 貼靠,最終con3 位于 con1右邊, con2下邊 -->
          
          
          <style>
          
          
            .box1 {
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
          
          
            .box1 .con1 {
                width: 200px;
                height: 200px;
                background-color: orange;
                float: left;
            }
          
          
            .box1 .con2 {
                width: 200px;
                height: 100px;
                background-color: blue;
                float: left;
            }
          
          
            .box1 .con3 {
                width: 200px;
                height: 100px;
                background-color: yellowgreen;
                float: left;
            }
          </style>
          <div class="box1">
            <div class="con1"></div>
            <div class="con2"></div>
            <div class="con3"></div>
          </div>


          清除浮動(dòng)

          清除浮動(dòng)是為了 不影響設(shè)置浮動(dòng)標(biāo)簽的后續(xù)的標(biāo)簽的布局展示。

          因?yàn)椋谝粋€(gè)父容器中,子元素浮動(dòng)了,脫離了標(biāo)準(zhǔn)文檔流,不在占用之前的位置,會(huì)導(dǎo)致 無(wú)法撐開(kāi)沒(méi)有設(shè)置高度的父元素;從而導(dǎo)致后續(xù)的結(jié)構(gòu)擠壓,造成整個(gè)頁(yè)面布局的混亂。

          • 給父元素加個(gè)高度。在那些明確知道父容器高度的情況下,可以使用。
          <style>
            * {
              margin: 0;
              padding: 0;
            }
          
          
            div {
              height: 100px;
            }
            p {
              float: left;
              width: 100px;
              height: 100px;
              margin-right: 20px;
              background-color: red;
            }
          </style>
          
          
          <body>
            <div>
              <p></p>
              <p></p>
            </div>
          
          
            <div>
              <p></p>
              <p></p>
              <p></p>
            </div>
          </body>
          • 后續(xù)元素增加 clear:both ,清除前面元素對(duì)自己的影響。
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
          
          
              .box2 {
                  margin-top: 20px;
                  clear: both;
              }
              p {
                  float: left;
                  width: 100px;
                  height: 100px;
                  margin-right: 20px;
                  background-color: red;
              }
          </style>
          
          
          <body>
          <div>
              <p></p>
              <p></p>
          </div>
          
          
          <div class="box2">
              <p></p>
              <p></p>
              <p></p>
          </div>
          </body>
          • 浮動(dòng)的父容器添加后續(xù)偽元素,clear:both ,清除浮動(dòng)對(duì)后續(xù)元素的影響(推薦方式)。
          <style>
            * {
                margin: 0;
                padding: 0;
            }
          
          
            .cleafix::after {
                content: '';
                clear: both;
                display: block
            }
          
          
            p {
                float: left;
                width: 100px;
                height: 100px;
                margin-right: 20px;
                background-color: red;
            }
          </style>
          
          
          <body>
          
          
          <div class="cleafix">
            <p></p>
            <p></p>
          </div>
          
          
          <div class="cleafix">
            <p></p>
            <p></p>
            <p></p>
          </div>
          </body>
          • 額外的空標(biāo)簽,在浮動(dòng)元素的父盒子之后添加一個(gè)空標(biāo)簽,空標(biāo)簽上添加 clear:both 屬性。
          <style>
          * {
            margin: 0;
            padding: 0;
          }
          
          
          .clearboth {
            clear: both;
          }
          
          
          p {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 20px;
            background-color: red;
          }
          </style>
          
          
          <body>
          <div>
          <p></p>
          <p></p>
          </div>
          
          
          <div class="clearboth"></div>
          
          
          <div>
          <p></p>
          <p></p>
          <p></p>
          </div>
          </body>
          • 浮動(dòng)元素的父容器添加 overflow:hidden , 使得子元素的浮動(dòng)只能作用在父容器內(nèi)。

          節(jié)課介紹CSS的浮動(dòng)。


          主站蜘蛛池模板: 91国在线啪精品一区| 日日摸夜夜添一区| 亚洲一区二区三区久久| 国产一区中文字幕在线观看| 国产内射在线激情一区| 激情内射日本一区二区三区| 国产一区在线电影| 亚洲高清毛片一区二区| 国产AⅤ精品一区二区三区久久 | 久久国产一区二区三区| 久久久精品一区二区三区| 国产自产对白一区| 无码人妻精品一区二区三区东京热 | 亚洲视频一区二区三区| 亚洲综合av永久无码精品一区二区| 日韩一区二区三区视频| 综合无码一区二区三区四区五区| 精品国产亚洲一区二区三区| 日本一区二区在线不卡| 精品一区二区三区水蜜桃| 在线日韩麻豆一区| 国产精品视频无圣光一区| 无码日韩AV一区二区三区| 国产精品亚洲专区一区| 久久99精品免费一区二区| 国产精品第一区第27页| 亚洲欧美成人一区二区三区| 国产成人av一区二区三区在线观看 | 冲田杏梨高清无一区二区| 久久精品视频一区二区三区| 国产精品日本一区二区不卡视频 | 日本一区二区三区在线看| 国产精久久一区二区三区| 国产乱子伦一区二区三区| 久久99久久无码毛片一区二区| 极品尤物一区二区三区| 亚洲视频在线一区| 午夜天堂一区人妻| asmr国产一区在线| 亚洲不卡av不卡一区二区| 久久国产精品亚洲一区二区|