html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架構(gòu)
盒子模型；
以內(nèi)容區(qū)(顯示文本和圖像)
內(nèi)邊距(內(nèi)容區(qū)至邊距的距離)
邊距(內(nèi)容區(qū)的邊界)
外邊距(元素的邊框之間的距離)
1.邊距；
border屬性；
簡(jiǎn)寫(xiě)屬性用來(lái)設(shè)置邊距的上(top)右(right)下(bottom)左(left)。寬度，顏色和樣式
div{
width: 200px;
height: 200px;
background-color: blue;
border-right: 5px double darkgray;
border-bottom: 10px dashed red;
border-left: 15px dotted lime;
}
盒子的陰影；
以box-shadow屬性設(shè)置盒子陰影效果
offset-x表示陰影的水平方向偏移量；
負(fù)值為左偏移正值為右偏移
offset-y表示陰影的垂直方向偏移量；
負(fù)值為左偏移正值為右偏移
div{
width:200px;
height: 200px;
background-color: blue;
box-shadow: 3px 3px 3px black;
/*設(shè)置盒子陰影*/
}
邊框圓角；
以border-radius定義來(lái)設(shè)置邊距的圓角；直角，圓角還是橢圓角
div {
width: 100px;
height: 100px;
}
#qq {
background-color: red;
border-radius: 25px;
}
#ww {
background-color: blue;
border-radius: 50px;
}
#ee {
background-color: lime;
border-radius: 50px 25px;
}
img {
border-radius: 50px;
}
邊框圖像；
以border-image定義來(lái)設(shè)置在元素的邊框上的圖像
div {
width: 100px;
height: 100px;
/*background-color: lightcoral;*/
border: 30px solid transparent;
/*
邊框的圖像 - 類似于背景圖像的設(shè)置
* border-image-source - 設(shè)置邊框圖像的路徑
* border-image-width - 設(shè)置邊框圖像的寬度
* border-image-repeat - 設(shè)置邊框圖像的平鋪方式
*/
border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}
愛(ài)新覺(jué)羅2.內(nèi)邊距；
paddying屬性；
也屬于簡(jiǎn)寫(xiě)屬性用來(lái)設(shè)置盒子的內(nèi)邊距上，右，下，左
#qq{
width: 200px;
height: 200px;
background-color: blue;
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
#hh{
width: 200px;
height: 200px;
background-color: red;
}
3.外邊距；
上外邊距和左外邊距；
以margin-left設(shè)置元素的水平方向的位置
值為正數(shù)，當(dāng)前元素向右移動(dòng)
值為負(fù)數(shù)，當(dāng)前元素向左移動(dòng)
margin-top設(shè)置元素垂直方向的位置
值為正數(shù)，當(dāng)前元素向下移動(dòng)
值為負(fù)數(shù)，當(dāng)前元素向上移動(dòng)
上外邊距和右外邊距
以margin-bottom設(shè)置下一個(gè)元素的位置
值為正數(shù)，下一個(gè)兄弟元素向下移動(dòng)
值為負(fù)數(shù)，下一個(gè)兄弟元素向上移動(dòng)
margin-right設(shè)置下一個(gè)元素的位置
值為正數(shù)，下一個(gè)兄弟元素向右移動(dòng)
值為負(fù)數(shù)，下一個(gè)兄弟元素向左移動(dòng)
div {
display: inline-block;
}
#d1 {
width: 200px;
height: 200px;
background-color: lightcoral;
/*
margin-bottom 下外邊距控制塊級(jí)元素的下一個(gè)兄弟元素的位置
* 如果值為正數(shù)的話，下一個(gè)兄弟元素向下移動(dòng)
* 如果值為負(fù)數(shù)的話，下一個(gè)兄弟元素向上移動(dòng)
*/
/*margin-bottom: -100px;*/
/*
margin-right 右外邊距控制內(nèi)聯(lián)元素或行內(nèi)塊級(jí)元素的下一個(gè)兄弟元素的位置
* 如果值為正數(shù)的話，下一個(gè)兄弟元素向右移動(dòng)
* 如果值為負(fù)數(shù)的話，下一個(gè)兄弟元素向左移動(dòng)
*/
/*margin-right: -5px;*/
}
#d2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
margin-left: -5px;
}
外邊距重疊；
以設(shè)置兩個(gè)相鄰的元素的外邊距，第一個(gè)設(shè)置下外邊距第二個(gè)設(shè)置上外邊距
#qq{
width: 200px;
height: 200px;
background-color: blue;
margin-bottom: 100px;
/*id為ww的div元素向下移動(dòng)100px*/
}
#ww{
width: 200px;
height: 200px;
background-color: red;
margin-top: 200px;
/*id為ww的div元素向下移動(dòng)200px*/
}
外邊距傳遞；
以設(shè)置兩個(gè)元素師父子元素，當(dāng)子元素設(shè)置上外邊距，該上邊距會(huì)在父級(jí)元素內(nèi)出現(xiàn)
#qq{
width: 200px;
height: 100px;
background-color: blue;
/*設(shè)置背景顏色*/
padding-top: 100px;
/*為子級(jí)元素設(shè)置上邊距*/
}
#ww{
width:100px;
height: 100px;
background-color: red;
/*設(shè)置背景顏色*/
}
內(nèi)容水平居中；
以margin: 0 auto；父級(jí)div設(shè)置在元素的水平居中
p {
/*該屬性只對(duì)文本內(nèi)容水平對(duì)齊*/
text-align: center;
/*文本水平方向居中*/
}
div{
width: 100px;
height: 100px;
background-color: blue;
margin: 0 auto;
}
星際戰(zhàn)甲
4.盒子模型；
塊級(jí)元素盒子模型；
可設(shè)置寬高，設(shè)置高度為其中內(nèi)容的高度
div{
width: 200px;
height: 200px;
background-color: blue;
border: 1px solid black;
/*設(shè)置邊框的樣式*/
padding: 50px;
/*設(shè)置內(nèi)邊距*/
margin: 50px;
/*設(shè)置外邊距*/
}
內(nèi)塊級(jí)元素盒子模型；
是不可設(shè)置寬和高，元素的大小事其中內(nèi)容撐起
span{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
padding: 30px;
/*水平方向內(nèi)邊距是有效；設(shè)置文本內(nèi)容的水平方向位置*/
/*垂直方向內(nèi)邊距是有效；文本內(nèi)容位置沒(méi)有變，而內(nèi)邊距會(huì)向上或向下擴(kuò)展*/
margin: 30px;
/*垂直方向上或下的外邊距是無(wú)效的
而水平方向的外邊距是有效的*/
}
星際戰(zhàn)甲
行內(nèi)塊級(jí)元素盒子模型；
不自動(dòng)換行，可設(shè)置寬高；
div{
width: 100px;
height: 100px;
border: 1px solid black;
padding: 30px;
/*設(shè)置內(nèi)邊距*/
margin: 30px;
/*設(shè)置外邊距*/
}
#qq{
background-color: red;
}
#hh{
background-color: blue;
}
box-sizing屬性；
以box-sizing屬性設(shè)置盒子模型；
content-box；為默認(rèn)值為標(biāo)準(zhǔn)盒子模型
設(shè)置為內(nèi)容區(qū)；內(nèi)邊距；邊框；外邊框
border-box；為怪異盒子模型
設(shè)置盒子的大小；外邊距
#qq {
width: 200px;
height: 200px;
/*
默認(rèn)值，標(biāo)準(zhǔn)盒子模型
* 實(shí)際的寬度 = width + padding-left + padding-right + border-left + border-right
* 實(shí)際的高度 = height + padding-top + padding-bottom + border-top + border-bottom
*/
box-sizing: content-box;
border: 10px solid black;
padding: 50px;
/*設(shè)置內(nèi)邊距*/
margin: 50px;
/*設(shè)置外邊距*/
background-color: lightcoral;
}
#hh {
width: 200px;
height: 200px;
/*
怪異盒子模型
* 實(shí)際寬度 = width
* 實(shí)際高度 = height
*/
box-sizing: border-box;
border: 10px solid black;
padding: 50px;
/*設(shè)置內(nèi)邊距*/
margin: 50px;
/*設(shè)置外邊距*/
background-color: green;
}
總結(jié)
以上是生活随笔為你收集整理的html盒子模型页面居中,【静态页面架构】CSS之盒子模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 怎么在bios里面关闭触摸屏 BIOS中
- 下一篇： css提取页面元素唯一性_下面这个函数，