1 水平對(duì)齊
文本對(duì)齊 text-align
h1 { text-align: center }
運(yùn)行效果:
1-1 使用 margin 屬性來水平對(duì)齊
把左和右外邊距設(shè)置為 auto艘蹋,規(guī)定的是均等地分配可用的外邊距
div {
? width: 300px;
? background-color: #a7d;
? margin-right: auto;
? margin-left: auto
}
運(yùn)行效果:
1-2 使用 position 屬性進(jìn)行左和右對(duì)齊
對(duì)齊元素的方法之一是使用絕對(duì)定位:
div {
? width: 300px;
? background-color: #a7d;
? position: absolute;
? red: 150px;
? top: 100px
}
運(yùn)行效果:
絕對(duì)定位元素會(huì)被從正常流中刪除膜眠,并且能夠交疊元素。
.div1 {
? width: 300px;
? height: 300px;
? background-color: #a7d;
? position: relative;
? left: 150px;
? top: 100px
}
.div2 {
? width: 100px;
? height: 100px;
? background-color: #07ccd3;
? position: absolute;
? top: 150px;
? left: 150px
}
運(yùn)行效果:
1-3 使用 float 屬性來進(jìn)行左和右對(duì)齊
對(duì)齊元素的另一種方法是使用 float 屬性:
.div2 {
? width: 100px;
? height: 100px;
? background-color: #07ccd3;
? float: right;
? margin: 10px
}
運(yùn)行效果:
2 尺寸
2-1 像素
像素(px)設(shè)置寬度痊远,文本寬度會(huì)被固定,不會(huì)發(fā)生變化趁仙!
h1 {
? width: 200px;
? background-color: #a7d
}
運(yùn)行效果:
2-2 百分比
百分比(%)設(shè)置寬度感论,文本寬度會(huì)隨著父元素寬度的變化而變化,若無父元素曲尸,便隨視圖寬度的變化而變化
h1 {
? width: 20%;
? background-color: #a7d
}
運(yùn)行效果:
文本寬度可以設(shè)置最大寬度和最小寬度赋续!
最大寬度 “ max-width ”
最小寬度 “ min-width ”
用百分比(%),像素(px)和數(shù)值來設(shè)置段落的行間距
p {
line-height: 200%
/* line-height: 30px */
/* line-height: 2 */
}
運(yùn)行效果:
用 百分比(%)設(shè)置段落的行間距
大多數(shù)瀏覽器中默認(rèn)行高大約是 110% 到 120%
用 像素(px)設(shè)置段落的行間距
大多數(shù)瀏覽器中默認(rèn)行高大約是 20px
用 數(shù)值 設(shè)置段落的行間距
默認(rèn)行高大約是 1