前端常见的几种布局方式

本文介绍了前端页面的三种常见布局方式:静态布局、弹性布局和响应式布局。静态布局通过设置固定px单位导致对不同尺寸屏幕兼容性不佳;弹性布局利用flex实现灵活布局,但浏览器兼容性需注意;响应式布局则通过媒体查询和rem单位适应不同屏幕尺寸,提供更好的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端页面常见的几种布局方式

1.静态布局

给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容。

优点:设计简单。

缺点:对于不同尺寸屏幕的兼容性不好,不会随着pc端的屏幕大小而变化。

2.弹性布局

flex 就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性
任何一个容器都可以指定为flex布局

优点:容易上手,根据flex规则很容易达到某个布局效果

缺点: 浏览器兼容性较差,只能兼容到IE9及以上。

flex常用的容器属性
属性描述可选值默认值
flex-direction弹性盒子元素的方向row / row-reverse / column / column-reverserow
justify-content弹性盒子元素在主轴(横轴)方向上的对齐方式flex-start / flex-end / center / space-between / space-aroundflex-start
align-items弹性盒子元素在侧轴(纵轴)方向上的对齐方式flex-start / flex-end / center / baseline / stretchstretch
flex弹性盒模型对象的子元素如何分配空间-0 1 auto
flex-grow弹性盒子的扩展比率number0
flex-shrink弹性盒子的收缩规则number1
flex-basis弹性盒子的伸缩基准值number/autoauto
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';
}

### 静态布局的概念与实现方式 静态布局是一种固定的页面布局方式,其特点是页面元素的位置和尺寸在不同设备上保持不变[^1]。这种布局方式适用于屏幕分辨率固定且不需要适配多种设备的场景。以下详细介绍静态布局的相关概念及其实现方法。 #### 1. 静态布局的特点 静态布局的核心在于页面元素的位置和尺寸是固定的,不会随窗口大小的变化而调整。这意味着开发者需要为每种目标设备分别设计布局,确保页面在特定分辨率下显示效果最佳。虽然这种方式简单直接,但缺乏灵活性,难以满足现代多设备适配的需求。 #### 2. 静态布局的实现方式 静态布局可以通过HTMLCSS实现,以下是具体实现步骤及相关代码示例: - **HTML结构** HTML用于定义页面的基本结构,包括头部、主体和尾部等区域。以下是一个简单的HTML结构示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>静态布局示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="header">Header</div> <div class="content"> <div class="code"> <img src="example.jpg" alt="Example Image"> </div> <div class="code1">Content Area</div> </div> <div class="footer">Footer</div> </body> </html> ``` - **CSS样式** CSS用于定义页面的视觉样式,包括颜色、字体、尺寸等。以下是一个简单的CSS样式示例: ```css * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 10px; text-align: center; } .content { display: flex; justify-content: space-between; } .code img { float: left; width: 12%; height: 12%; border: 1px solid black; } .code1 { float: left; width: 70%; padding-left: 10%; } .clearfix::after { content: ""; clear: both; display: table; } ``` 上述代码中,`.header` 和 `.footer` 定义了页面的头部和尾部样式,`.content` 包含两个子区域:`.code` 和 `.code1`,分别用于展示图片和主要内容[^3]。 #### 3. 静态布局的开发思路 在开发静态页面时,通常需要明确以下几个方面[^2]: - 页面的整体结构:确定页面包含哪些区域(如头部、导航栏、主体内容、侧边栏、尾部等)。 - 元素的尺寸和位置:为每个页面元素指定固定的高度、宽度和位置。 - 样式设计:通过CSS定义页面的颜色、字体、间距等视觉效果。 静态布局适合初学者练习前端开发技能,因为它不需要复杂的响应式技术,只需掌握HTMLCSS的基础知识即可完成。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值