rem、em、vh、px各自代表的含义?
px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值
rem:相对单位,可理解为root em, 相对根节点html的字体大小来计算
vh、vw:主要用于页面视口大小布局,在页面布局上更加方便简单
盒模型
盒模型由内而外分别是:width+height
(html元素);padding
(内边距);border
(边框);margin
(外边距)。
盒模型分为:怪异盒模型
(IE盒模型)
使用属性:
box-sizing:border-box;//怪异盒模型
//width + height = html + border + padding
标准盒模型
box-sizing:context-box;//标准盒模型
//width + height = width + height
弹性盒模型
(flex)
display:flex;
poison 定位属性
相对定位
(position:relative;)
相较于原来的位置。相对定位会保留原来的位置,【不脱离文档流】。
绝对定位
(position:absolute;)
不保留原来的位置,【脱离文档流】。绝对定位若父级没有设置相对定位,则默认会以浏览器为基准变化,若父级设置了相对定位,则以父级为基准变化。
固定定位
(position:fixed;)
会一直固定在某个不位置,不随滚动条滚动而改变。【脱离文档流】
粘性定位
(position:sticky;)
会随着滚动条滚动,【脱离文档流】
flex属性
flex属性是 flex-grow
、flex-shrink
、flex-basis
三个属性的缩写。
flex-grow: 定义元素的的放大比例
默认为0;即使存在剩余空间,也不会被放大
所有元素flex-grow都为1,等分所有空间,自动放大
当某个元素flex-grow为n,占的空间是flex-grow为1的n倍
我们通常将flex:1用作自适应布局,即flex:1 == flex-grow:1
flex-shrink: 定义元素的缩小比例
默认为1,即 如果空间不足,该元素将缩小;
所有元素的flex-shrink都为1:当空间不足时,缩小的比例相同;
flex-shrink为0:空间不足时,该元素不会缩小;
当某个元素flex-grow为n,空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis: 定义在分配多余空间之前,元素占的主轴空间(main size),浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值。
默认值为auto,即元素原本大小;
设置后元素将占据固定空间。(如flex-basis:100px;)
让元素水平垂直居中
1、定位 + margin
给父级设置相对定位。给子级设置绝对定位,并且给子级的top
bottom
left
right
都设置为0,margin
设置为auto。
2、定位 + margin负值
给父级设置相对定位。给子级设置绝对定位,并且给子级的top
bottom
设置为50%,margin-left设置为子元素width的一半,margin-top设置为子元素height的一半。
以上两种方法都需要固定宽高,以下是几种不需要固定宽高的方法
3、定位 + transform
给父级设置相对定位。给子级设置绝对定位,并且给子级的top
bottom
设置为50%,transform
设置为translate(-50%,-50%)。
4、table布局
给父级设置display:table-cell;vertical-align:midlle;text-align:center;
给子级设置display:inline-block;
这样可以使所有为行内块元素的子级都可以水平垂直居中
5、flex布局
给父级设置display:flex;align-items:center;justify-content:center;
6、grid布局
给父级设置display:grid;align-items:center;justify-content:center;
页面适配的方法有哪些
1、根据不同根据不同的分辨率,加载不同的CSS样式文件文章来源:https://www.toymoban.com/news/detail-627498.html
// 分辨率大于等于1680,大部分为1920的范围情况下,调用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
2、媒体查询文章来源地址https://www.toymoban.com/news/detail-627498.html
/* 大屏幕 */
@media (min-width:1200px) {
.container:{
width:1000px;
}
}
到了这里,关于CSS前端面试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!