行高 字型 內外邊距 十一月9號學習內容

2021-10-10 09:26:21 字數 2287 閱讀 4503

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...