資訊專欄INFORMATION COLUMN
摘要：目錄盒模型元素的尺寸元素內(nèi)邊距元素外邊距處理溢出元素的可見性元素的盒類型塊級元素區(qū)塊行內(nèi)元素行內(nèi)塊元素盒類型元素轉(zhuǎn)換盒元素的浮動盒模型盒模型元素的尺寸元素的尺寸元素的尺寸屬性值說明長度值或百分比元素的寬度長度值或百分比元素的高度長度值
目錄
元素的尺寸
| 屬性 | 值 | 說明 |
|---|---|---|
| width | auto、長度值或百分比 | 元素的寬度 |
| height | auto、長度值或百分比 | 元素的高度 |
| min-width | auto、長度值或百分比 | 元素的最小寬度 |
| min-height | auto、長度值或百分比 | 元素的最小高度 |
| max-width | auto、長度值或百分比 | 元素的最大寬度 |
| max-height | auto、長度值或百分比 | 元素的最大高度 |
用于可能動態(tài)產(chǎn)生元素尺寸變大變小的問題，來限制最大最小值
div{
background: silver;
width: 200px;
height: 200px;
min-width: 100px;
min-height: 100px;
}
HTML5
1.2. 元素內(nèi)邊距 padding
div{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
/*上下各空出10,20px*/
padding: 10px 20px;
/*上,右，下，左*/
padding: 10px, 20px,10px,10px;
}
1.3. 元素外邊距 margin
1.4. 處理溢出overflow
溢出的參數(shù)值
值
說明
auto
瀏覽器自動處理溢出內(nèi)容，用滾動條
hidden
有溢出，直接剪掉
scroll
不管是否溢出，都有滾動條
visible
默認值，不管是否溢出，都顯示
div{
overflow-y: auto;
}
1.5. 元素的可見性Visibility
屬性值
說明
visible
默認值，元素在頁面上可見
hidden
元素不可見，但會占據(jù)空間
collapse
元素不可見，隱藏表格的行列。如果不是表格，則和hidden一樣
div{
background: silver;
width: 200px;
height: 200px;
visibility: visible;
}
2. CSS元素的盒類型
CSS盒模型中的display屬性，可以更改元素本身盒類型，那么有哪些盒類型呢？
2.1. 塊級元素(區(qū)塊)
- 能夠設(shè)置元素尺寸，隔離其他元素功能（有換行功能）的元素
,
2.2. 行內(nèi)元素
- 不能設(shè)置元素尺寸，它只能自適應(yīng)內(nèi)容、無法隔離其他元素，其他元素會緊跟其后:
,
2.3. 行內(nèi)-塊元素
- 可以設(shè)置元素尺寸，但是無法隔離其他元素
![]()
2.4. 盒類型元素轉(zhuǎn)換dispaly
值
說明
block
盒為塊級元素
inline
盒為行內(nèi)元素
inline-block
盒為行內(nèi)-塊元素
none
盒子不可見，不占位
div{
background: silver;
width: 200px;
height: 200px;
/*轉(zhuǎn)成了行內(nèi)元素*/
display: inline;
/*轉(zhuǎn)成了行內(nèi)-塊元素*/
display: inline-block
}
3. CSS盒元素的浮動float
值
說明
left
浮動元素靠左
right
浮動元素靠右
none
禁止浮動
#a{
background: maroon;
float: left;
}
#b{
background: green;
float: right;
}
#c{
background: blue;
float: left;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1274.html
相關(guān)文章
-
前端技術(shù) 博客文章、書籍 積累
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結(jié)束標簽之后結(jié)束標簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行
書籍
《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
-
前端技術(shù) 博客文章、書籍 積累
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結(jié)束標簽之后結(jié)束標簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行
書籍
《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
-
前端技術(shù) 博客文章、書籍 積累
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結(jié)束標簽之后結(jié)束標簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行
書籍
《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
-
【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am
摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復(fù)了許多的問題，但是依然延續(xù)實現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴格模式即依據(jù)標準的規(guī)則渲染網(wǎng)頁。
深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth
本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章，然而筆者在讀的時...
發(fā)表評論
0條評論
閱讀 3560·2021-09-22 15:02
閱讀 3845·2021-09-02 15:21
閱讀 2193·2019-08-30 15:55
閱讀 2861·2019-08-30 15:44
閱讀 841·2019-08-29 16:56
閱讀 2484·2019-08-23 18:22
閱讀 3405·2019-08-23 12:20
閱讀 3151·2019-08-23 11:28
