HTML & CSS 之小白再續(xù)前緣

Heier 發(fā)布于2019-08-29 12:51 / 1993人閱讀

摘要：標(biāo)準(zhǔn)文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動浮動的特點脫離標(biāo)準(zhǔn)文檔流，元素一旦脫離標(biāo)準(zhǔn)文檔流脫標(biāo)，后面的元素會占據(jù)浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內(nèi)元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產(chǎn)生字圍效果。

CSS 盒子模型

（點擊查看官方解釋）

實際上網(wǎng)頁中的每一個標(biāo)簽都可以看成一個盒子模型，而這個盒子模型從內(nèi)到外有以下這幾個元素組成

content 內(nèi)容區(qū)域

padding 內(nèi)邊距

border 邊框

margin 外邊距

并且margin, border, padding分別有上下左右4個值

如上圖所示，可以很容易的得出盒子的大小，也就是對應(yīng)標(biāo)簽真正大小。
所謂的寬高不是width和height,而是盒子的寬度和高度。

高度 = 內(nèi)容高度 + 上下內(nèi)邊距 + 上下邊框 + 上下外邊距
寬度 = 內(nèi)容寬度 + 左右內(nèi)邊距 + 左右邊框 + 左右外邊距

margin,border,padding三個屬性在設(shè)值的時候均可以對上下左右進行多帶帶設(shè)置：

margin-top: 100px;
margin-bottom: 100px;
margin-left: 50px;
margin-right: 50px;

也可以一次性使用簡寫的方法設(shè)置：

/* 上 右 下 左*/
margin: 100px 100px 50px 50px;
/* 上下 左右*/
margin: 100px 50px;
/* 上 左右 下*/
margin: 100px 20px 50px;

這里需要注意的是，多次設(shè)置時要先寫大后寫?。?/p>

/* 錯誤寫法 */
margin-left: 20px;
margin: 10px;

這個種寫法會導(dǎo)致 margin-left:20px失效。

在使用盒子模型進行布局的時候要格外注意的一個問題是： margin塌陷。

    * {
        margin:0;
    }
    div {
        width: 300px;
        height: 300px;
    }
    .d1 {
        background-color: #c1c1c1;
        margin-bottom: 20px;
    }
    .d2 {
        background-color: pink;
        margin-top: 30px;
    }

上述代碼實際效果如下圖所示

肉色部分是Chrome瀏覽器檢查div.d2屬性的margin邊距，很明顯它的top是30px,也就是說margin距離是距離上下左右容器border的距離，所以造成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top里了。

在計算盒子之間的距離時需要考慮margin，但margin也有一個很好用的方法使塊劇中：

margin: 0 auto;

border屬性的三要素：

border-width 粗線

border-style 線形

border-color 顏色

一般設(shè)置border的樣式時一般使用簡寫方式：

border: 1px solid red;

再說行內(nèi)元素的盒模型與塊級元素的盒模型之間的差異：

行內(nèi)元素不能設(shè)置寬和高。行內(nèi)元素的寬高是由其內(nèi)容決定的；而塊級元素可以設(shè)置寬和高。

塊級元素會獨占一行。而行內(nèi)元素卻部能夠獨占一行，只能和其他的行內(nèi)元素共用一行。

如果塊級元素不設(shè)置寬度，那么塊級元素會自動的沾滿父元素的全部寬度。

可以通過設(shè)置dispaly屬性將元素在行內(nèi)和塊之間轉(zhuǎn)換，其參數(shù)包括：

inline

block

inline-block

標(biāo)準(zhǔn)文檔流

標(biāo)準(zhǔn)文檔流實際上是一個不太好的翻譯，一開始不是很理解，查了一下發(fā)現(xiàn)，標(biāo)準(zhǔn)中說的是 normal flow 翻譯為普通流或者常規(guī)流更好。

當(dāng)瀏覽器解析網(wǎng)頁的時候，遵循從上往下，從左到右的順序。
一旦元素脫離了標(biāo)準(zhǔn)文檔流的時候，行內(nèi)元素和塊元素的特性將消失。

標(biāo)準(zhǔn)文檔流的常見現(xiàn)象：

空白折疊現(xiàn)象。

高矮不齊，底邊對齊。

自動換行，一行寫不完，自動換行。

單詞沒寫完不換行。

浮動

float: left / right;

浮動的特點：

脫離標(biāo)準(zhǔn)文檔流，元素一旦脫離標(biāo)準(zhǔn)文檔流(脫標(biāo))，后面的元素會占據(jù)浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內(nèi)元素的特性。

元素浮動會脫離文檔流但是不會脫離文本流，所以會產(chǎn)生字圍效果。

相互貼靠。

浮動會帶來的影響：

能讓浮動后的元素布局混亂

子元素浮動會對父元素產(chǎn)生影響

HTML代碼：


    
        HTML
        CSS
        JavaScript
        jQuery
    


    
        測試文字
        測試文字
        測試文字
        測試文字

CSS代碼：

    .box  ul li {
        float: left;
        width: 100px;
        height: 50px;
        background-color: orange;
        margin-left: 10px;
    }

此時效果如下圖：

如何清除浮動帶來的影響：

1.首先可以通過為父元素設(shè)置高度來消除浮動：

.box {
        height: 50px;
}

2.使用overflow:hidden屬性清除浮動：

.box {
    overflow:hidden;
}

3.在父元素底部插入一個具有clear:both屬性的空標(biāo)簽：


    
        HTML
        CSS
        JavaScript
        jQuery
    
    


.clear {
    clear:both;
}

云服務(wù)器 GPU云服務(wù)器前緣 html 凹形之體 html &lthr&gt html&ltt&gt

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112187.html

發(fā)表評論

登陸后可評論

0條評論

Heier

男|高級講師

我要關(guān)注我要私信

TA的文章

RackNerd LLC：雙11活動，4款美國便宜VPS低至$12/年，機房可選洛杉磯、圣何塞、西雅

閱讀 1101·2021-11-15 18:00
云主機如何連接-云主機怎么用手機連接？

閱讀 2815·2021-09-22 15:18
初始Selenium

閱讀 1977·2021-09-04 16:45
響應(yīng)式網(wǎng)頁布局 - W3Schools How-Tos 01

閱讀 758·2019-08-30 15:55
用CSS3 transition屬性實現(xiàn)淡入淡出輪播圖

閱讀 3870·2019-08-30 13:10
圖片批量上傳js+html+css

閱讀 1345·2019-08-30 11:06
HTML & CSS 之小白再續(xù)前緣

閱讀 1994·2019-08-29 12:51
JavaScript發(fā)展史，JavaScript組成和開發(fā)工具介紹-樂字節(jié)

閱讀 2302·2019-08-26 13:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

HTML & CSS 之小白再續(xù)前緣

相關(guān)文章