行間距
在CSS中并沒有直接提供設置行間距的方式筝尾,我們只能通過設置行高來間接的設置痰驱,行高越大行間距越大
使用line-height來設置行高
行高類似于我們上學用的單線本肩民,單線本是一行一行的蔽豺,線與線之間的距離就是行高
網(wǎng)頁中的文字實際上也是寫在一個看不見的線中的,而文字會默認在行高中垂直居中顯示
行間距 = 行高 - 字體大小
通過設置line-height可以間接的設置行高
可以接收的值:
1.直接接收一個大小
2.可以指定一個百分數(shù)棘利,則會相對于字體去計算行高
3.可以直接傳一個數(shù)值橱野,則行高會設置字體大小相應的倍數(shù)
對于單行文本來說,可以將行高設置為和父元素的高度一致赡译,這樣可以是單行文本在父元素中垂直居中
在font中也可以指定行高
在字體大小后可以添加/行高仲吏,來指定行高,該值是可選的蝌焚,如果不指定則會使用默認值
文本的樣式
text-transform可以用來設置文本的大小寫
可選值:
1.none 默認值,該怎么顯示就怎么顯示誓斥,不做任何處理
2.capitalize 單詞的首字母大寫只洒,通過空格來識別單詞
3.uppercase 所有的字母都大寫
4.lowercase 所有的字母都小寫
text-decoration可以用來設置文本的修飾
可選值:
1.none:默認值,不添加任何修飾劳坑,正常顯示
2.underline 為文本添加下劃線
3.overline 為文本添加上劃線
4.line-through 為文本添加刪除線
超鏈接會默認添加下劃線毕谴,也就是超鏈接的text-decoration的默認值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設置為none
letter-spacing可以指定字符間距
word-spacing可以設置單詞之間的距離,實際上就是設置詞與詞之間空格的大小
text-align用于設置文本的對齊方式
可選值:
1.left 默認值距芬,文本靠左對齊
2.right 文本靠右對齊
3.center 文本居中對齊
4.justify 兩端對齊
通過調(diào)整文本之間的空格的大小涝开,來達到一個兩端對齊的目的
text-indent用來設置首行縮進
這個值一般都會使用em作為單位
當給它指定一個正值時,會自動向右側縮進指定的像素
如果為它指定一個負值框仔,則會向左移動指定的像素
通過這種方式可以將一些不想顯示的文字隱藏起來
盒子的模型
使用width來設置盒子內(nèi)容區(qū)的寬度
使用height來設置盒子內(nèi)容區(qū)的高度
width和height只是設置的盒子內(nèi)容區(qū)的大小舀武,而不是盒子的整個大小,盒子可見框的大小由內(nèi)容區(qū)离斩,內(nèi)邊距和邊框共同決定
為元素設置邊框
要為一個元素設置邊框必須指定三個樣式
1.border-width:邊框的寬度
2.border-color:邊框顏色
3.border-style:邊框的樣式
使用border-width可以分別指定四個邊框的寬度
如果在border-width指定了四個值則四個值會分別設置給上银舱、右、下跛梗、左寻馏,按照順時針的方向設置的
如果指定三個值則三個值會分別設置給上、左右核偿、下
如果指定兩個值則兩個值會分別設置給上下诚欠、左右
如果指定一個值,則四邊全都是該值
除了border-width,CSS中還提供了四個border-xxx-width
xxx的值可能是top right bottom left 專門用來設置指定邊的寬度
設置邊框的顏色
和寬度一樣轰绵,color也提供四個方向的樣式粉寞,可以分別指定顏色
設置邊框的樣式
可選值:
1.none,默認值藏澳,沒有邊框
2.solid 實線
3.dotted 點狀邊框
4.dashed 虛線
5.double 雙線
style也可以分別指定四個邊的邊框樣式仁锯,規(guī)則和width一致,同時它也提供border-xxx-style四個樣式翔悠,來分別設置四個邊
邊框
設置邊框
大部分的瀏覽器中业崖,邊框的寬度和顏色都是有默認值,而邊框的樣式默認值都是none
border邊框的簡寫樣式蓄愁,通過它可以同時設置四個邊框的樣式双炕,寬度,顏色撮抓, 而且沒有任何的順序要求
border一指定就是同時指定四個邊不能分別指定border-top border-right border-bottom border-left妇斤,可以單獨設置四個邊的樣式,規(guī)則和border一樣丹拯,只不過它只對一個邊生效
內(nèi)邊距
內(nèi)邊距(padding)站超,指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離,一共有四個方向:padding-top乖酬、padding-right死相、padding-bottom、padding-left咬像,內(nèi)邊距會影響盒子的可見框的大小算撮,元素的背景會延伸到內(nèi)邊距
盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定
盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
使用padding可以同時設置四個邊框的樣式县昂,規(guī)則和border-width一致
外邊距
外邊距指的是當前盒子與其他盒子之間的距離肮柜,他不會影響可見框的大小,而是會影響到盒子的位置
盒子有四個方向的外邊距:margin-top倒彰、margin-right审洞、margin-bottom、margin-left
由于頁面中的元素都是靠左靠上擺放的狸驳,所以注意當我們設置上和左外邊距時预明,會導致盒子自身的位置發(fā)生改變,而如果是設置右和下外邊距會改變其他盒子的位置
外邊距也可以指定為一個負值耙箍,如果外邊距設置的是負值撰糠,則元素會向反方向移動
margin還可以設置為auto,auto一般只設置給水平方向的margin
如果只指定辩昆,左外邊距或右外邊距的margin為auto則會將外邊距設置為最大值
垂直方向外邊距如果設置為auto阅酪,則外邊距默認就是0
如果將left和right同時設置為auto,則會將兩側的外邊距設置為相同的值,就可以使元素自動在父元素中居中
所以我們經(jīng)常將左右外邊距設置為auto术辐,以使子元素在父元素中水平居中
外邊距同樣可以使用簡寫屬性 margin砚尽,可以同時設置四個方向的外邊距,規(guī)則和padding一樣
外邊距的重疊
垂直外邊距的重疊
在網(wǎng)頁中相鄰的垂直方向的外邊距會發(fā)生外邊距的重疊
所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和
如果父子元素的垂直外邊距相鄰了,則子元素的外邊距會設置給父元素
瀏覽器默認樣式
瀏覽器為了在頁面中沒有樣式時辉词,也可以有一個比較好的顯示效果必孤,所以為很多的元素都設置了一些默認的margin和padding,而它的這些默認樣式瑞躺,正常情況下我們是不需要使用的敷搪。
所以我們往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統(tǒng)統(tǒng)的去掉
內(nèi)聯(lián)元素的盒模型
盒模型分成內(nèi)容區(qū)、內(nèi)邊距 幢哨、邊框 赡勘、外邊距四個部分,內(nèi)聯(lián)元素不能設置width和height
內(nèi)聯(lián)元素可以設置水平方向的內(nèi)邊距捞镰,內(nèi)聯(lián)元素可以設置垂直方向內(nèi)邊距闸与,但是不會影響頁面的布局,內(nèi)聯(lián)元素可以設置邊框岸售,但是垂直的邊框不會影響到頁面的布局践樱,
內(nèi)聯(lián)元素支持水平方向的外邊距,為右邊的元素設置一個左外邊距凸丸,水平方向的相鄰外邊距不會重疊映胁,而是求和,內(nèi)聯(lián)元素不支持垂直外邊距
display和visibility
將一個內(nèi)聯(lián)元素變成塊元素
通過display樣式可以修改元素的類型
可選值:
1.inline:可以將一個元素作為內(nèi)聯(lián)元素顯示
2.block: 可以將一個元素設置塊元素顯示
3.inline-block:將一個元素轉換為行內(nèi)塊元素甲雅,可以使一個元素既有行內(nèi)元素的特點又有塊元素的特點,既可以設置寬高坑填,又不會獨占一行
4.none: 不顯示元素抛人,并且元素不會在頁面中繼續(xù)占有位置
display: none:使用該方式隱藏的元素,不會在頁面中顯示脐瑰,并且不再占據(jù)頁面的位置
visibility可以用來設置元素的隱藏和顯示的狀態(tài)
可選值:
1.visible 默認值妖枚,元素默認會在頁面顯示
2.hidden 元素會隱藏不顯示
使用 visibility:hidden;隱藏的元素雖然不會在頁面中顯示,但是它的位置會依然保持
overflow
子元素默認是存在于父元素的內(nèi)容區(qū)中苍在,理論上講子元素的最大可以等于父元素內(nèi)容區(qū)大小绝页,如果子元素的大小超過了父元素的內(nèi)容區(qū),則超過的大小會在父元素以外的位置顯示寂恬。超出父元素的內(nèi)容续誉,我們稱為溢出的內(nèi)容。父元素默認是將溢出內(nèi)容初肉,在父元素外邊顯示酷鸦,通過overflow可以設置父元素如何處理溢出內(nèi)容:
可選值:
1.visible,默認值,不會對溢出內(nèi)容做處理臼隔,元素會在父元素以外的位置顯示
2.hidden, 溢出的內(nèi)容嘹裂,會被修剪,不會顯示
3.scroll, 會為父元素添加滾動條摔握,通過拖動滾動條來查看完整內(nèi)容寄狼。該屬性不論內(nèi)容是否溢出,都會添加水平和垂直雙方向的滾動條
- auto氨淌,會根據(jù)需求自動添加滾動條泊愧,需要水平就添加水平,需要垂直就添加垂直宁舰,都不需要就都不加