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

taohonghui 發(fā)布于2019-08-01 17:04 / 1078人閱讀

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

CSS 盒子模型

（點擊查看官方解釋）

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

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

padding 內(nèi)邊距

border 邊框

margin 外邊距

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

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

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

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

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

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

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

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

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

這個種寫法會導致 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 顏色

一般設置border的樣式時一般使用簡寫方式：

border: 1px solid red;

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

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

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

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

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

inline

block

inline-block

標準文檔流

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

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

標準文檔流的常見現(xiàn)象：

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

高矮不齊，底邊對齊。

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

單詞沒寫完不換行。

浮動

float: left / right;

浮動的特點：

脫離標準文檔流，元素一旦脫離標準文檔流(脫標)，后面的元素會占據(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.首先可以通過為父元素設置高度來消除浮動：

.box {
        height: 50px;
}

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

.box {
    overflow:hidden;
}

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


    
        HTML
        CSS
        JavaScript
        jQuery
    
    


.clear {
    clear:both;
}

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50928.html

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

摘要：標準文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據(jù)浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內(nèi)元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產(chǎn)生字圍效果。 CSS 盒子模型（點擊查看官方解釋）實際上網(wǎng)頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內(nèi)到外有以下這幾個元素組成 conten...

Heier 2019-08-29 12:51 評論0 收藏0
HTML &amp; CSS之小白初入江湖

摘要：之小白初入江湖超文本標記語言簡稱是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。描述了一個網(wǎng)站的結構語義隨著線索的呈現(xiàn)，使之成為一種標記語言而非編程語言。是塊級元素，是行內(nèi)元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言...

fai1017 2019-08-29 12:50 評論0 收藏0
HTML &amp; CSS之小白初入江湖

摘要：之小白初入江湖超文本標記語言簡稱是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。描述了一個網(wǎng)站的結構語義隨著線索的呈現(xiàn)，使之成為一種標記語言而非編程語言。是塊級元素，是行內(nèi)元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言...

crossoverJie 2019-08-01 17:02 評論0 收藏0
循環(huán)中的異步&amp;&amp;循環(huán)中的閉包

摘要：原文鏈接在這之前先要了解一下循環(huán)中和的區(qū)別是函數(shù)級作用域或者全局作用域，是塊級作用域看一個例子循環(huán)中的邏輯代碼函數(shù)下的輸出，全局下的不存在現(xiàn)在我們把換為循環(huán)中的邏輯代碼報錯了，不在函數(shù)作用域下，當然肯定也不會再全局下因為和的這個區(qū)別當然和的原文鏈接在這之前先要了解一下 for循環(huán)中l(wèi)et 和var的區(qū)別 var 是函數(shù)級作用域或者全局作用域，let是塊級作用域看一個例子 fu...

Near_Li 2019-08-23 15:37 評論0 收藏0
前端資源系列（4）-前端學習資源分享&amp;前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0