學習前端的第二天

2021-10-10 09:28:25 字數 2398 閱讀 9269

一行文字實際占用的高度,字型大小一般都是偶數。

**取值方式:**px,百分比。百分比:按照預設的字型大小取值。

特殊用法:

要讓一行文字垂直居中,可以將行高設定為盒子高。(多行文字失效)

網頁中,中文主要使用的字型:微軟雅黑,宋體,黑體。 英文:arial,consolas。

英文在前,中文在後。

微軟雅黑:microsoft yahei

宋體:simsun

黑體:simhei

取值方式:

數字:100-900;

單詞:lighter normal,bold,bolder

fwb:font-weight: bold;

fw:font-weight: normal;

italic :跟字型樣式有關係,oblique斜體

字型大小取值方式:

單詞,em,px,百分比

設定文字居中方式

text-align: left;

首行文字縮排

em px 百分比

text-indent: 2em;

文字修飾

none,正常,預設值、underline:下劃線、overline:上劃線、

line-through:中劃線、text-decoration: line-through、color: green、

單詞間間距: 中文無效 word-spacing: 48px

單個字母間的間距:

letter-spacing: 48px;

大小寫轉換:

text-transform: lowercase;

什麼叫盒子?

乙個元素在頁面中真實佔據的位置,包括五個部分:內容的寬,內容的高,內邊距,邊框,外邊距。

寬:width px;

高:height px;

定義的內容的寬和高。

padding:

內容和邊框之間的距離。

內邊距是可以被背景色渲染的。

可以給單邊設定內邊距:

padding-left: 50px;

padding-top: 30px;

padding-right: 40px;

padding-bottom: 60px;

四值法:

單值:上下左右。

雙值:上下 左右。

三值:上 左右 下

四值:上 右 下 左 順時針。

倒三角:

1.設定邊框,然後將內容寬高設定為0

2.取消底部邊框。

3.將左右邊框的顏色改為white。(透明色)

margin:

兩個盒子之間的距離

技巧假如有乙個padding/border/margin 與其他的三條邊不同,其他三條邊一樣,這個時候我們設定總體樣式,再單獨去設定它的樣式。

border: 5px solid red;

/* css:層疊特效 */

border-bottom: 10px dashed green;

清除預設樣式

有一些標籤會有預設的樣式,比如預設的margin。

我們可以使用:

*高度

我們一般是不設定高度的,而是用內容去撐開盒子的高。

內容的多少不是由咱們決定的,使用自適應可以避免大片留白和內容溢位。

溢位內容隱藏

overflow: hidden;

外邊距塌陷

垂直方向上相鄰的兩個盒子,如果都有外邊距,則外邊距相交的地方會出現外邊距重合現象,也叫作外邊距塌陷。

取值:margin相遇的部分,並不是兩個margin值的和,而是為最大值。

如果兩個margin值為負數,取值為絕對值最大的。

如果一正一負,結果為兩者之和。

居中方法

水平居中:text-align:center

垂直居中:單行文字 line-height等於盒子的高。

盒子居中

**水平居中:**margin: 0 auto;

垂直居中:給盒子新增乙個上下一樣的padding。

**真實的寬:**內容的寬+左padding+左border+右padding+右border

**真實的高:**內容的高+上padding+下padding+上border+下border

子盒子的寬度若不設定預設為父盒子的內容的寬。

若設定了邊框和內邊距,父盒子的內容寬減去邊框和內邊距的大小,剩下的就是子盒子的寬度。

前端學習第二天

1.what is web 語義化 假設我們世界中有乙隻神奇小爬蟲,這個小爬蟲非常神奇,我們看不到它,同時它爬行的速度非常快,它可以在世界上所有的計算機之間爬來爬去,爬過的地方都會留下一條線,這條線就是網線。當小爬蟲爬過了大部分的計算機之後,這些計算機就組成了網路,而爬蟲的速度可以理解成網速。小爬蟲...

前端學習第二天

一 html文字標籤 hn,span,p html中標題 heading 分為6級,分別是 h1 h2 h3 h4 h5 h6 h1 h6標籤具有和p標籤一樣的特徵 佔滿整行,上下換行 普通文字標籤span 在html用於顯示文字的基本標籤對是。雖然不編寫任何標籤,將文字直接寫於標籤對內也能正常顯示...

前端學習第二天

層疊的概念 使用樣式的三種方式 1.引用外部樣式檔案 2.寫在head裡面style標籤內 3.寫在元素開始標籤內 用style屬性 同一 外部檔案,style標籤,內聯 層疊的優先順序 1.id的優先順序最高 2.類其次 3.tag標籤類再其次 4.瀏覽器預設的最低的。不同瀏覽器預設顯示的內容樣式...