【实验室考核（上）】_使用伪元素定位到元素的左上角-CSDN博客

本文链接：https://blog.csdn.net/m0_61478092/article/details/124107512

本文详细介绍了前端开发中的基础知识，包括块级元素与行内元素的区别、清除浮动的多种方法、CSS选择器类型及其优先级算法，以及常用的定位方式。此外，还讨论了如何使元素不可见的三种方式和实现元素水平垂直居中的多种方法。同时，深入探讨了CSS动画与过渡属性的应用，以及BFC（块格式化上下文）的概念和作用。

摘要由CSDN通过智能技术生成

第一次前端小组考核

一、常见的块级元素和行内元素有哪些？说说行内元素和块级元素的主要区别
块级元素：p,div,table,ul ,dl,ol,h1~h6等
行内元素：img,a,input,span,strong,em,i等
块级元素特点：
1.总是在新行开始
2.高度，行高，内边距外边距都可控
3.可以容纳内联元素（文本元素），与其他块级元素
行级元素特点：
1.相邻元素在一行上显示多个
2.高，行高，内边距与外边距不可改变
3.内联元素只能容纳文本或其他内联元素
二、去点ul li前面的小点，需要使用什么属性？具体方法是什么？

li {
  list-style:none;
}

三、清除浮动的方法有哪些？
清除浮动的策略：闭合浮动
方法一：额外标签法即隔墙法
给谁清除浮动，就在其后额外添加一个空标签，为其添加clear:both属性

<div style="clear:both"></div>

优点：通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化较差
方法二：父级添加overflow属性
给浮动盒子的父元素添加overflow属性，将其属性值设置为：hidden,auto或scroll
方式三：after伪元素法
：after方式是额外标签法的升级版，也是给父元素添加
代码如下：

.clearfix:after{
     content:"";
     display:block;
     height:0;
     clear:both;
     visbility:hidden;
   }
.clearfix {
      *zoom:1;
   }

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
方式四：双伪元素清除浮动
双伪元素清除浮动是给父盒子添加属性
代码如下：

.clearfix:before,.clearfix:after {
     content:"";
     display:table;
   }
.clearfix:after{
     clear:both;
   }
.clearfix {
      *zoom:1;
   }

优点：代码更加简洁
缺点：照顾低版本浏览器
方式五：为父元素设置高度
优点：简单粗暴，直接有效
缺点：需要手动更改宽度，后面如果还需要更改高度，会带来麻烦
四、你知道哪些选择器？css优先级算法应如何计算？
1.基本选择器：通配符选择器、标签选择器、类选择器、id选择器
2.高级选择器：后代选择器、并集选择器、伪类选择器、交集选择器
css优先级算法：

1.判断是否直接选中（间接选中即为继承）：如果为间接选中，遵循就近原则
2.如果选择器相同时，则为层叠性
3.如果选择器不同时，则判断权重：

通配符或继承：0 标签：1 类：10 id :100 行内：1000
其中：id>标签>通配符>继承>浏览器默认
注意:!important设置的样式优先级最高
五、css中哪些样式可以继承？
以text-/line-/font-/color-开头的属性
六、让一个元素不可见的方法，并说出他们的区别
1.display:none;不占据空间
2.visibility:hidden;占据空间
3.opacity:0;占据空间
七、让一个div水平垂直居中的方法
（1）父元素使用相对定位，子元素使用绝对定位，将子元素的左上角通过top:50%和left:50%定位到父元素中心，再通过margin负值来调整元素的中心点到父元素的中心，或者通过transform的translate来调整元素的中心点到父元素的中心。
（2）子绝父相，子元素设置四个方向都为0，并将margin设为auto,由于宽高固定，因此对应方向实现平分，可以水平垂直居中。
（3）利用flex布局，在容器（父元素）上设置align-items：center和justify-content:center，实现水平垂直居中。

子绝父相+transform:translate(-50%,-50%)

.father{
                width:200px;
                height:200px;
                background-color: pink;
                position:relative;
            }
            .son{
                width:100px;
                height:100px;
                background-color:skyblue;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(50%,50%);
                }

子绝父相+Margin:auto；

		.father{
                width:200px;
                height:200px;
                background-color: pink;
                position: relative;
            }
            .son{
                width:100px;
                height:100px;
                background-color:skyblue;
                position:absolute;
                margin:auto;
                top:0;
                left:0;
                right:0;
                bottom:0;
            }

Flex布局

.father{
                width:200px;
                height:200px;
                background-color: pink;
                display:flex;
                align-items:center;
                justify-content: center;
            }
            .son{
                width:100px;
                height:100px;
                background-color:skyblue;
            }

八、说说你知道的中animation和transition的属性及作用

1.animation的属性在这里插入图片描述

2.transition的属性

属性	描述
transition-property	规定设置过渡效果的css属性名称
transition-duration	规定完成效果需要多少秒或毫秒
transition-timing-function	指定过渡函数，规定速度效果的速度曲线
transition-delay	指定开始出现的延迟时间

九、你知道哪些定位？说说他们的区别
1.相对定位：position:relative;
主要特点：