一行文字實際占用的高度,字型大小一般都是偶數。
**取值方式:**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.瀏覽器預設的最低的。不同瀏覽器預設顯示的內容樣式...