20200220前端学习笔记

最新推荐文章于 2024-08-03 00:35:09 发布

--believe

最新推荐文章于 2024-08-03 00:35:09 发布

阅读量88

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_44850917/article/details/104420443

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.行高(line-height)

1.1单行文本垂直居中

行高=上距离+内容距离+下距离
使文字垂直居中方法：文字的行高等于盒子的高度
举例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	a{
		display: inline-block;
		width: 100px;
		height: 200px;
		background-color: pink;
		text-align: center;
		/*行高等于高度使文本垂直居中*/
		line-height: 200px;


	}
	a:hover{
		background-color: red;
	}
	</style>
</head>
<body>
	<a href="#">体育</a>
	<a href="#">娱乐</a>
	<a href="#">汽车</a>
	<a href="#">好用</a>
</body>
</html>

2.2背景（position）重点

语法：
background-position:length||length
background-position:position||position
注意：
必须先指定background-image属性
position后面是x坐标和y坐标，可以使用方位名词或者精确单位
如果指定了一个方位名词，另一个值默认居中
如果指定两个字，两个值都是方位名字，则两个值前后顺序无关，比如left，top和top,left效果一致
如果指定两个值，精确单位和名字混合使用，则第一个值时x坐标，第二个值时y坐标

在这里插入图片描述

2.3背景附着

背景附着就是解释背景是滚动的还是固定的
语法：

backgrou-attachment:scroll|fixed

在这里插入图片描述

2.4背景简写方式

background:属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下顺序书写
背景颜色背景图片地址 url(image.jpj) repeat-y scroll ceter top
语法

	background:transpanrant url(image.jpg) repeat-y scroll ceter top;

2.5背景总结

在这里插入图片描述

3.CSS的继承性

概念：
子标签会继承副标签的某些样式，如文本颜色和字母
想要设置一个可继承的属性，只需将他应用于父元素即可。
注意：
恰当地使用继承可以简化代码，降低css样式的复杂性，比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了
子元素可以继承父元素的样式（text- font- line- ）这些元素开头的可以继承,以及color属性

4.CSS的优先级
1)权重计算公式

在这里插入图片描述

2）权重叠加

在这里插入图片描述

3）继承的权重为0

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
20200220前端学习笔记

1.行高(line-height) 1.1单行文本垂直居中行高=上距离+内容距离+下距离使文字垂直居中方法：文字的行高等于盒子的高度举例： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</ti...
复制链接

扫一扫