常见标签以及display：inline—block的应用

最新推荐文章于 2022-07-05 19:14:06 发布

一条放了盐的鱼

最新推荐文章于 2022-07-05 19:14:06 发布

阅读量499

点赞数

文章标签：盒模型常见标签

本文链接：https://blog.csdn.net/weixin_42565663/article/details/80869469

版权

今天学习的内容挺多的，比较繁杂，下面进行总结:

1、文字类设置：font-weight（文字着重）、font-style（文字倾斜）、font-size（文字大小，一般为偶数）、line-height（行高）、font-family（字体，默认宋体）

2、当行高与容器高度一致时，文字会垂直居中显示；

多行文字测量方法：确认文字大小，确认两行文字之间的空隙大小；空隙大小除以2，得出来的值就是每行文字的上下空隙大小（行高为奇数。文字上方比下方少一个像素）

3、其他文字类设置：color（文字颜色）、text-align（文本对齐方式）、text-indent（首行缩进，em缩进字符）、text-decoration（文本修饰）、letter-spacing（字母间距）、word-spacing（单词间距，以空格为解析单位）、white-space（强制不换行）

4、盒模型：width和height就像是快递要运输的物品，padding就是快递盒中的海绵填充物，border就相当于快递盒，margin相当于快递盒外面再包一层海绵

5、a标签（链接/下载/锚点），四个伪类（link默认颜色、visited浏览过的颜色、hover鼠标悬停的颜色、active鼠标点击时候的颜色） span（区分样式）

6、一些常用标签：header头部信息介绍、nav导航栏、footer页脚、section页面上的板块、article表示一套结构完整且独立的内容部分、aside侧边栏广告栏、time用来表现时间或日期

7、其他常见标签：h1-h6、p、strong强调粗体、em强调斜体、ul无序列表、ol有序列表、li列表项、dl自定义表格、dt自定义表头、dd自定义列表项、mark标记（就像用彩笔涂上颜色）

8、有些标签在浏览器中存在着默认样式，为了保证代码在所有浏览器中呈现出来的效果相同，往往需要进行样式初始化，也就是保证了代码在各种浏览器中的兼容性

9、id选择器（#xx）、类选择器（.xx）、标签选择器（xx）、群组选择器（依次列出并用逗号相分割）；选择器优先级为：行间>id>类>标签

10、块元素和内联元素：块独占一行、内联在一行上（以内容撑开，宽度设置高度设置没用），他们也能够互相转换（display：inline或者display：block）

display：inline-block为行间块元素，结合了两者的特性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		a{
			border: 1px solid blue;
			text-decoration: none;
			width: 17px;
			height: 20px;
			display: inline-block;
			text-align: center;
			color: blue;
			font: 12px/20px "宋体";
		}
		.pageBtn{
			width: 64px;
		}
		a:hover,.active{
			background-color: blue;
			color: white;
		}
	</style>
</head>
<body>
	<div class="pageBox">
		<a href="" class="pageBtn">上一页</a>
		<a href="">1</a>
		<a href="">2</a>
		<a href="" class="active">3</a>
		<a href="">4</a>
		<a href="">5</a>
		<a href="">6</a>
		<a href="">7</a>
		<a href="">8</a>
		<a href="">9</a>
		<a href="" class="pageBtn">下一页</a>
	</div>
</body>
</html>

这段代码需要注意到的知识点就是将内联元素转化为了行间块元素。

然后还有一些文字与图片相结合的案例，需要更加细心仔细考虑padding以及margin值，否则各个元素摆出来的位置不对。

一条放了盐的鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见标签以及display：inline—block的应用

今天学习的内容挺多的，比较繁杂，下面进行总结:1、文字类设置：font-weight（文字着重）、font-style（文字倾斜）、font-size（文字大小，一般为偶数）、line-height（行高）、font-family（字体，默认宋体）2、当行高与容器高度一致时，文字会垂直居中显示；多行文字测量方法：确认文字大小，确认两行文字之间的空隙大小；空隙大小除以2，得出...
复制链接

扫一扫