CSS面试题

行内块间距的处理方式

1.父元素 font-size:0
2.子元素浮动
3.弹性盒子
4.转为块元素

图片和文字水平对齐方式

1.图片display:block
2.vertical-align:middle 居中对齐 top上对齐

清除浮动的几种方法

1.伪类清除
给最后一个浮动的元素添加一个伪类 content:'' display:block clear:both
2.给父元素添加高度
3.让父元素 overflow:hidden
4.让父元素也浮动
5.父元素有绝对定位时不需要清除浮动

BFC

BFC就是块级格式化上下文
目的就是形成一个完全独立的空间,让空间的子元素不会影响到外边的布局

形成bfc的方式

1.float不为none
2.postion不为relative和static
3.overflow为auto scroll和hidden
4.display的值为inline-block

弹性盒子的常用属性

容器属性

justify-content 设置主轴上 子元素的对齐方式
align-items 设置交叉轴上子元素的对齐方式
flex-direction 设置主轴的方向
flex-wrap 一行放不下时是否换行
flex-flow 以上两个属性的复合写法

项目属性

flex-shrink 一行放不下时是否允许自己缩小
flex-grow 一行用不完时是否允许自己放大
flex-bass 属性定义了在分配多余空间之前,项目占主轴的空间
align-self 可以设置单个子项在交叉轴上的对齐方式 会覆盖父元素的 align-items
order 排序 数值越小越靠近主轴开始的地方

垂直居中的几种方式

1.定位+平移自身的50%
2.设置行高 line-height
3.使用弹性盒子 align-items: center;

行内元素与块元素的区别

1.行内元素默认不换行 当一行放不下了会另起一行 不能设置宽高 宽高由内容决定
2.块元素默认独占一行 可以设置宽高 不设置宽度时 默认继承父元素的宽度
3.行内块元素 同行显示 可以设置宽高 <input></input> <img src=""' />

盒模型

标准盒模型 box-sizing:content-box
在标准的盒子模型中，宽高指content部分的宽高
IE盒模型 box-sizing:border-box
在IE盒子模型中，宽高表示content+padding+border这三个部分的宽高

伪类选择器有哪些

1. :hover 鼠标悬停在元素上时的效果
2. :focus 当光标获取到焦点时的效果(点击)
3. :before 在元素之前
4. :after 在元素之后

哪些样式会继承

1.font系列
font-size 字体大小
font-family 设置文本字体
font-weight 设置字体粗细
2.text系列
text-align 规定文本在块元素中的对齐方式 'left' 'center' 'right'
text-indent:2em(缩进两个字节) 设置块元素中 首行文本缩进
text-decoration 设置文本修饰
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 删除线
3.color
4.line-height
高度和a标签不可被继承

文本默认不换行 超出部分显示省略号

overflow:hidden
white-space:nowrap
text-overflow:ellipsis

两种隐藏显示元素的方式与区别

1.display 使用此属性之后元素不存在了，元素占据的位置也不存在。 会产生回流与重绘
display:none 隐藏
display:block 显示
2.visibility 使用此属性之后元素不存在了，元素占据的位置依然存在 不会产生回流与重绘
visibility:visible
visibility:hidden`

移动端 1px 边框像素问题

一、 1px边框的问题： 在某些机型的浏览器中显示的有点粗

二、 解决方案： 伪元素 + transform来解决

三、实例1： 加单个边框： (用伪元素创建一个高为1px的盒子，再用transform在y方向上缩小到一半)

 

.box {
    position: relative;
}
.box::after  {
    position: absolute;
    top: 0;
    left: 0
    content: '';
    width: 100%;
    height: 1px;
    background: red;
    transform: scale(1,0.5)
}

px与rem 与 em

px 是绝对单位
em 是相对单位 相对于父元素
rem 是相对单位 相对于html根元素
假如 html 的 font-size是50rpx
1rem = 50rpx