1. rem em vw vw 百分比区别
- rem,em,vw,vh,vw属于前段开发出来px单位之外的另外几种单位取值;但是具体含义存在区别
- px 是像素单位,属于绝对单位,是一个具体的大小
- rem:相对于根元素进行设置
- em:如果自身有字体大小的设置,那么就相对于自身字体大小设置,如果自身没有字体大小设置,那么就相对于父元素进行设置.
- vw:1vw相当于浏览器窗口宽度的百分之一
- vh:1vh相当于浏览器窗口高度的百分之一
- 百分比%:相对于父元素宽度或者高度的百分之几
- 注意: vw 和 vh是视口可以观看的区域大小;如果没有滚动条的话,则宽度设置成 100vw和100%的时候实现的效果一样; 如果有滚动条的话,则100vw中不是包括滚动条的,100%是包括滚动条的距离的
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.box1{
width: 100%;
height: 500px;
background-color: yellow;
}
.box2{
width: 100vw;
height: 500px;
background-color: goldenrod;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
2. 750的设计图，20px为多少rem?
首先设计图是UI设计提供给前端开发工程师的设计稿,750的设计图出自于手机屏幕为:375px*667px的iphone678手机屏幕设计稿,这里也可以称之为2倍图.
20px的字体大小涉及到了单位的转换,页面中默认的字体大小为16px,那么此时1rem=16px;
所以20px通过计算得出公式 1rem=16px; ?rem=20px 得出结果为: 20px%16px=1.25rem;
3. 六种 css 方式让一个容器水平垂直居中(在面试过程中经常遇见)
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
}
.wrap .center{
width: 100px;
height: 100px;
background-color: red;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
width: 200px;
height: 200px;
background-color: yellowgreen;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.center{
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: goldenrod;
}
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
position: relative;
background-color: yellow;
width: 200px;
height: 200px;
}
.center{
position: absolute;
background-color: red;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
}
- 方法四:flex; align-items:center; justify-content:center;
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
background-color: yellow;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.center{
background-color: gold;
width: 100px;
height: 100px;
}
- 方法五:display:flex; margin:auto
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
background-color: yellow;
width: 200px;
height: 200px;
display: flex;
}
.center{
background-color: rosybrown;
width: 100px;
height: 100px;
margin: auto;
}
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
background-color: yellow;
width: 200px;
height: 200px;
position: relative;
}
.center{
background-color: green;
position: absolute;
width: 100px;
height: 100px;
left: 50px;
top: 50px;
}
4. BFC是什么?清楚浮动的原理?
- BFC即 (Block Formatting Context) 是Web页面的可视CSS渲染部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域
- 通俗一点来讲,可以把BFC理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部.
- 根元素html默认就是一个BFC;
- 添加浮动,但是不能是float:none,(脱离文档流);单纯的div不是BFC,如果添加浮动就是BFC;
- 添加overflow,但是不能是overflow:visible;单纯的div不是BFC,如果添加了overflow:hidden等就是BFC;
- 添加display的值为: inline-block/ table-cell/ table-caption/ flex/ inline-flex;
- 添加position的值为:absolut或fixed;
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠(应用:防止margin重叠);
- BFC的区域不会与float box 发生重叠 (应用:自适应两栏布局);
- 计算BFC的高度时,浮动元素与参与计算 (应用:清除内部浮动);
- BFC内部的Box会在垂直方向,一个接一个地放置;
- 每个元素的margin box的左边会与包含块border box 的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素;
什么是渐进增强和优雅降级?它们有什么不同?# [css3兼容性写法]
HTML5新增的内容有哪些?
新增的语义化标签列举10个
header , footer , section,main,article, aside , figure ,figcaption,nav ,amrk ,video,audio
浏览器解决兼容的属性前缀?
如何实现0.5px边框?
如何实现两栏布局和三栏布局?
如何实现让元素位于浏览器窗口水平居中位置显示?
如何实现让元素位于父元素水平居中位置?
使用 margin: auto 实现元素垂直水平居中的基础原理?
说一下浮动和定位的区别?
盒子模型有几种分别是什么?盒子模型的组成部分是有哪些?二者之间的区别是?
宽度百分百,和宽度自适应是否一致?
解析transform,transition和animation的区别?
多行文本溢出显示省略号 【兼容IE】
单行文木溢出显示省略号
纯 CSS 实现三角形的 3 种方式?
多种盒子制作?
哪些属性的取值可以为负数?
如何让一个元素变成块元素?
子元素添加margin-top导致父元素移动的问题,如何解决问题?
CSS中如何解决高度塌陷问题?
CSS float的使用和解决浮动带来的问题?
浮动的特性与清除浮动的四种方法
position定位有哪些，分别有哪些作用?参照物是什么?
CSS层叠性?
CSS继承性?
CSS link标签和@import区别?
CSS层叠样式表
CSS常用选择器有哪些?它们的权重问题?
11 种样式选择器
CSS的基础语法是有几部分组成的?
HTML常见标签及CSS常用属性
如何隐藏一个元索?
display属性的取值有哪些?
网站的组成部分有哪些?
标签的分类
