欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端-02CSS基础知识3

程序员文章站 2024-02-01 08:46:52
...

1.行高 line-height

  • 浏览器默认文字大小：16px
  • 行高是文本行基线间的垂直距离（基线与基线位置）
  • 前端-02CSS基础知识3
  • 行高=文字高度+上下边距

行高实战

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行高</title>
	<style type="text/css">
		a.one{
			text-decoration-line:none; 
			display: inline-block;
			width:120px;
			height: 58px;
			background: url(bg1.png); 
			color: white;
			text-align: center;
			line-height: 50px;
		}

		a.two{
			text-decoration-line:none; 
			display: inline-block;
			width:120px;
			height: 58px;
			background: url(bg2.png); 
			color: white;
			text-align: center;
			line-height: 50px;
		}
		a.three{
			text-decoration-line:none; 
			display: inline-block;
			width:120px;
			height: 58px;
			background: url(bg3.jpg); 
			color: white;
			text-align: center;
			line-height: 50px;
		}
		a.four{
			text-decoration-line:none; 
			display: inline-block;
			width:120px;
			height: 58px;
			background: url(bg3.png); 
			color: white;
			text-align: center;
			line-height: 50px;
		}
		a.one:hover{
			background: url(bg2.png);
		}
	</style>
</head>
<body>
	<a href="#" class="one">五彩导航</a>
	<a href="#" class="two">五彩导航</a>
	<a href="#" class="three">五彩导航</a>
	<a href="#" class="four">五彩导航</a>
</body>
</html>

行高单位

单位 文字大小 值
px 20px 20px
em 20px 40px
% 20px 30px
2 20px 40px

 总结：单位除了像素以外，行高都是与文字大小乘积

行高单位 父元素文字大小 子元素文字大小 行高
40px 20px 30px 40px
2em 20px 30px 40px
%150 20px 30px 30px
2 20px 30px 60px

总结：不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字相乘，行高以像素为单位，就是定义行高值。    推荐行高使用像素为单位。

2. css盒子模型

前端-02CSS基础知识3

1.边框 border

border-top-style:solid;实线      dotted；点线      dashed；虚线

border-top-color   颜色

border-top-width  宽度

以上属性可连写：border-top：red solid 12px； 线型必写

四个边框：border：red solid 12px；

边框合并：border-collaspe：collaspe

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		table{
			width: 200px;
			height: 100px;
			border: 1px solid red;
			border-collapse: collapse;
		}
		td{
			border: 1px solid green;
		}
	</style>
</head>
<body>
	<table cellspacing="0">
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

效果

前端-02CSS基础知识3

实战之表单控件

 

上一篇： php readfile 函数

下一篇： 在服务器上的文件怎么重命名？

推荐阅读