怎么说呢，面试时确实有问到一大部分的测试题，不过css要掌握的就那么多~
目录
一、margin塌陷现象（常见）
原因：
- 当两个盒子是兄弟关系并垂直显示的时候，下面盒子margin-top ，上面盒子margin-bottom， 外边距以设置的最大值为准（外边距合并的第一种情况）
- 当两个盒子是嵌套关系，如果对里面的盒子设置margin-top,父盒子会同时下移（塌陷的第二种情况）
解决办法：
- 给父盒子设置边框
- 给父盒子设置overflow:hidden;
二、页面上的定位主要有哪几种，分别是有哪些特点？
答：4种 静态定位 相对定位 绝对定位 固定定位
- position:static; 静态定位(普通流定位) -------------- 默认定位
- position:relative;相对定位 相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间
- position:abosolute; 绝对定位，相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位，脱离标准流
- position:fixed; 固定定位是以窗口为参考。当出现滚动条时，对象不会随着滚动
注：相对定位和绝对定位不太记得住的同学，可以记住一个口诀：父相子绝
三、面试很少问到，但需了解
- 让文本显示为单行，溢出出现省略号css样式
overflow:hidden ；
white-space:nowrap;
text-overflow:ellipsis；- 让文本显示为多行，溢出出现省略号
.center_top .center_top_txt .txt {
font-weight: normal;
height: 290px;
overflow-y: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 10;
/*10表示只显示10行*/
-webkit-box-orient: vertical;
}- 由于子级块浮动引起父级块背景不显现（注意：父高度不存在），解决方法有：
// 浮动块 结束后，加
<div style=“clear:both”> - CSS中引入样式的方式有四种，分别是 内嵌式 、 导入式 、 链接式 、 行内样式
- W3C盒子模型的实际宽度包括 width 、 border-left 、border-right 、 padding-left 、 padding-right 、它们的总和。
- 通过 box-sizing:border-box 将盒子模型转为内减式的，宽度就是实际宽度。
- CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
四、Flexible Box（弹性布局）
常用：
| 分配弹性元素方式 | 注释 |
|---|---|
| justify-content: space-between | 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 |
| justify-content:space-around | 均匀排列每个元素 每个元素周围分配相同的空间 |
| justify-content: space-evenly | 均匀排列每个元素，每个元素之间的间隔相等 |
| justify-content: stretch | 均匀排列每个元素'auto'-sized的元素会被拉伸以适应容器的大小 |
| justify-content:center | 居中排列。 |
了解：
| /* 对齐方式 */ | 注释 |
|---|---|
| justify-content: center | 居中排列 |
| justify-content: start | 从行首开始排列 |
| justify-content: end | 从行尾开始排列 |
| justify-content: flex-start | 从行首起始位置开始排列 |
| justify-content: flex-end | 从行尾位置开始排列 |
| justify-content: left | 一个挨一个在对齐容器得左边缘 |
| justify-content: right | 元素以容器右边缘为基准，一个挨着一个对齐 |
案例：
.box{
display: flex;
justify-content: space-around;
align-items: center;
}效果：
上月销售业绩 | 今日销售业绩 | 昨日销售业绩
五、Css3有哪些新特性？
答：
（1）新的选择器（New Selector）（2）web字体（Web Fonts）
（3）文本样式Text Styles （4）不透明度Opacity
（5）颜色HSL Color （6）圆角Rounded Corners
（7）渐变Gradients （8）盒子阴影Shadows
（9）背景尺寸、背景裁剪、背景出图
（10）边框图像Border Image（11）伸缩布局Flexible Box Model
（12）变换Transforms（13）过滤Transitions
（14）（动画）Animations
六、让子盒子水平和垂直居中的方法
- 利用文本水平居中text-align: center和行高line-height进行实现；
- 利用父相子绝和外边距margin实现；（先为父盒子设置相对定位，再为子盒子设置绝对定位，且绝对定位的四个方向的位移都设为0，然后将外边距margin属性值设置为auto即可。）
- 利用父相子绝和左、上外边距实现；（先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用外边距margin将子盒子分别向左、向上移动子盒子的一半。）
<style>
.father {
position: relative;
height: 300px;
width: 300px;
border: 1px solid #000;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
height: 100px;
width: 100px;
background-color: aqua;
}
</style>- 利用 transform
<style>
.father {
position: relative;
height: 300px;
width: 300px;
border: 1px solid #000;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 100px;
width: 100px;
background-color: aqua;
}
</style>- 利用flex布局实现
<style>
.father {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
border: 1px solid #000;
}
.son {
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
总结
以上就是今天要讲的内容啦，本文仅仅简单介绍了CSS常见面试题，希望能够帮到大家，动动小手留个赞再走吧~~~