一、 文字与块元素自动居中的方法?
文字:
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.绝对定位+中间板块不给固定宽度。
-------- 后续将会持续慢慢更新,之前尝试大厂面试,真的是超级基础,如遇到感兴趣可以留言,我会进行查找补全。-----------