文章列表，行高的单位，行高与font关系，margin特殊现象

最新推荐文章于 2024-07-11 20:12:47 发布

boxyuan

最新推荐文章于 2024-07-11 20:12:47 发布

阅读量490

点赞数

分类专栏： Html+CSS 文章标签： html css 前端 Bootstrap ui

本文链接：https://blog.csdn.net/boxyuan/article/details/76269617

版权

Html+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*清除标签默认的padding和margin*/
			*{
				padding: 0;
				margin: 0;
			}
			body
			{
				background-color: gainsboro;
			}
			.content{
				width: 328px;
				height: 226px;
				border: 1px solid #00BFFF;
				margin: auto;
				margin-top:100px;
				padding:0 15px;
			}
			h3
			{
				font-size: 10px;
				margin-top: 18px;
				border-bottom: 1px solid orange;
				padding-bottom:6px ;
			}
			span
			{
				font-size: 14px;
			}
			ul
			{
				margin-top:10px ;
			}
			li
			{
				font-size: 12px;
				/*清除列表标签的黑点*/
				list-style: none;
				line-height: 30px;
				border-bottom: 1px dashed red;
				padding-left:20px;
				
			}
			a{
				text-decoration: none;
				color: #080808;
				list-style: none;
			}
			

		</style>	
	</head>
	<body>
		<div class="content">
			<h3>最新文章<span>new articles</span></h3>
			<ul>
				<li><a href="#">这是一条新闻连接</a></li>
				<li><a href="#">这是一条新闻连接</a></li>
				<li><a href="#">这是一条新闻连接</a></li>
				<li><a href="#">这是一条新闻连接</a></li>
				<li><a href="#">这是一条新闻连接</a></li>
			 
			</ul>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.content
			{
				width: 260px;
				height: 327px;
				border:1px solid orange;
				margin: 0 auto;
				margin-top: 20px;
				background-color:pink;
				padding: 10px;
			}
			h3
			{
				font-family: "黑体";
				font-size: 20px;
				color: white;
				border-left:4px solid #1B6D85 ;
				padding-left:5px;
			}
			li
			{
				font-size: 12px;
				list-style: none;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px dashed mediumpurple;
				padding-left:16px ;
				
			}
			a{
				text-decoration: none;
				color: #4CAE4C;
			}
			ul
			{
				background-color: white;
				margin-top: 5px;
			}
			</style>
	</head>
	<body>
		<div class="content">
			<h3>爱宠知识</h3>
			<ul>
				<li><a href="#">这是一条新闻</a></li>
				<li><a href="#">这是一条新闻</a></li>
				<li><a href="#">这是一条新闻</a></li>
				<li><a href="#">这是一条新闻</a></li>
				<li><a href="#">这是一条新闻</a></li>
				<li><a href="#">这是一条新闻</a></li>
			</ul>
		</div>
	</body>
</html>

伪类：

行高：

应用：将行高设置等于容器的高度可以让文本垂直居中
原理：为什么行高等于容器的高度可以让文本垂直居中

文本中的各条线：

补充：行高是可以继承的

行高的单位，取值：

具体的像素值
使用em（em指当前标签设置的字体大小）
使用%
可以什么单位都不带

注意：

在设置行高时，如果单位是em或%，那么将来行高会先计算出来结果以后再继承给子元素
在设置行高时，如果单位是没有，那么将来行高会先继承给子元素，然后计算出行高

行高与font关系：

font-style font-weight font-size/font-height font-family

默认：

默认值会覆盖所以没有效果

margin两种特殊现象:

外边框的合并现象:如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值为较大的那个。
margin的塌陷现象：如果一个大盒子包含一个小盒子设置margin-top大盒子会一起向下平移

解决方案：

给大盒子加一个边框
给大盒子设置一个overflow属性

boxyuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文章列表，行高的单位，行高与font关系，margin特殊现象

/*清除标签默认的padding和margin*/ *{ padding: 0; margin: 0; } body { background-color: gainsboro; } .content{ width: 328px; height: 226px; border: 1px solid #00BFFF;
复制链接

扫一扫