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

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

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

CSS 盒子模型

（點(diǎn)擊查看官方解釋）

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

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

padding 內(nèi)邊距

border 邊框

margin 外邊距

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

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

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

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

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

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

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

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

/* 錯(cuò)誤寫(xiě)法 */
margin-left: 20px;
margin: 10px;

這個(gè)種寫(xiě)法會(huì)導(dǎo)致 margin-left:20px失效。

在使用盒子模型進(jìn)行布局的時(shí)候要格外注意的一個(gè)問(wèn)題是： margin塌陷。

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

上述代碼實(shí)際效果如下圖所示

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

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

margin: 0 auto;

border屬性的三要素：

border-width 粗線

border-style 線形

border-color 顏色

一般設(shè)置border的樣式時(shí)一般使用簡(jiǎn)寫(xiě)方式：

border: 1px solid red;

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

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

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

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

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

inline

block

inline-block

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

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

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

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

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

高矮不齊，底邊對(duì)齊。

自動(dòng)換行，一行寫(xiě)不完，自動(dòng)換行。

單詞沒(méi)寫(xiě)完不換行。

浮動(dòng)

float: left / right;

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

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

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

相互貼靠。

浮動(dòng)會(huì)帶來(lái)的影響：

能讓浮動(dòng)后的元素布局混亂

子元素浮動(dòng)會(huì)對(duì)父元素產(chǎn)生影響

HTML代碼：


    
        HTML
        CSS
        JavaScript
        jQuery
    


    
        測(cè)試文字
        測(cè)試文字
        測(cè)試文字
        測(cè)試文字

CSS代碼：

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

此時(shí)效果如下圖：

如何清除浮動(dòng)帶來(lái)的影響：

1.首先可以通過(guò)為父元素設(shè)置高度來(lái)消除浮動(dòng)：

.box {
        height: 50px;
}

2.使用overflow:hidden屬性清除浮動(dòng)：

.box {
    overflow:hidden;
}

3.在父元素底部插入一個(gè)具有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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112187.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Heier

男|高級(jí)講師

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

TA的文章

RackNerd LLC：雙11活動(dòng)，4款美國(guó)便宜VPS低至$12/年，機(jī)房可選洛杉磯、圣何塞、西雅

閱讀 1164·2021-11-15 18:00
云主機(jī)如何連接-云主機(jī)怎么用手機(jī)連接？

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

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

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

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

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

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章