1.BFC是什么?
BFC(Block Formatting Context)块格式化上下文, 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
如何创建一个BFC?
浮动元素(元素的float不是 none,指定float为left或者right就可以创建BFC)
绝对定位元素(元素的 position 为 absolute 或 fixed)
display:inline-block,display:table-cell,display:flex,display:inline-flex
overflow指定除了visible的值
具体的可以参考这篇博客,写的很详细:
2.父元素和子元素宽高不固定,如何实现水平垂直居中?
1.弹性盒
父元素设置:display:flex;justify-content:center; align-items:center,子元素可以设置margin:auto;
2.定位加位移
父元素:position:relative.
子元素:position: absolute;top:50%;left:50%;transform:translate(-50%,-50%)
3.简述选择器~与+的区别
~:匹配多个,可以选择紧跟在当前符合条件元素后面的同级元素
+:只能匹配一个,匹配多个符合条件后面的同级元素。
4.box-sizing对应的盒模型
box-sizing用于更改计算元素的宽度和高度,默认css盒子的
- content-box:遵循w3c原则,盒子的宽度和高度不包括padding和border。
- border-box:盒子的宽度和高度包括padidng和border值
- inherit:是从父容器继承过来的box-sizing值
5.align-items和align-content的区别
- align-items:使用于单行内容,设置的是每一个子项在交叉轴上的默认对齐方式
- align-content:使用于有多行内容的时候,在使用前需要设置flex-wrap:wrap;
表示子元素超出换行,flex容器在交叉轴上有多余空间时,将子项作为一个整体来进行对齐。
详细可以参考以下博客:
6.什么是标准文档流?
标准文档流是元素排版布局过程中,元素会默认自动从左往右,从上往下流式排列方式。当前面内容发生变化,后面的内容也会发生变化。
HTML是一种标准文档流文件。
7.z-index是什么?在position的值什么时候可以触发?
z-index:指的是一个元素在当前文档页面定位时重叠层显示的层级等级,默认是0,数值不限,越大显示层级越高
触发机制:当position的值设置为absolute、relative和fixed的时候才会触发。
8.css3如何实现圆角?
border-radius属性
- 四个值:左上角、右上角、右下角、左下角
- 三个值:左上角、右上角和左下角、右下角
- 两个值:左上角和右下角、右上角和左下角
- 一个值:四个圆角值相同
只需要使用border-radius将四个角设置为合适的尺寸即可实现圆角。
9.css清除浮动的方法
1.在标签尾部添加一个空块级标签,设置样式属性为:clear:both;
缺点:如果页面浮动布局多,就要增加很多的空的div,不利于页面的优化
2.父级定义伪类after和zoom,
.box:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.box{
zoom:1;
}
3.父级div定义 overflow:hidden
优点: 简单、代码少、浏览器支持好
缺点: 不能和position配合使用,因为超出的尺寸的会被隐藏。
4.给父级元素单独定义高度(height)
如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题。