前端面试-css篇 (1)

一、 文字与块元素自动居中的方法？

        文字：

        1.    text-align:center;line-height:元素模块高度,

        2. vertical-align:middle + text-align:center;但是要注意vettical-align需要将兄弟元素的高度设置的与父元素高度相同，同时，它只对display：inline；与inline-block起作用。

        模块居中： 

        1.不定高宽position：absolute；transform:translate(-50%,-50%);top:50%;left:50%;

        2. 定宽高 position:absolute;top:50%;left:50%;margin-top:-(h/2);margin-left:-(w/2);

        3. 不定宽高：position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;

        4.flex布局：display:flex; justify-content: center;  align-items: center;

二、position有哪些属性？

        理论上说，position存在8个属性：static | relative | absolute | fixed | sticky | initial | inherit | unset,但常用的只有五个属性，static、relative、absolute 、 fixed 、 sticky。

        static：默认属性；忽略所有设置的偏移属性值。

        relative：相对定位，相对元素本身所在位置，且定位过后当前所在位置预留下。

        absolute：绝对定位，相对于除了static以外的所有属性进行定位，若无，则相对于浏览器视口进行定位。

        fixed：固定定位，相对于浏览器窗口进行定位，不随滚动条的滚动滚动。

        sticky：粘性定位，相对定位和固定定位的结合，粘性定位需要一个阀值决定，left，top，right，bottom最少一个值，当大于这个阀值是采用相对定位，小于这个阀值，采用固定定位。

        出现一下三种情况会造成失效：

        1. 父元素的内容需滚动查看，且不能有 overflow: hidden 、 overflow: auto 属性    

        2. 父元素的高度不能低于粘性定位元素的高度

        3. sticky 是容器相关的，只会在它所处的容器（父元素）里生效。

三、清除浮动的几种方式？

        1.空标签，clear；both

        2. overflow：hidden

        3.伪类清除

        4.父元素设置高度

四、三角形css书写原理

        使用css属性transparent      border:20px solid; border-color:transparent transparent red transparent

五、ios 浏览器滚动不流畅问题

        -webkit-overflow-scroll:touch;   一个属性

六、元素高的设置的百分比是相对容器的高度吗？

        当我们设置宽度百分比时，它是相对于我们所设定的相对模块的宽度的百分比，但是当我们设定高度百分比时，比如padding-buttom；margin-top这些属性，其实它还是相对模块的宽的百分比

七、如何实现三列布局，且中间列自适应？

        1. 左右浮动，采用calc方法计算宽度，艰巨等问题。

        2.flex布局，左右两块设置 flex-basis，中间设置 flex-grow

        3.绝对定位+中间板块不给固定宽度。

--------  后续将会持续慢慢更新，之前尝试大厂面试，真的是超级基础，如遇到感兴趣可以留言，我会进行查找补全。-----------