height:
100px
什麼是行高
一行文字實際占用的高度。
取值方式:px,百分比。
百分比:按照預設的字型大小取值。
特殊用法:
要讓一行文字垂直居中,可以將行高設定為盒子高。(多行文字失效)
行高,字型大小一般都是偶數。
谷歌瀏覽器最小可以設定12px,預設是16px
網頁中,中文主要使用的字型:微軟雅黑,宋體,黑體。
微軟雅黑:microsoft yahei
宋體:simsun
黑體:simhei
取值方式:數字,單詞
數字:100-900;
單詞:lighter normal,bold,bolder
fwb:font-weight: bold;
fw:font-weight: normal
italic :跟字型樣式有關係,oblique斜體
font: 30px/60px "consolas";
必須寫的兩個值 字型大小 字型
font-size: 32px;
取值:單詞,em,px,百分比
font-size: xx-small;
font-size: xx-large;
font-size: 48px;
font-size: 1em;
font-size: 200%;
設定文字居中方式
text-align: left;
首行文字縮排 em px 百分比
text-indent: 2em;
文字修飾
none,正常,預設值。
underline:下劃線。
overline:上劃線。
line-through:中劃線。
text-decoration: line-through;
單詞間間距: 中文無效。
word-spacing: 48px;
單個字母間的間距
letter-spacing: 48px;
大小寫轉換
text-transform: lowercase
標準盒模型
什麼叫盒子?
乙個元素在頁面中真實佔據的位置。
五個部分:內容的寬,內容的高,內邊距,邊框,外邊距。
寬:width px;
高:height px;
定義的內容的寬和高。
padding:
內容和邊框之間的距離。
內邊距是可以被背景色渲染的
用雞蛋好比盒子
內容是蛋黃content
蛋白是padding內邊距
蛋皮是border邊框(有虛線,實線,雙實線等)
雞蛋外一定範圍是margin外邊距
padding:
內容和邊框之間的距離。
內邊距是可以被背景色渲染的。
可以給單邊設定內邊距:
padding-left: 50px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 60px;
四值法:
單值:上下左右。
雙值:上下 左右。
三值:上 左右 下
四值:上 右 下 左 順時針。
***border ***
border:5px double red;
三要素寫法:
寬度,樣式,顏色
dotted 虛線
solid 實線
## .溢位內容隱藏
overflow: hidden;
盒子水平居中(必須有寬度)
margin: 0 auto;
文字居中
text-align:center
## .外邊距塌陷
垂直方向上相鄰的兩個盒子,如果都有外邊距,則外邊距相交的地方會出現外邊距重合現象
也叫作外邊距塌陷。
取值:margin相遇的部分,並不是兩個margin值的和,而是為最大值。
如果兩個margin值為負數,取值為絕對值最大的。
如果一正一負,結果為兩者之和。
假如有乙個padding/border/margin 與其他的三條邊不同,其他三條邊一樣,
這個時候我們設定總體樣式,再單獨去設定它的樣式
CSS之內外邊距
一 概述 我們來說說標籤的內外邊距,內邊距 padding 外邊距 margin 我們先來看看這個標準的盒子模型吧,如圖所示 二 外邊距 說明 我們外邊距用margin樣式來表示。外邊框可以理解為,邊框的擴充套件還需要占用多大的空間,也是上 下 左 右,分別是margin top,margin bo...
長度單位以及內外邊距
主要內容 1 距離單位之px 2 距離單位之dp 3 距離單位之sp 4 控制項的外邊距與內邊距 控制項的大小使用dp,字型的大小使用sp 什麼是畫素?上面是乙個屏,解析度為800 480,說明這個屏的總共畫素為800 480個。每個畫素是有3種顏色 rgb 組成。什麼dpi 通常所說的螢幕大小,比...
CSS中的內外邊距
css中的內邊框 css中邊框與內容之間的間距叫作css的內邊距。css的內邊距可以通過padding進行修飾。padding簡寫屬性在乙個宣告中設定所有內邊距屬性 auto length 通過使用下面單獨的四個屬性可以分別設定上,下,左,右內邊距。padding top padding butto...