前端的一些面试题-----CSS

CSS问题

1. 一个盒子垂直水平居中的方法有哪些？

1.absolute + transform

.prent{
	position:relative;
}
.child{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

2. flex + justify-content + align-items（弹性模型）

.parent {
	display： flex;
	justify-content： center; /* 水平居中 */
	align-items：center; /*垂直居中*/
}

3. align-items:center
   属性规定灵活容器内的各项的默认对齐方式.
   center:项目位于容器的中心。

2.关于定位的一些方法

可以参考一下这个点击一下：点击本字体查看详细讲解

3. Flex是怎么使用的，flex:1代表什么？

1. 怎么使用：使用了 display: flex 后会形成一个容器盒子，里面的子元素为 item对容器盒子进行设置
2. flex:1是自适应宽度，代表了三个属性，分别是
   flex-grow //这意味着div将以与窗口大小相同的比例增长
   flex-shrink //这意味着div将以与窗口大小相同的比例缩小
   flex-basis //这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％。

4.使用自适应布局的时候rem,为什么可以实现自适应布局，在不同的手机端表现是什么？

点击本字体查看详细讲解

5.rem和em理解以及区别？

https://blog.csdn.net/SiReSo/article/details/104572279

6.你在拿到UI给的图片的时候，是怎么进行计算的？

rem与px之间的换算: px=rem*基数(html的font-size)

html 的font-size	48px
rem	1rem
px	16px

除以16px，16px是怎么来的？自己设置的大小

7.行内和块级元素区别?如何让行内元素设置宽高?

https://blog.csdn.net/Cool_so_cool/article/details/106239025

8.页面一半固定，一半自适应的实现方法?（2）

https://blog.csdn.net/lhjuejiang/article/details/82024607

9.less封装一个三角形出来，要设置哪些参数? 倒三⻆ 怎么实现（2）

https://blog.csdn.net/Cool_so_cool/article/details/106240803
倒三角实现

10.display: none;和visibility: hidden;的区别?

通俗的说法：display: none不占用原来的位置，而visibility: hidden保留原来的位置。
可以看一下这个文章，感觉挺不错：https://blog.csdn.net/qq_38128179/article/details/80794397

11.父级元素设置了margin、border、padding，子元素会继承哪些？

12.flex中float还生效吗？

       不生效

13.flex改变主轴方向以及属性？

https://www.runoob.com/w3cnote/flex-grammar.html

14.css选择器分类;

https://www.jianshu.com/p/1d6efea3db1c

15.H5的新特性

https://zhidao.baidu.com/question/1695503938291479148.html

16.display:inline-block?

https://www.cnblogs.com/Ry-yuan/p/6848197.html

17.W3C标准。

https://www.jianshu.com/p/57aa8738791a

18.HTML5新增input标签属性

https://www.cnblogs.com/EricZLin/p/8855567.html

19.用于绘画 canvas 元素

https://blog.csdn.net/ff906317011/article/details/80415137

20.css 单位都有哪些

https://blog.csdn.net/qq_52855464/article/details/124511147

21.移动端 怎么做适配 rem

https://blog.csdn.net/Coding_Peasant_Y/article/details/120900664

22.margin塌陷 解决⽅案 BFC

https://www.bilibili.com/read/cv5005390

23.盒模型 理解

https://blog.csdn.net/qq_41818857/article/details/116713080

24.BFC 理解 触发条件

https://www.jianshu.com/p/57a00afa761e