文章目录
前端页面常见的几种布局方式
1.静态布局
给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容。
优点:设计简单。
缺点:对于不同尺寸屏幕的兼容性不好,不会随着pc端的屏幕大小而变化。
2.弹性布局
flex 就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性
任何一个容器都可以指定为flex布局
优点:容易上手,根据flex规则很容易达到某个布局效果
缺点: 浏览器兼容性较差,只能兼容到IE9及以上。
flex常用的容器属性
属性 | 描述 | 可选值 | 默认值 |
---|---|---|---|
flex-direction | 弹性盒子元素的方向 | row / row-reverse / column / column-reverse | row |
justify-content | 弹性盒子元素在主轴(横轴)方向上的对齐方式 | flex-start / flex-end / center / space-between / space-around | flex-start |
align-items | 弹性盒子元素在侧轴(纵轴)方向上的对齐方式 | flex-start / flex-end / center / baseline / stretch | stretch |
flex | 弹性盒模型对象的子元素如何分配空间 | - | 0 1 auto |
flex-grow | 弹性盒子的扩展比率 | number | 0 |
flex-shrink | 弹性盒子的收缩规则 | number | 1 |
flex-basis | 弹性盒子的伸缩基准值 | number/auto | auto |
1. flex-direction
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2.justify-content
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
3.align-items
flex-start:纵轴起点对齐。
flex-end:纵轴终点对齐。
center:纵轴居中对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
4.flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
- flex-grow:设置或检索弹性盒子的扩展比率
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
- flex-shrink:指定了 flex 元素的收缩规则
flex布局,默认值是1,也就是默认所有的flex子项都会收缩。
此时,子元素宽度超度父元素(父元素没写overflow:auto),子元素被压缩(分配父元素的宽度),现在子元素的宽度都为200px。
<div style="width: 1000px;display: flex;border: 1px solid black">
<div style="width: 500px;height: 100px;background-color: red;">1</div>
<div style="width: 500px;height: 100px;background-color: green;">2</div>
<div style="width: 500px;height: 100px;background-color: blue;">3</div>
<div style="width: 500px;height: 100px;background-color: orange;">4</div>
<div style="width: 500px;height: 100px;background-color: pink;">5</div>
</div>
子元素添加flex-shrink:0 后,则表示不收缩,保持原始的宽度
<div style="width: 1000px;display: flex;border: 1px solid black">
<div style="width: 500px;height: 100px;background-color: red;flex-shrink:0;">1</div>
<div style="width: 500px;height: 100px;background-color: green;flex-shrink:0;">2</div>
<div style="width: 500px;height: 100px;background-color: blue;flex-shrink:0;">3</div>
<div style="width: 500px;height: 100px;background-color: orange;flex-shrink:0;">4</div>
<div style="width: 500px;height: 100px;background-color: pink;flex-shrink:0;">5</div>
</div>
- flex-basis:设置或检索弹性盒伸缩基准值
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
#main div:nth-of-type(2) {
flex-basis: 80px;
}
- flex日常用法
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
3.响应式布局
3.1 媒体查询
概念:为不同尺寸的屏幕设置不同的 CSS 样式,当屏幕符合时,会使用对应的样式
/* 屏幕小于 300 px */
@media screen and (max-width: 300px) {
div {
background-color:red;
}
}
/* 屏幕大于300px,小于700px */
@media screen and (min-width: 300px) and (max-width: 700px){
div {
background-color:blue;
}
}
/* 屏幕大于 700 px */
@media screen and (min-width: 700px) {
div {
background-color:yellow;
}
}
3.1 rem布局
概念:指相对于根元素html的字体大小的单位
//以pc端为例(1920*1080)
//html设置1rem = 100px (项目中尺寸单位都是rem)
var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; //屏幕宽度
if (deviceWidth > 1920) deviceWidth = 1920;
document.documentElement.style.fontSize = deviceWidth / 19.2 + 'px'; //字体
window.onresize = function() {
var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (deviceWidth > 1920) deviceWidth = 1920;
document.documentElement.style.fontSize = deviceWidth / 19.2 + 'px';
}