CSS之盒子模型

阿新 • • 發佈：2018-02-05

12px overflow 都是 padding ash ted markdown style 文字

行高

瀏覽器默認文字大小：16px
行高是==基線與基線==之間的距離
行高=文字大小+上下邊距
行高的單位

單位	文字大小	值
px	20px	20px
em	20px	40px
%	20px	30px
2	20px	40px

總結：單位除了像素以外，行高都是與文字大小乘積。

行高單位	父元素文字大小	子元素文字大小	行高
40px	20px	30px	40px
2em	20px	30px	40px
%150	20px	30px	30px
2	20px	30px	==60px==

總結：不帶單位時，行高是和子元素文字大小相乘,em和%都是和父元素文字大小相乘

盒子模型

邊框（border）

border-top-style:solid(實線)／dotted（點線）／dashed（虛線）
border-top-color
border-top-width

        .box{
            width: 300px;
            height: 390px;
            background-color: red;
            border-top-style: solid;
            border-top-color: green;
            border-top-width: 5px;

            border-bottom-style: solid;
            border-bottom-color: yellow;
            border-bottom-width: 15px;
        }

邊框屬性連寫

border-top:red solid 5px;

特點：沒有順序要求，線型為必寫項。

四個邊框值相同的寫法

border:12px solid red;

特點：沒有順序要求，線型為必寫項。

邊框合並

 border-collapse:collapse;

獲取焦點

內邊距（padding）

padding-left | right | top | bottom

padding連寫

padding: 20px; 上右下左內邊距都是20px
padding: 20px 30px; 上下20px 左右30px
padding: 20px 30px 40px; 上內邊距為20px 左右內邊距為30px 下內邊距為40

padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px

內邊距撐大盒子的問題

影響盒子寬度的因素
內邊距影響盒子的寬度
邊框影響盒子的寬度
盒子的寬度=定義的寬度+邊框寬度+左右內邊距

繼承的盒子一般不會被撐大

包含（嵌套）的盒子，如果子盒子沒有定義寬度，給子盒子設置左右內邊距，一般不會撐大盒子。

外邊距（margin）

margin-left | right | top | bottom

外邊距連寫

margin: 20px; 上下左右外邊距20px
margin: 20px 30px; 上下20px 左右30px
margin: 20px 30px 40px; 上20px 左右30px 下 40px
margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px

垂直方向外邊距合並

兩個盒子垂直一個設置上外邊距，一個設置下外邊距，取的設置較大的值。

嵌套的盒子外邊距塌陷

給父盒子設置邊框
給父盒子overflow:hidden; ==bfc 格式化上下文==

行內元素可以定義左右內外邊距，上下的會被忽略掉

CSS之盒子模型

12px overflow 都是 padding ash ted markdown style 文字行高瀏覽器默認文字大小：16px 行高是==基線與基線==之間的距離行高=文字大小+上下邊距行高的單位單位文字大小值 px 20px 20px

CSS之——盒子模型、盒子的定位與浮動

一、CSS盒子模型所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。 CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

CSS基礎之盒子模型及浮動佈局

盒模型談到盒模型，有經驗的小夥伴一定滾瓜爛熟，無非就是內容(content)、填充(padding)、邊框(border)、邊界(margin)；這些屬性我們可以把它轉移到我們日常生活中

CSS的盒子模型有哪些，區別是什麽

post 分享 clas src ont bubuko 模型 content 圖片 1）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border) 2）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分

CSS中盒子模型的真實寬高怎麼計算

盒子一共有四個屬性：分別為外邊距（margin)、邊框（border)、內邊距（padding)、內容（content). 關係如下圖所示：而我們平常設定盒子的寬和高往往是指的內容的寬和高 div{ width:200px; height:18px; }

前端-CSS-6-盒子模型

上面的佈局寬度div{ width: 200px; height: 200px; border: 10px solid red; padding: 20px; } ----

day044CSS相關屬性之盒子模型、float浮動、overflow溢位屬性、position定位

本節內容：CSS相關屬性2 1、CSS盒子模型 2、float浮動 3、overflo溢位屬性

簡述對CSS的盒子模型理解？

CSS盒子模型也叫做框模型，具備內容(content)、填充(padding)、邊框(border)、邊界(margin)這些屬性。在CSS中，每一個元素都被視為一個框，而每個框都有三個屬性： border:元素的邊框（可能不可見），用於將框的邊緣與其他框分

【CSS】盒子模型

一、什麼是CSS？ CSS（Cascading Style Sheet）：層疊樣式表是將網頁的內容與樣式進行分離的一種語言，也就是在aspx或html中設計網頁的內容，在CSS中設定網頁的樣式

內容(content)、填充(padding)、邊框(border)、邊界(margin)：CSS中盒子模型有何區別？

什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。一個盒子模型由 content(內容)、border(邊

CSS中盒子模型的總結

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。內邊距（padding）：內容與邊框之間的距離外邊距（margin）: 盒子與盒

深入瞭解CSS中盒子模型

CSS中盒子模型介紹什麼是盒子？盒子是用來儲存物品，我們可以將盒子理解為酒盒，酒盒有什麼組成的呢？有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。我們怎麼理解CSS中的盒子呢，CSS中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。 CSS中盒子的主要屬性有5種如：width寬度、height高度