邊框border
快捷鍵
bd+border:1px?solid?#000;實(shí)線
dashed虛線 ?dotted小圓點(diǎn) ?double雙線
bt+ ?頂部邊框 ? ? ? ? ? ? ? ?bl+左邊邊框 ? ? ? ? ? ? ? ? ? br+右邊邊框 ? ? ? ? ? ? ? bb+底部邊框
顏色(默認(rèn)黑色)和寬度可以省略 ? ?樣式(線類型)不可以
同時(shí)分別設(shè)置四邊不同的邊框樣式
border-width:上右下左;
border-style:上右下左;
border-color:上右下左;
這三個(gè)屬性的取值省略時(shí)的規(guī)律
上右下左>上右下>左邊的取值和右邊的一樣
上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
上右下左>上>右下左邊取值和上邊一樣
div.box$*6? ------>
內(nèi)邊距
邊框和內(nèi)容之間的距離就是內(nèi)邊距
格式:非連寫--->padding-top:?;內(nèi)容距離頂部的距離
padding-right:?;內(nèi)容距離右邊的距離 ? padding-left:; ? ?padding?-bottom:;
連寫-->padding:上右下左;
這三個(gè)屬性的取值省略時(shí)的規(guī)律
上右下左>上右下>左邊的取值和右邊的一樣
上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
上右下左>上>右下左邊取值和上邊一樣
注意點(diǎn):給標(biāo)簽設(shè)置內(nèi)邊距后,標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化
內(nèi)邊距也會(huì)有背景顏色
外邊距
標(biāo)簽和標(biāo)簽之間的距離就是外邊距
格式:非連寫--->?margin-top:;
連寫--->margin:上右下左;
* 這三個(gè)屬性的取值省略時(shí)的規(guī)律
上右下左>上右下>左邊的取值和右邊的一樣
上右下左>上右>左邊的取值和右邊的一樣下邊的取值和上邊的一樣
上右下左>上>右下左邊取值和上邊一樣
注意點(diǎn):外邊距的那一部分是沒有顏色的
外邊距合并現(xiàn)象
在默認(rèn)布局的垂直方向上,默認(rèn)情況下外邊距是不會(huì)疊加的兼雄,會(huì)出現(xiàn)合并現(xiàn)象部默,誰的外邊距比較大就聽誰的
CSS盒子模型
增加內(nèi)邊距、邊框還要保持元素寬高不變方法有
1.減去內(nèi)容的寬高
2.box-sizing屬性---->border-box用法:
div{box-sizing:border-box;}
注意點(diǎn):1.如果兩個(gè)盒子是嵌套關(guān)系称近,那么設(shè)置了里面一個(gè)盒子頂部的外邊距第队,外面一個(gè)盒子也會(huì)被頂下來
如果外面的盒子不想被一起頂下來,那么可以給外面的盒子添加一個(gè)邊框?qū)傩?/p>
在開發(fā)中刨秆,一般情況下如果需要控制嵌套關(guān)系盒子之間的距離凳谦,應(yīng)該首先考慮padding,其次再考慮margin.
注意點(diǎn):1.在嵌套關(guān)系的盒子中,我們可以利用margin:0?auto;的方式來讓里面的盒子在外面的盒子中水平居中
margin:0?auto;只對(duì)水平方向有效衡未,對(duì)垂直方向無效尸执。
text-align:center和margin:0 auto;區(qū)別
text-align:center;作用設(shè)置盒子中存儲(chǔ)的文字/圖片水平居中
margin:0?auto;作用讓盒子自己水平居中
選中一段文字后使用(Ctrl+alt+t)可以給這段文字包裹一個(gè)標(biāo)簽