HTML笔记01_display block 和 none动画效果-CSDN博客

本文链接：https://blog.csdn.net/SUNOVO_S/article/details/109307025

CSS用法拓展

css样式布局：

大致分为三种。内部样式：写到内部style中。外部样式：提取到外部css样式中。内联样式：写到标签内部。权重：近距离优先，哪个离得近听哪个。
盒子模型：

对于一个块元素来说具备宽高，边框，外边距，内填充这几个属性。它的实际占用空间也是基于这几个元素来确定的。除了盒子模型外，默认的块内元素有些会自带padding和margin，所以我们一般会在一开始把他们清除。

3.==css浮动**==打破常规文件流，让块标签实现横向显示，在css中我们用float属性实现元素的浮动。

4.css定位：

一般可以分为四种：绝对定位、相对定位、固定定位、粘性定位一般情况下会结合绝对定位和相对定位的综合特点来进行子绝父相（子元素定义绝对父元素定位相对） 绝对定位：可以让元素在页面当中定位，参照物是基于父容器的，如果父容器有定位属性，则根据父容器来定位，如果没有就会向上找祖容器如果都没有则基于浏览器定位。 相对定位：可以根据自己原本的位置进行定位当元素位移以后原本的位置无法添加其他内容。 固定定位：基于浏览器定位。粘性定位：结合了固定定位和相对定位的特点，粘性定位：的位置也是无法放置其他内容同时又是基于浏览器的。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uq6Td8VD-1603768098706)(file:///C:/Users/20424/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png)]

动态数据高度的塌陷问题的解决方法——万能清除法

通过添加伪元素来解决。本方法结合了先前多种的方法，针对多种方法的缺点进行了修改，(div的大小通过内容来撑大)具体代码如下：
```
.clear_fix::after{
        content: "";  
	display: block;
        height: 0;
     overflow: hidden;
        visibility: hidden;/*visibility 属性规定元素是否可见。提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。*/
     clear: both;
     }  
```

扩展

内联元素转为块级元素

绝对定位
浮动
display

垂直居中的方法

定位

方法一

  #small{
       
                width: 50px;
                height: 50px;
                background: #bbbbbe;
                position: absolute;
                top: 50%;
                left: 50%;
      			margin-top:-25px;
      			margin-left:-25px;
            }

方法二

  #small{
       
                width: 50px;
                height: 50px;
                background: #bbbbbe;
                position: absolute;
                top:0;left:0;
      			bottom:0;right:0;
      			margin:auto;
            }

位移

宽高可以不设置

 #small{
     
                /*width: 50px;
                height: 50px;*/
                background: #bbbbbe;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                /*百分数参考的是当前盒子的宽高 */
            }

弹性盒布局

 body{
     
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div{
     
                width: 500px;
                height: 500px;
                border: 1px solid pink;
            }

6.选择器，

如 ① nth-child(n):可以选择父元素下的第n个元素；

②**:target:**为页面的某个target元素（该元素的id被当作页面中的超链接来使用）指定样式。只有当点击了元素后，：target元素设置的样式才会起作用。

③**：after**：用于再某个元素后面插入一些内容。

  .ImageShow img:nth-child(1):target{<!--img：表示选择的标签类型-->
       left: 0;
          opacity: 1;
     }

7.今天的第二个板块——2D转换

我们学习了CSS3的2D转换，2D转换，分为translate(移动)、scale（缩放）、rotate（旋转）以及skew（倾斜）。具体解释如下所示：

①translate(移动)：在属性后带上X或Y表示在X轴或Y轴上位移，为X时，数值为正，向右移动。为Y时，数值为正，向下移动。如：

transform: translate(-100px,200px);

②scale（缩放）：正数表示扩大；负数表示先翻转，再放大（第二个参数省略，则第二个参考第一个）；小于1，可以缩小。如：

transform: scale(-0.2,-0.3);

③rotate（旋转）：在属性后带上X表示绕X轴旋转，不带绕原点旋转，如：

transform: rotate(360deg);

④skew（倾斜）：带上X表示绕X轴倾斜，不带绕原点倾斜。第二个参数默认为0。如：

transform: skew(30deg,40deg);
在这里插入图片描述

8.今天的第三个板块，3D模块

我们学习了关于CSS3D的相应知识点，3D模块的效果与2D的效果相差不了多少，无外乎是多了一个Z轴，Z轴在视觉上就是从屏幕指向自己。

 接下的内容针对动画效果进行了案例练习，在这个案例中，给我们讲述了3D开发，主要在3D空间内开发如：transform-style: preserve-3d，此案例实现了在空间内出现一个空间立体几何。

 本案例，主要是实现了一个立体几何，在立体几何内存在一张照片。

在这里插入图片描述

9.阴影：box-shdow:

inset: 默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。也有些人喜欢把这个值放在最后，浏览器也支持。
<offset-x> <offset-y>: 这是头两个 <length>值，用来设置阴影偏移量。<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length>。如果两者都是0，那么阴影位于元素后面。这时如果设置了 <blur-radiu