常见html+css面试题

1.盒子模型
解答
2.BFC
块级格式化上下文，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
通俗说就是，BFC是一个特殊的块，是一个完全独立的空间（布局环境），让空间的子元素不会影响到外面的布局。
3.实现布局的几种方式
固定
弹性flex
浮动float
定位position
响应式布局rem
4.flex布局实现两栏布局 三栏布局等
5.伪类和伪元素的区别本质在于是否创造了新的元素。

1.伪元素本身不存在，是创建了一个新元素，而伪类本身就存在只不过不用特别声明；	
2.伪元素使用:或者::声明(前者是css2的声明方式，后者是css3)，而伪类只能使用： (建议在H5中伪元素统一用:: 以便区分伪元素和伪类)
3.伪元素只能同时使用一个，伪类可以同时使用多个
1
2
3

6.清除浮动的方法
链接
链接2

1.使用带clear属性的空元素 clear:both
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
2.使用CSS的overflow属性
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
3.使用CSS的:after伪元素
4.
1
2
3
4
5
6

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
1
2
3
4
5

7.css自适应实现一个正方形
链接

方法一：
由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。所以理论上只要能够将宽度属性应用在高度属性的方法都可以。
所以我们可以用到vw单位，1 个 vw 相当于页面宽度的 1%，比如页面宽度是 1000px，那么 1vw就是 10px。
1
2
3

hello,viewport

1
2
3
4
5
6
7
8

方法二：
设置垂直方向的padding撑开容器(padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width）
1
2

1
2
3
4
5
6
7
8

注意：在这里需要注意一下，如果不写hegith的话，正方形内文字会溢出，溢出的高度正好就是文字所占空间的高度。