2021-12-01 面试题:css(二) div设置居中的几种方式,绝对定位和相对定位的区别,display有哪些值,CSS3新增特性

1.1.如何居中div？

给div设置一个宽度然后设置margin:0 auto;

1.2.如何居中一个浮动元素？

父元素设置相对定位,子元素设置绝对定位并让left和top设置为50%,margin:-(width/2) 0 0 -(height/2)

        .mydiv {
            width: 300px;
            height: 300px;
            border: 2px solid black;
            position: relative;
        }
        p {
            width: 100px;
            height: 100px;
            margin-top: -50px;
            margin-left: -50px;
            background: yellow;
            position: absolute;
            left: 50%;
            top: 50%;
        }

1.3.如何让绝对定位的div居中？

:
父元素设置相对定位,子元素设置绝对定位,margin:auto,上右下左:0;

.mydiv {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    position: relative;
}
p {
    width: 100px;
    height: 100px;
    background: yellow;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

2.display有哪些值？说明他们的作用

• none:隐藏div
• block:设置为块元素
• inline:设置为行内元素
• flex:设置弹性盒
• inline-block:像行内元素一样显示，但其内容像块类型元素一样显示。
• table:设置为块状表格元素
• inherit:从父元素继承display属性

3.position的值relative和absolute定位原点是？相对定位和绝对定位的区别

相对定位是相对元素本身的位置,不会脱离文档流
绝对定位是相对设置了定位的父元素(非static元素)或body,会脱离文档流

4.CSS3有哪些新特性？

• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
• 圆角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 阴影和反射 （Shadow\Reflect）
• 文字特效 （text-shadow、）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 增加了旋转,缩放,定位,倾斜,动画，多背景
  transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation: