一、 水平垂直居中的几种方式?
1 使用 flex 中 水平轴 和 相对轴 居中的布局方式实现子文件的水平与垂直居中
justify-content: center; 主轴居中
align-items: center; 侧轴居中
2 父元素使用 relative + 子元素 absolute 完成基本定位布局、子绝父相 给子元素一个left,top 50% 在给子元素transform: translate(-50%,-50%) 将子元素向左上偏移
3 也是子绝父相 子元素的top,left, right, bottom 都设置为0 然后margin:auto
二、 三角形如何实现?
给一个块级盒子设置宽高都为0 给他的边框设置高度 将背景色修改为透明色 要什么样的三角形就给其中一个边框设置一个颜色。
三、如何实现一个左边固定200px宽度,右边自适应的布局?
1 给一个父盒子设置一个高度为将它转成flex 布局 再创建两个子盒子左边设置宽度为200px 右边给一个 flex: 1
2 将两个div进行左浮动 左侧给一个宽200px给一个高度 右侧将它的宽度 width: calc(100% - 200px);
四、说说em/px/rem/vh/vw区别?
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
px,表示像素
rem,相对单位,相对的只是HTML根元素font-size
的值
vw ,就是根据窗口的宽度,分成100等份,100vw就表示满宽,50vw就表示一半宽。(vw 始终是针对窗口的宽),同理,vh
则为窗口的高度
五、BFC 模式
BFC就是页面上一个单独容器,容器内部的元素不会影响到外部的元素
如何创建BFC?
读完MDN后,我们知道,满足其一,就是建立了一个BFC
- float的值不是none
- position的值是absolute、fixed
- display的值是inline-block、flow-root、table-cell、table-caption、flex或者inline-flex、grid或者inline-grid
- overflow的值不是visible
六、CSS 设置文字只显示一行,多余显示省略号
.view-text{
/**
思路:
1.设置inline-block属性
2.强制不换行
3.固定高度
4.隐藏超出部分
5.显示“……”
*/
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
显示两行
/**
思路:
1.超出的文本隐藏
2.溢出用省略号显示
3.溢出不换行
4.将对象作为弹性伸缩盒子模型显示
5.从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
6.这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数
*/
.text2{
width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}