01每周测试

# 每周小测试01

# 1、meta标签用来做什么的

meta标签是HTML语言head区域的一个辅助性标签,常用于定义页面的说明,关键字,最后修改的日期和其他的元数据。

# 2、使用弹性布局进行水平和垂直居中

display:flex;
justify-content;
align-items:center;

1
2
3

# 3、行内元素、块级元素、行内块级元素有什么区别？

1） 块标签：独自占领一行、可以进行宽高的数值的设定； 
2） 行标签：在一行内显示、不可以进行宽高的数值设定； 
3） 行内块标签：能和其他元素待在一行，能设置宽高；

1
2
3

# 4、讲述下相对定位，绝对定位，固定定位的区别

相对定位 position: relative; 相对于自己定位。

绝对定位 position: absolute; 相对于有相对定位的父级元素进行定位，没有的时候就相对于body。

固定定位  position: fixed; 相对于浏览器定位。

1
2
3
4
5

# 5、写出浏览器的内核有哪些

浏览器内核
    谷歌的chrome浏览器：旧 webkit 新 blink
    苹果的safari浏览器：webkit
    火狐的firefox浏览器：moz
    欧朋浏览器：        o
    微软的ie浏览器：    ms
    微软的edge浏览器    Chromium

1
2
3
4
5
6
7

# 6、说明CSS选择器的权重，以及其显示优先顺序

css优先级（权重）
    作用范围越小，权重越高。
    同样的作用范围，后面的样式覆盖前面的样式。

1
2
3

# 7、使用内行块级实现元素的水平和垂直居中

text-align: center; //文本的水平居中
vertical-align: middle;//垂直居中

1
2

# 8、使用定位进行水平和垂直居中

div{
    position:relative;
}
p{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;   //这两行代码也可以替换成
    margin-top:-50px;    //transform:translate(-50%,-50%);
}

1
2
3
4
5
6
7
8
9
10
11
12

# 9、什么时候会出现浮动塌陷？如何解决浮动塌陷？

.clearFix::after{
    content: "";/*内容为空*/
    visibility: hidden;/*隐藏*/
    height: 0;/*高度为0*/
    display: block;/*转位块级元素*/
    clear: both;/*清除浮动*/
    }

1
2
3
4
5
6
7

# 10、什么时候会出现边距塌陷？如何解决边距塌陷？

在父级元素添加 overflow:hidden;

编辑

上次更新: 2023/08/06, 00:38:41

← 实战项目 02每周测试→