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中所有的行都有自己的行高
注意点:
行高和盒子高不是同一个概念
行高指的是每行内容的高度
盒子高指的是元素的高度
规律:
1.文字在行高中默认是垂直居中的
2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的
简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可
3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中
-->
<!--<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>-->
<!--<div>我是文字我是文字我是文字</div>-->
<!--<div>我是文字</div>-->
<div>我是文字我是文字我是文字</div>
</body>
</html>
1 行高就是盒子的高，对吗
2 如何让元素中的一行内容在元素中垂直居中
3 如何让元素中的多行内容在元素中垂直居中
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.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差
2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差
3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离
-->
<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>
</body>
</html>
网友评论