CSS盒模型

fish 發布于2019-08-30 15:52 / 2442人閱讀

box model

Margin

Border

Padding

Content

width

指定content box 的寬度         
百分數相對于父容器(包含塊)的content box的寬度     
只有包含塊的高度不依賴該元素時，百分比寬度才生效

padding

內邊距

margin

外邊距

相鄰的兩個盒子margin，會發生折疊

margin可以為負值

box-sizing

改變盒模型計算方式

content-box

border-box //更符合

overflow

溢出控制

取值：visible hidden scroll auto

初始值：visible

視覺格式化模型

視口(Viewport)

瀏覽器的可視區域

塊級元素(block-level)

會被格式化塊狀元素
例如p,div,section等
將display設置為block，list-item, table    使元素變為塊級元素

行級元素(inline-level)

盒子的生成

每一個塊級元素生成一個主塊級盒(principal block-level box)用它來包含子級盒

每一個行級元素生成一個行級盒，行級盒分布于多行

Box Model-revisited

行級盒 margin-top, margin-bottm, padding-top不會產生效果

行級盒 padding-bottom不會影響布局

塊級盒子的子盒子的生成

塊級盒子可以包含多個子塊級盒子

也可以包含多個行級盒子

不在行級元素里面的文字，會生成匿名行級盒比如,

Some text

中的some

塊級盒子中不能同時包含塊級和行級盒子。遇到這種情況，會生成匿名塊級盒來包含行級盒。比如

標題

2017-1-10

行級盒子的子盒子生成

行級盒子內可以包含行級盒子

行級盒子包含塊級盒子時，會被塊級拆成兩個行級盒子，這兩個盒子又分別被匿名k塊級盒包含 aaaa

22222

tttttt

display屬性

block 生成塊級盒

inline 生成行級盒

inline-block 生成行級盒，為其內容生成塊級盒

none 在排版時將元素忽略

visibility

控制元素展示

取值：visible hidden collapse

初始值：visible

排版時會占用位置

Generated Content //多產生盒子，用來存放指定的內容

控制元素
::before 和 ::after
content //需要插入的內容

常規流

除了根元素，浮動元素和絕對定位元素外，其他元素都在常規流之內

而根元素，浮動和絕對定位元素會脫離常規流

常規流中的盒子，屬于處于塊級格式化上下文，或行級格式化上下文

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

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

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

同一個BFC內垂直margin會合并

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

BFC特性

BFC內的浮動不會影響到BFC外部的元素

BFC的高度會包含其內的浮動元素

BFC不會和浮動元素重疊

BFC可以通過 overflow：hidden 浮動框絕對定位框非塊級的塊容器(inline-block) 等方法創建

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

盒子一個接一個水平放置

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

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

當一個行盒放不下上下文內所有盒子時，會被分到多個垂直折疊的行盒內
行盒內的水平分布由 text-align 決定

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

浮動(float)

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

浮動盒會一直漂到其外邊緣挨到容器邊緣或另外的浮動盒

浮動元素不會影響其后面的流內塊元素

但是浮動元素后面的行級盒子會變短以避開浮動元素

clear

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

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

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型盒遙控

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

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

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

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

ky0ncheng 2019-04-23 13:43 評論0 收藏0
深入css布局(1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。規定元素和屬性是包含元素的邊框內邊距內容的。后來微軟也慢慢轉向了的標準，在以后支持了標準盒模型。行內級元素屬性取的元素。深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重...

blankyao 2019-08-29 15:25 評論0 收藏0
【快速入門系列】CSS盒模型基礎

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

Code4App 2019-08-29 15:20 評論0 收藏0
【快速入門系列】CSS盒模型基礎

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

LinkedME2016 2019-08-02 10:22 評論0 收藏0
css1：盒模型

摘要：最近工作中有機會復習一下的基本知識，那么先從的盒模型開始吧，因為這是當時進現在這家公司筆試的第一題怎么把盒模型變成標準盒模型嗯，有辦法，就可以啦。具體參見鏈接描述常見的盒模型分兩類怪異盒模型和標準盒模型，兩種盒模型有著很大的不同。最近工作中有機會復習一下css的基本知識，那么先從css的盒模型開始吧，因為這是當時進現在這家公司筆試的第一題：怎么把IE盒模型變成標準盒模型？嗯，有辦法，...

TalkingData 2019-08-30 10:59 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0