css: 基础一

1、display有哪些值？说明他们的作用

@1、block:设定元素为块级元素，占据一整行，可设置宽高。

@2、inline-block: 设定元素行内块元素，可设置宽高，一行能显示多个。

@3、inline：行内元素，不可设置宽高，一行可显示多个。

@4、none：设置元素不可见。

@5、Flex：开启弹性布局

@6、table：作为块级表格显示。

@7、list-item：像块级元素一样显示，并添加样式列表标记。

@8、inherit：继承父元素的display属性。

2、position的值relative和absolute定位原点是？

@1、relative：相对定位，相对于正常位置进行定位

@2、absolute：绝对定位，相对于父元素中最近一个position不为 static（静态，无定位）定位

@3、fixed：相对于浏览器窗口定位；

@4、inherit：继承父元素的定位；

@5、static：默认，无定位

3、怎么实现div的居中？

1、水平居中

@1、给div设置宽度，并使用margin：0 auto;

div{
    width:100px;
    height:100px;
    margin:0 auto;
    background:hotpink;
    }

@2、使用绝对定位

div{
        position:absolute；
        width:100px;
        height:100px;
        left:50%;
        margin-left:-50px;
        background-color:skyblue;
    }

2、水平垂直居中

@1、使用绝对定位

div{
        position:absolute；
        width:100px;
        height:100px;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
        background-color:skyblue;
    }

@2、使用transform属性

div{
        position:absolute；
        width:100px;
        height:100px;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%)
        background-color:skyblue;
    }

@3、使用弹性布局

 .container{
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .container div{
        width:100px;
        height:100px;
        background-color:hotpink;
    }