1 行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
p{
width: 610px;
height: 110px;
background-color: #cdcdcd;
border: 1px solid #000000;
}
div{
box-sizing: border-box;
width: 100px;
height: 80px;
border: 1px solid #000;
line-height: 20px;
/*line-height: 80px;*/
padding-top:20px;
padding-bottom:20px;
}
</style>
</head>
<body>
<!--
1.什么是行高?
在CSS中所有的行都有自己的行高
注意點:
行高和盒子高不是同一個概念
行高指的是每行內(nèi)容的高度
盒子高指的是元素的高度
規(guī)律:
1.文字在行高中默認(rèn)是垂直居中的
2.在企業(yè)開發(fā)中我們經(jīng)常將盒子的高度和行高設(shè)置為一樣, 那么這樣就可以保證一行文字在盒子的高度中是垂直居中的
簡而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要設(shè)置這行文字的"行高等于盒子的高"即可
3.在企業(yè)開發(fā)中如果一個盒子中有多行文字, 那么我們就不能使用設(shè)置行高等于盒子高來實現(xiàn)讓文字垂直居中, 只能通過設(shè)置padding來讓文字居中
-->
<!--<p>葬愛:非主流文化的常用詞，是當(dāng)今網(wǎng)絡(luò)流行術(shù)語.且流行于非主流殺馬特之中收津。葬基茵，即埋葬崖堤，愛吗氏，即愛情幅垮，翻譯成外語就bury love</p>-->
<!--<div>我是文字我是文字我是文字</div>-->
<!--<div>我是文字</div>-->
<div>我是文字我是文字我是文字</div>
</body>
</html>
1 行高就是盒子的高乌昔，對嗎
2 如何讓元素中的一行內(nèi)容在元素中垂直居中
3 如何讓元素中的多行內(nèi)容在元素中垂直居中
2 還原字體和字號
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>還原字體和字號</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
p{
box-sizing: border-box;
width: 610px;
height: 110px;
background-color: #cdcdcd;
border: 1px solid #000000;
font-family:"黑體";
font-size: 20px;
line-height: 40px;
color: #67676d;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
</style>
</head>
<body>
<!--
注意點:
1.在企業(yè)開發(fā)中, 如果一個盒子中存儲的是文字, 那么一般情況下我們會以盒子左邊的內(nèi)邊距為基準(zhǔn), 不會以右邊的內(nèi)邊距為基準(zhǔn), 因為這個右邊的內(nèi)邊距有誤差
2.右邊內(nèi)邊距的誤差從何而來? 因為右邊如果放不下一個文字, 那么文字就會換行顯示, 所以文字和內(nèi)邊距之間的距離就有了誤差
3.頂部的內(nèi)邊距并不是邊框到文字頂部的距離, 而是邊框到行高頂部的距離
-->
<p>葬愛:非主流文化的常用詞，是當(dāng)今網(wǎng)絡(luò)流行術(shù)語.且流行于非主流殺馬特之中壤追。葬磕道，即埋葬，愛行冰，即愛情溺蕉，翻譯成外語就bury love</p>
</body>
</html>
