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