CSS盒子模型

css 盒子模型

border-style : 邊框樣式 none (預設) | hidden (隱藏) | dotted(虛線) | dashed(點線） | solid(實線)

padding 內邊距

margin 外邊距 ：  當margin設為負數時，會使被設為負數的塊向相反的方向移動，甚至覆蓋在另外的塊上。當塊之間是父子關係時，通過設定子塊的margin引數為負數，可以將子塊從父塊中「分離」出來。

屬性值的簡寫

1：如果給出2個屬性值 前者表示上下的屬性 後者表示左右的屬性

2：如果給出3個屬性 前者表示上 中間表示左右 後表示下。

3 : 如果給出4個屬性值，依次表示上、右、下、左的屬性，即順時針排序

元素分類：

塊級元素 div1 和div2 之間的垂直margin = max (div1 的margin—bottom 和div2 的margin—top 佔一行)

行內元素(inline)

首先談談人們經常提及的塊級元素和行內(內聯)元素

p, ul, form, div等元素被稱為塊級元素，這些元素顯示為一塊兒內容（會自動換行），span, input 等元素稱為行內元素，這兩者主要區別就是塊級元素會從上到下乙個個垂直排列，每個自佔一行，如下即使兩個div之間沒任何元素，綠色的div仍然會顯示在hongsediv下方，而不是右方

<

div 
style
="height: 100px; width: 100px; background-color: red;"
>
div>
<
div 
style
="height: 100px; width: 100px; background-color: green;"
>
div>

簡單了解了這些知識，讓我們看看display常用的幾個屬性，一些不太常用的我也不明白，就不說了值描述

none

此元素不會被顯示。

block

此元素將顯示為塊級元素，此元素前後會帶有換行符。

inline

此元素會被顯示為內聯元素，元素前後沒有換行符。

inline-block

行內塊元素。（css2.1 新增的值）

我們在顯示隱藏元素的時候經常會用到把display設為none或者』』，設為none效果很明顯，就是讓元素脫離文件流，不顯示，不佔文件空間，而設為』』其實就是設定為元素預設屬性block或inline，inline-block屬性是css2.1新加值，ie8以上及其他主流瀏覽器都已經支援，它可以使元素像行內元素那樣水平一次排列，但是框的內容符合塊級元素行為，能夠顯示設定寬，高，內外邊距。很有意思。

還有一點兒很有意思，可以通過不同的賦值改變元素生成框的型別，也就是說，通過將display屬性設定為block，可以使行內元素表現的想塊級元素一樣，反之亦然。

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...

css盒子模型 說說css盒子模型

引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...

css 盒子模型 ie盒子模型

css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...