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

資訊專欄INFORMATION COLUMN

CSS盒模型

fish / 2457人閱讀

box model

Margin

Border

Padding

Content

width

指定content box 的寬度         
百分?jǐn)?shù)相對(duì)于父容器(包含塊)的content box的寬度     
只有包含塊的高度不依賴該元素時(shí)，百分比寬度才生效

padding

內(nèi)邊距

margin

外邊距

相鄰的兩個(gè)盒子margin，會(huì)發(fā)生折疊

margin可以為負(fù)值

box-sizing

改變盒模型計(jì)算方式

content-box

border-box //更符合

overflow

溢出控制

取值：visible hidden scroll auto

初始值：visible

視覺(jué)格式化模型

視口(Viewport)

瀏覽器的可視區(qū)域

塊級(jí)元素(block-level)

會(huì)被格式化塊狀元素
例如p,div,section等
將display設(shè)置為block，list-item, table    使元素變?yōu)閴K級(jí)元素

行級(jí)元素(inline-level)

盒子的生成

每一個(gè)塊級(jí)元素生成一個(gè)主塊級(jí)盒(principal block-level box)用它來(lái)包含子級(jí)盒

每一個(gè)行級(jí)元素生成一個(gè)行級(jí)盒，行級(jí)盒分布于多行

Box Model-revisited

行級(jí)盒 margin-top, margin-bottm, padding-top不會(huì)產(chǎn)生效果

行級(jí)盒 padding-bottom不會(huì)影響布局

塊級(jí)盒子的子盒子的生成

塊級(jí)盒子可以包含多個(gè)子塊級(jí)盒子

也可以包含多個(gè)行級(jí)盒子

不在行級(jí)元素里面的文字，會(huì)生成匿名行級(jí)盒比如,

Some text

中的some

塊級(jí)盒子中不能同時(shí)包含塊級(jí)和行級(jí)盒子。遇到這種情況，會(huì)生成匿名塊級(jí)盒來(lái)包含行級(jí)盒。比如

標(biāo)題

2017-1-10

行級(jí)盒子的子盒子生成

行級(jí)盒子內(nèi)可以包含行級(jí)盒子

行級(jí)盒子包含塊級(jí)盒子時(shí)，會(huì)被塊級(jí)拆成兩個(gè)行級(jí)盒子，這兩個(gè)盒子又分別被匿名k塊級(jí)盒包含 aaaa

22222

tttttt

display屬性

block 生成塊級(jí)盒

inline 生成行級(jí)盒

inline-block 生成行級(jí)盒，為其內(nèi)容生成塊級(jí)盒

none 在排版時(shí)將元素忽略

visibility

控制元素展示

取值：visible hidden collapse

初始值：visible

排版時(shí)會(huì)占用位置

Generated Content //多產(chǎn)生盒子，用來(lái)存放指定的內(nèi)容

控制元素
::before 和 ::after
content //需要插入的內(nèi)容

常規(guī)流

除了根元素，浮動(dòng)元素和絕對(duì)定位元素外，其他元素都在常規(guī)流之內(nèi)

而根元素，浮動(dòng)和絕對(duì)定位元素會(huì)脫離常規(guī)流

常規(guī)流中的盒子，屬于處于塊級(jí)格式化上下文，或行級(jí)格式化上下文

塊級(jí)格式化上下文(Block Formatting Context)

盒子在容器(包含塊)內(nèi)從上到下一個(gè)接一個(gè)的放置

兩個(gè)兄弟盒子之間的距離由margin屬性決定

同一個(gè)BFC內(nèi)垂直margin會(huì)合并

盒子的左外邊緣挨著容器(包含塊)的左邊

BFC特性

BFC內(nèi)的浮動(dòng)不會(huì)影響到BFC外部的元素

BFC的高度會(huì)包含其內(nèi)的浮動(dòng)元素

BFC不會(huì)和浮動(dòng)元素重疊

BFC可以通過(guò) overflow：hidden 浮動(dòng)框 絕對(duì)定位框 非塊級(jí)的塊容器(inline-block) 等方法創(chuàng)建

行級(jí)格式上下文(lnline Formatting Context)

盒子一個(gè)接一個(gè)水平放置

盒之間的水平margin，border和padding都有效

同一行的盒子所在的矩形區(qū)叫行盒(line box)

當(dāng)一個(gè)行盒放不下上下文內(nèi)所有盒子時(shí)，會(huì)被分到多個(gè)垂直折疊的行盒內(nèi)
行盒內(nèi)的水平分布由 text-align 決定

如果一個(gè)行級(jí)塊無(wú)法分割(單詞, inline-block)，該元素會(huì)被作為一個(gè)整體被決定放在哪一個(gè)行盒

浮動(dòng)(float)

浮動(dòng)元素從常規(guī)流中脫離，被漂浮在容器(包含塊)的左邊或者右邊

浮動(dòng)盒會(huì)一直漂到其外邊緣挨到容器邊緣或另外的浮動(dòng)盒

浮動(dòng)元素不會(huì)影響其后面的流內(nèi)塊元素

但是浮動(dòng)元素后面的行級(jí)盒子會(huì)變短以避開(kāi)浮動(dòng)元素

clear

指定元素哪一邊不能與之前的浮動(dòng)框相鄰
取值：left right both

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

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

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

相關(guān)文章

  • 深入css布局 (1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。從元素的布局特性來(lái)分，主要可以分為三類元素塊級(jí)元素，行內(nèi)元素，行內(nèi)塊級(jí)元素。行內(nèi)級(jí)元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們...

    ky0ncheng 評(píng)論0 收藏0

  • 深入css布局(1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來(lái)微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級(jí)元素屬性取的元素。 深入css布局（1）—— 盒模型 & 元素分類 ????在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重...

    blankyao 評(píng)論0 收藏0

  • 【快速入門(mén)系列】CSS盒模型基礎(chǔ)

    摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。 一、什么是...

    Code4App 評(píng)論0 收藏0

  • 【快速入門(mén)系列】CSS盒模型基礎(chǔ)

    摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。 一、什么是...

    LinkedME2016 評(píng)論0 收藏0

  • css1：盒模型

    摘要：最近工作中有機(jī)會(huì)復(fù)習(xí)一下的基本知識(shí)，那么先從的盒模型開(kāi)始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題怎么把盒模型變成標(biāo)準(zhǔn)盒模型嗯，有辦法，就可以啦。具體參見(jiàn)鏈接描述常見(jiàn)的盒模型分兩類怪異盒模型和標(biāo)準(zhǔn)盒模型，兩種盒模型有著很大的不同。 最近工作中有機(jī)會(huì)復(fù)習(xí)一下css的基本知識(shí)，那么先從css的盒模型開(kāi)始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題：怎么把IE盒模型變成標(biāo)準(zhǔn)盒模型？嗯，有辦法，...

    TalkingData 評(píng)論0 收藏0

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

    verano 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<