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

阳光穿透心脏的1/2处 2021-09-17 22:04 404阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

为什么显示不用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>

当鼠标经过，会出现阴影

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]注意

做一个总结

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：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

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

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

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

![20190122193405977.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4][]

![2019012219352668.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5][]

![20190122193653913.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 9][]

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

缺一不可

7：精灵图的本质

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

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

8：精灵图使用

背景图，不能做插入图

background ：url（） no-repeat 偏移量

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 10][]

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>

效果图

![20190123084324965.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 11][]

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/184b087434174944ba8803bfb7e5ca6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/d1ae98d0a9494084923f5a8f6ad5382b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/9bfc872b01a7441da2f26771a39532f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/b0f42ca2f4f443de93b5940d976981a7.png
[20190122193405977.png]: /images/20210812/abcba238b7364ed785710266b863c138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]: /images/20210812/7dead4440e7e4a98adb618b3bee1977d.png
[2019012219352668.png]: /images/20210812/4b2d9352394141bbb1274be548efcf23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5]: /images/20210812/7abd03375bfb471596d2465f8a9a8d31.png
[20190122193653913.png]: /images/20210812/f24b75e4422443ad8829a148d7716b89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6]: /images/20210812/dd880fe5ef804e23b2eb7ddf5d96feea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7]: /images/20210812/fdc05396f3934899a6cfbbe9eb7a0e13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8]: /images/20210812/9c425a735d934897b947f1692dbd1fb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 9]: /images/20210812/8eb2a520cf3844f0973387fa60fae9c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 10]: /images/20210812/cffa655c862e41e48a68d46074b24e6c.png
[20190123084324965.png]: /images/20210812/dae58cc5ccb8461e8422ddda2ffe4c1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 11]: /images/20210812/8f6ae86b0043475691184f09b5a51be7.png