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;

    }

巴特西