前端全栈学习笔记第七天 - CSS

最新推荐文章于 2022-11-07 15:02:13 发布

推开世界的门

最新推荐文章于 2022-11-07 15:02:13 发布

阅读量218

点赞数

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

本文链接：https://blog.csdn.net/qq_38845858/article/details/86586548

版权

前端学习笔记专栏收录该内容

45 篇文章 5 订阅

订阅专栏

1：元素的显示与隐藏(display有两个默认属性，inline，block)，隐藏之后不保留位置

为什么显示不用inline？因为一旦没文字，用inline就什么也不会显示。

display(显示)：block除了转化为块级元素，同时还有显示元素的意思

visinility:可见性

visible：显示

hidden：影藏

特点：隐藏之后，保留原来位置

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .header {
        width: 592px;
        height: 355px;
        margin: 100px;
        position: relative;


    }

    .dis {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5) url(img/left.png) no-repeat center;
        display: none;
    }

    .header:hover .dis {
        display: block;
        /*鼠标经过header，header里面的dis就显示出来，所以这里用后代选择器*/
    }
    </style>
</head>

<body>
    <div class="header">
        <img src="img/ha.png">
        <div class="dis"></div>
    </div>
</body>

</html>

当鼠标经过，会出现阴影

注意

做一个总结

a：首先要有一个盒子，来包裹里面的图片。这时，图片的大小，就是盒子的大小，而且这个盒子要有相对定位

b：图片正常顺序放就好

c：接下来是阴影部分。阴影部分是通过定位，而且是子绝父相，宽高100%，将背景定位到图片上面。这里还有一个妙用，就是将背景和图片写在一起

background: rgba(0, 0, 0, .5) url(img/left.png) no-repeat center;

d：显示。这里虽然很简单。但是却有很大的一个坑！鼠标先放在盒子上面，然后阴影显示，所以是 .header:hoer .dis

2:overflow ： hidden

显示影藏

3：鼠标样式

cursor:pointer 小手

default ：小白

move ：移动

text ：文本

pointer ：小手

4：鼠标轮廓

outline ： node

防止拖拽：resize：none

5：图片三像素问题

a：

当我们图片和文字放在一起时，会出现一个小缝隙。原因是图片和边框是基线对齐，文字和框框是底线对齐。这事我们可以给img添加

img{
vertical-align: bottom; 或者top，center，bottom只要不要让他用baseline(基线)对齐就行，而这个又是默认的！
}

vertical不隐想块级元素，只针对行内块和行内元素，用来控制图片，文字，表单的对齐

这样就没有间隙了如果没有文字，你会发现还是有小奸细。

这是因为图片img标签是行内块元素，有间隙这个bug，我们只需要把它转换为快元素就行了

6:溢出的部分用省略号表示

white-space: nowrap;
        /*强制在一行显示所有文字*/
        overflow: hidden;
        /*超出部分隐藏*/
        text-overflow: ellipsis;
        /*溢出的部分用省略号代替*/

缺一不可

7：精灵图的本质

为了有效的减少服务器接受和发送请求的次数，提高页面加载速度，出现了css精灵图

将多个背景图放在一张大图上。

8：精灵图使用

背景图，不能做插入图

background ：url（） no-repeat 偏移量

要做多个精灵图，可以做一个集体声明

9：滑动门

滑动门标准写法：

a标签嵌套span标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		a{
			height: 50px;
			margin: 100px;
			background: url(img/to.png) no-repeat;
			padding-left: 15px;
			display: inline-block;
			line-height: 50px;		
		}
		span{
			height: 50px;
			background: url(img/to.png) no-repeat right;
			padding-right: 15px;
			display: inline-block;
			line-height: 50px;
			color: white;
		}
	</style>
</head>
<body>
	<a href="">
		<span>首页</span>
	</a>
</body>
</html>

效果图

会自动撑开盒子。原理解释

a：滑动门是通过两个标签相互配合来实现，a标签的作用是只要你点击这个框框，他就会有效果，里面放的是和sapn一样的背景图片。a不用设置宽度，应为本身就是要自动撑开的效果，但是需要高，为了和span的保持一致。设置了高，就必须设置display，应为这样高才其效果(如果图片就是本身的尺寸，不设置高也行)

b：span标签和a标签解释差不多