CSS常见适配布局方式

在网页设计中,布局是确保内容按预期显示的关键部分。CSS 提供了多种布局方式,每种方式都有其特定的用途和优势。以下是您提到的五种布局方式的详细解释:

1. 流式布局(百分比布局)

概述
流式布局,也称为百分比布局,使用百分比来定义元素的宽度和高度,而不是固定的像素值。这种方式使页面能够根据浏览器窗口的大小自动调整,从而实现响应式设计。

优点

  • 响应性强:页面能够随着浏览器窗口大小的变化而调整。
  • 灵活性高:可以适应不同分辨率的设备。

缺点

  • 嵌套元素时计算复杂:如果多个元素嵌套使用百分比宽度,计算其实际宽度可能会变得复杂。
  • 高度百分比的问题:高度百分比是基于父元素的高度计算的,如果父元素没有显式的高度,高度百分比可能不会按预期工作

示例

.container {  width: 80%;  margin: 0 auto;  
}

2. Flex 弹性布局(强烈推荐)

CSS中flex布局-CSDN博客

Flex布局,即Flexible Box布局,是CSS3引入的一种新的布局模式,它提供了一种更有效的方式来布局、对齐和分配容器内项目的空间,即使它们的大小未知或动态变化。以下是Flex布局原理的详细解释:

一、Flex布局的基本概念
  1. Flex容器(Flex Container):采用Flex布局的元素称为Flex容器,简称容器。容器的所有子元素自动成为容器成员,称为Flex项目(Flex Item),简称项目。
  2. 主轴与交叉轴:在Flex布局中,存在两条轴,即主轴(main axis)和交叉轴(cross axis)。主轴是Flex项目排列的主要方向,交叉轴则垂直于主轴。
二、Flex布局的原理

Flex布局的原理是通过给父容器(即Flex容器)添加Flex属性,来控制子容器(即Flex项目)的位置和排列方式。具体来说,Flex布局允许容器内的项目在需要时增大或缩小其尺寸以填充可用空间,或者减少其尺寸以避免溢出容器。

三、Flex布局的关键属性
  1. flex-direction:设置主轴的方向。可选值有row(默认值,主轴为水平方向)、row-reverse(主轴为水平方向,但项目排列顺序相反)、column(主轴为垂直方向)和column-reverse(主轴为垂直方向,但项目排列顺序相反)。
  2. justify-content:定义项目在主轴上的对齐方式。可选值有flex-start(默认值,项目靠主轴起点对齐)、flex-end(项目靠主轴终点对齐)、center(项目在主轴上居中对齐)、space-between(项目之间的间隔相等)、space-around(项目两侧的间隔相等,但项目之间的间隔是项目与边缘间隔的两倍)和space-evenly(项目与项目、项目与边缘之间的间隔都相等)。
  3. flex-wrap:设置项目是否换行。可选值有nowrap(默认值,项目都排在一条线上)、wrap(项目换行,第一行在上方)和wrap-reverse(项目换行,第一行在下方)。
  4. align-content:设置多行内容在交叉轴上的对齐方式。可选值与justify-content类似,但仅当项目换行时才有效。
  5. align-items:设置单行内容在交叉轴上的对齐方式。可选值有flex-start、flex-end、center、baseline和stretch(默认值,如果项目未设置高度或设为auto,将占满整个容器的高度)。
  6. flex-flow:是flex-direction和flex-wrap属性的复合属性,用于同时设置这两个属性。
四、Flex项目的属性
  1. order:定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  2. flex:定义项目分配父容器的剩余空间,用flex来表示占多少份数。flex属性是flex-grow、flex-shrink和flex-basis的简写,其中flex-grow和flex-shrink分别定义项目的放大和缩小比例,flex-basis定义了在分配多余空间之前,项目的默认大小。
  3. align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性。
五、Flex布局的优势
  1. 灵活性强:Flex布局允许项目在容器中灵活地调整大小和位置。
  2. 响应式:Flex布局能够很好地适应不同屏幕尺寸和设备。
  3. 易于使用:通过简单的属性设置即可实现复杂的布局。

概述
Flexbox(Flexible Box)布局是一种一维布局模型,它提供了一种更有效的方式来布局、对齐和分配容器内项目的空间,即使它们的大小未知或动态变化。

优点

  • 易于使用:通过简单的属性设置即可实现复杂的布局。
  • 响应性强:可以很好地处理不同屏幕尺寸。
  • 灵活性高:支持项目在主轴和交叉轴上的对齐、排序和分布。

缺点

  • 学习曲线:对于初学者来说,可能需要一些时间来熟悉 Flexbox 的概念。

示例

.container {  display: flex;  justify-content: space-between; /* 子元素之间的空间 */  align-items: center; /* 子元素在交叉轴上的对齐 */  
}  
.item {  flex: 1; /* 子元素等分剩余空间 */  
}

3. Less + Rem + 媒体查询布局

概述
这种布局方式结合了 Less(一种 CSS 预处理器)、Rem(相对于根元素字体的单位)和媒体查询(用于响应式设计)。Less 允许使用变量、嵌套规则、函数等高级功能来编写更简洁、可维护的 CSS。Rem 单位使得调整全局字体大小变得简单,而媒体查询则根据屏幕尺寸调整布局。

优点

  • 可维护性高:Less 使得 CSS 代码更加模块化和可重用。
  • 响应性强:媒体查询可以针对不同屏幕尺寸应用不同的样式。
  • 易于调整:使用 Rem 单位可以轻松地调整全局字体大小。

缺点

  • 需要编译:Less 代码需要编译成普通的 CSS 才能被浏览器识别。

示例

@base-font-size: 16px;  
@root-font-size: @base-font-size;  html {  font-size: @root-font-size;  
}  .container {  font-size: 1.25rem; /* 20px, based on root font size */  // 其他样式  
}  @media (max-width: 768px) {  .container {  font-size: 1rem; /* 16px, based on root font size */  // 其他响应式样式  }  
}

4. 混合布局

概述
混合布局是指在一个页面中同时使用多种布局方式,以充分利用每种布局的优势。例如,可以在页面的某些部分使用 Flexbox,而在其他部分使用 Grid 布局或百分比布局。

优点

  • 灵活性高:可以根据需要选择最适合的布局方式。
  • 响应性强:可以结合多种响应式设计技术。

缺点

  • 复杂性增加:管理和维护多种布局方式可能会变得复杂。

示例

/* Flexbox 布局 */  
.header {  display: flex;  justify-content: space-between;  
}  /* Grid 布局 */  
.content {  display: grid;  grid-template-columns: repeat(3, 1fr);  
}  /* 百分比布局 */  
.sidebar {  width: 25%;  float: left;  
}  
.main {  width: 75%;  float: right;  
}

5. vw/vh 布局

概述
vw(视口宽度)和 vh(视口高度)是相对于视口(浏览器窗口)的宽度和高度的单位。1vw 等于视口宽度的 1%,1vh 等于视口高度的 1%。

优点

  • 响应性强:元素的大小直接基于视口的大小,因此能够很好地适应不同屏幕尺寸。
  • 易于使用:只需简单地使用 vw 或 vh 单位即可。

缺点

  • 兼容性:在某些旧版浏览器中可能不支持。
  • 滚动问题:如果页面内容超出视口高度,使用 vh 单位可能会导致布局问题。

示例

.container {  width: 80vw; /* 宽度为视口宽度的 80% */  height: 50vh; /* 高度为视口高度的 50% */  
}

Grid布局

CSS Grid 布局是一种强大的二维布局系统,它允许你同时处理行和列布局,使得创建复杂的网页布局变得更加简单和直观。以下是 CSS Grid 布局的详细讲解:

1. 基本概念
  • Grid Container(网格容器):包含网格元素的父元素,通过 display: grid 或 display: inline-grid 声明。
  • Grid Items(网格项):网格容器内的直接子元素。
  • Grid Tracks(网格轨道):行和列的轨道,由网格线定义。
  • Grid Lines(网格线):定义网格轨道边界的线,可以是水平的(行线)或垂直的(列线)。
  • Grid Cells(网格单元格):由行和列轨道围成的最小单位。
  • Grid Areas(网格区域):由多个网格单元格组成的区域,可以命名以便于引用。
2. 创建网格容器
.container {  display: grid;  /* 其他样式 */  
}
3. 定义网格轨道(行和列)

你可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。

.container {  display: grid;  grid-template-rows: 100px 200px; /* 定义两行,高度分别为100px和200px */  grid-template-columns: 1fr 2fr;  /* 定义两列,宽度分别为1份和2份 */  
}

fr 是一个灵活的单位,表示网格容器内可用空间的一份。

4. 网格项定位
使用网格线编号
.item1 {  grid-column: 1 / 3; /* 从第一列线到第三列线 */  grid-row: 1 / 2;    /* 从第一行线到第二行线 */  
}
使用 grid-area 属性

你可以为网格区域命名,并使用 grid-area 属性将网格项放置在特定区域。

.container {  grid-template-areas:  "header header"  "main sidebar";  
}  .header {  grid-area: header;  
}  .main {  grid-area: main;  
}  .sidebar {  grid-area: sidebar;  
}
5. 网格间距

使用 grid-gap(或 row-gap 和 column-gap)来定义网格项之间的间距。

.container {  grid-template-rows: 100px 100px;  grid-template-columns: 100px 100px;  grid-gap: 10px; /* 行和列之间的间距 */  /* 或者 */  row-gap: 10px;  /* 行之间的间距 */  column-gap: 10px; /* 列之间的间距 */  
}
网格容器对齐

使用 justify-items 和 align-items 属性来对齐所有网格项。

.container {  justify-items: start | end | center | stretch;  align-items: start | end | center | stretch;  
}

使用 justify-content 和 align-content 属性来对齐网格轨道(当网格容器大小超过网格项时)。

.container {  justify-content: start | end | center | space-between | space-around | space-evenly;  align-content: start | end | center | space-between | space-around | space-evenly;  
}

6. 网格对齐

网格项对齐

使用 justify-self 和 align-self 属性来对齐网格项。

.item {  justify-self: start | end | center | stretch;  align-self: start | end | center | stretch;  
}
网格容器对齐

使用 justify-items 和 align-items 属性来对齐所有网格项。

.container {  justify-items: start | end | center | stretch;  align-items: start | end | center | stretch;  
}

 使用 justify-content 和 align-content 属性来对齐网格轨道(当网格容器大小超过网格项时)。

.container {  justify-content: start | end | center | space-between | space-around | space-evenly;  align-content: start | end | center | space-between | space-around | space-evenly;  
}
7. 网格自动放置

使用 grid-auto-rows 和 grid-auto-columns 来定义隐式网格轨道(当网格项超出显式定义的网格时)。

.container {  grid-template-rows: 100px;  grid-auto-rows: 50px; /* 隐式行轨道的高度 */  grid-template-columns: 100px;  grid-auto-columns: 50px; /* 隐式列轨道的宽度 */  
}
8. 网格模板区域

使用 grid-template-areas 属性来定义网格区域,并通过命名来引用它们。

.container {  display: grid;  grid-template-areas:  "header header"  "main sidebar";  grid-template-rows: 100px 200px;  grid-template-columns: 1fr 2fr;  
}  .header {  grid-area: header;  
}  .main {  grid-area: main;  
}  .sidebar {  grid-area: sidebar;  
}
9. 嵌套网格

网格项本身也可以是网格容器,从而实现嵌套网格布局

.parent {  display: grid;  grid-template-columns: 1fr 1fr;  
}  .child {  display: grid;  grid-template-rows: 100px 100px;  
}

Bootstrap

Bootstrap实现响应式布局的原理主要基于其栅格系统(Grid System)和媒体查询(Media Queries)。以下是对其原理的详细解释:

一、栅格系统

栅格系统是Bootstrap实现响应式布局的核心。它将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统会根据当前容器的宽度自动划分为等宽的1~12列,随着屏幕或视口(viewport)尺寸的增加,容器的宽度也会增加,每份列的宽度也会自适配的增加。

栅格系统的使用规则如下:

  1. 行(row):必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列和内补。
  2. 列(column):通过行在水平方向创建一组列,内容应当放置于列内,并且只有列可以作为行的直接子元素。
  3. 栅格类:使用类似.col-xs-*.col-sm-*.col-md-*.col-lg-*这样的预定义类来快速创建栅格布局,其中*可以是1~12的数字,表示列的跨度。这些类适用于不同屏幕尺寸的设备。
  4. 列组合与偏移:通过添加.col-md-offset-*形式的样式,可以将列偏移到右侧;通过.col-md-push-*.col-md-pull-*类可以改变列的排序。
二、媒体查询

媒体查询是Bootstrap实现响应式布局的另一个关键部分。它允许开发者根据不同的屏幕尺寸和设备特性来应用不同的CSS样式。Bootstrap在源码中使用了大量的媒体查询,以确保在不同的屏幕尺寸下,页面布局和样式都能得到正确的展示。

媒体查询的使用方式如下:

  1. 引入meta标签:在HTML文档的<head>部分引入<meta>标签,设置viewport属性,以确保页面在不同设备上都能正确缩放和显示。
  2. 定义媒体查询:在CSS中使用@media规则来定义媒体查询,根据屏幕尺寸的不同来应用不同的样式。
三、响应式布局的实现

结合栅格系统和媒体查询,Bootstrap实现了响应式布局。开发者只需要编写一套代码,就可以在不同的设备上获得良好的显示效果。具体来说,Bootstrap的响应式布局实现过程如下:

  1. 设置布局容器:使用.container.container-fluid来设置布局容器,为页面内容和栅格系统提供一个父级容器。
  2. 定义栅格布局:在布局容器内,使用行和列的组合来定义栅格布局。通过为列设置不同的类名(如.col-md-4),可以控制列在不同屏幕尺寸下的宽度和排列方式。
  3. 应用媒体查询:在CSS中,使用媒体查询来针对不同的屏幕尺寸应用不同的样式。例如,可以使用媒体查询来改变布局容器的宽度、列的宽度和排列方式等。

综上所述,Bootstrap通过栅格系统和媒体查询的结合,实现了响应式布局。这使得开发者能够轻松地创建适应不同设备和屏幕尺寸的网页布局。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/58449.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统架构图设计(行业领域架构)

物联网 感知层&#xff1a;主要功能是感知和收集信息。感知层通过各种传感器、RFID标签等设备来识别物体、采集信息&#xff0c;并对这些信息进行初步处理。这一层的作用是实现对物理世界的感知和初步处理&#xff0c;为上层提供数据基础网络层&#xff1a;网络层负责处理和传输…

sublime Text中设置编码为GBK

要在sublime Text中设置编码为GBK&#xff0c;请按照以下步骤操作 1.打开Sublime Text编辑器, 2.点击菜单栏中的“Preferences”(首选项)选项&#xff0c;找打Package Control选项。 3.点击Package Control&#xff0c;随后搜索Install Package并点击&#xff0c;如下图 4.再…

【python GUI编码入门-03】掌握Tkinter如何高效绑定键盘和鼠标事件

哈喽,大家好,我是木头左! 本文将深入探讨Tkinter中的高级特性之一——如何高效地绑定键盘和鼠标事件,以提升你的应用程序的用户体验和交互性。 一、基础回顾:什么是事件绑定? 在开始深入之前,让先简单回顾一下什么是事件绑定。在GUI编程中,事件是指用户与应用程序交互…

筛选Excel数据

要筛选Excel数据&#xff0c;可以使用Python中的pandas库来实现。下面是一个简单的例子&#xff1a; import pandas as pd# 读取Excel文件 df pd.read_excel(data.xlsx)# 筛选数据 filtered_data df[df[列名] > 10] # 根据某一列的值进行筛选# 保存筛选后的数据到新的Ex…

为什么数据库连接很消耗资源?

1背景 开发应用程序久了&#xff0c;总想刨根问底&#xff0c;尤其对一些有公共答案的问题。大家都能解释&#xff0c;但是追根究底&#xff0c;都解释不清。凡是都有为什么&#xff0c;而且用数字说明问题是最直观的。 本文主要想探究一下连接数据库的细节&#xff0c;尤其是…

目标检测:YOLOv11(Ultralytics)环境配置,适合0基础纯小白,超详细

目录 1.前言 2. 查看电脑状况 3. 安装所需软件 3.1 Anaconda3安装 3.2 Pycharm安装 4. 安装环境 4.1 安装cuda及cudnn 4.1.1 下载及安装cuda 4.1.2 cudnn安装 4.2 创建虚拟环境 4.3 安装GPU版本 4.3.1 安装pytorch&#xff08;GPU版&#xff09; 4.3.2 安装ultral…

PostgreSQL 约束

PostgreSQL 约束 介绍 PostgreSQL 是一种功能强大的开源对象关系数据库系统&#xff0c;它提供了多种约束来确保数据的完整性和一致性。约束是数据库规则&#xff0c;用于限制表中数据的类型和操作。在 PostgreSQL 中&#xff0c;约束可以分为几种类型&#xff0c;包括主键约…

telnet远程登陆服务能否用来传输文件(附安装xinetd教程)

通过 telnet 登录到远程服务器之后&#xff0c;你无法直接使用 telnet 发送文件。telnet 协议本身是一个文本协议&#xff0c;主要用于远程登录&#xff0c;不支持文件传输功能。要发送文件&#xff0c;你需要使用其他工具&#xff0c;如 scp 或 sftp。 使用 scp 发送文件 sc…

链表(数据结构)

一. 单链表 1.1 概念与结构 再上一篇中我们讲到顺序表&#xff0c;但是顺序表也是有很多的问题&#xff0c;像申请的空间过多过少或者增容该才能不浪费空间&#xff0c;今天我们就来认识一个新的知识&#xff0c;叫做链表&#xff0c;链表也是线性表的一种&#xff0c;链表是…

(done) 什么 RPC 协议? remote procedure call 远程调用协议

来源&#xff1a;https://www.bilibili.com/video/BV1Qv4y127B4/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 可以理解为&#xff0c;调用远程服务器上的一个方法/函数/服务的方式&#xff0c;同时隐藏网络细节 一个 python3 …

Docker本地安装Minio对象存储

Docker本地安装Minio对象存储 1. 什么是 MinIO&#xff1f; MinIO 是一个开源的对象存储服务器。这意味着它允许你在互联网上存储大量数据&#xff0c;比如文件、图片、视频等&#xff0c;而不需要依赖传统的文件系统。MinIO 的特点在于它非常灵活、易于使用&#xff0c;同时…

数据结构算法学习方法经验总结

DSA:Data Structures, Algorithms, and Problem-Solving Techniques 三大核心支柱 一次学习一个主题&#xff0c;按照如下顺序学习 如何开始学习新的主题 学习资源 https://www.youtube.com/playlist?listPLDN4rrl48XKpZkf03iYFl-O29szjTrs_O (Algorithms) https://ww…

CSRF 攻击 与 SameSite 属性

1. CSRF 攻击介绍 当用户登录银行网站A&#xff08;例如 bank.com&#xff09;时&#xff0c;其浏览器会存储认证信息。恶意网站B&#xff08;例如 attacker.com&#xff09;可能会包含一个自动提交的请求&#xff0c;模拟用户在银行网站A上的操作&#xff0c;如转账。如果用户…

GSCoolink基石 GSV6127E HDMI2.0/Type-C/DP1.4 转MIPI 可替代CH7515和CS5511

GSCoolink基石 GSV6127E HDMI2.0/Type-C/DP1.4 转MIPI 可替代CH7515和CS5511&#xff0c;适用于PC一体机。 Gscoolink GSV6127E是一款高性能、低功耗的Type-C/DisplayPort 1.4到MIPI CSI-2/LVDS/TTL转换器。使用双端口MIPI接口&#xff0c;可以使用MIPI接口传输真正的4K60 444…

【Linux】Zookeeper 部署

Zookeeper 搭建方式 单机模式&#xff1a;Zookeeper只运行在一台服务器上&#xff0c;适合测试环境伪集群模式&#xff1a;就是在一台物理机上运行多个Zookeeper 实例&#xff1b;集群模式&#xff1a;Zookeeper运行于一个集群上&#xff0c;适合生产环境&#xff0c;这个计算…

Java程序设计:spring boot(13)——全局异常与事务控制

1 Spring Boot 事务支持 在使⽤ Jdbc 作为数据库访问技术时&#xff0c;Spring Boot框架定义了基于jdbc的PlatformTransaction Manager 接⼝的实现 DataSourceTransactionManager&#xff0c;并在 Spring Boot 应⽤ 启动时⾃动进⾏配置。如果使⽤ jpa 的话 Spring Boot 同样提供…

00 硬件、嵌入式硬件知识-目录篇

写一下想说的话&#xff1a; 博主本双非、研究生顶2&#xff1b; 做了一两年的fpga&#xff0c;看到师兄师姐的offer情况&#xff0c;结合一下想去的城市&#xff0c;以及个人兴趣 自身情况等等&#xff0c;遂转纯硬件、嵌入式硬件。 本专栏旨在记录博主备战秋招不到一年的时间…

vue2和vue3在html中引用组件component方式不一样

我的vue版本是&#xff1a;20.17.0 一、在HTML中&#xff0c;引用组件格式区别。 vue2引用组件可以是file.vue格式&#xff0c;需要导入&#xff1a;<script src"https://unpkg.com/http-vue-loader"></script>才可以识别vue格式。 vue3引用组件格式是…

Python字典到JSON字符串的转换

在Python中&#xff0c;字典是一种非常常见的数据结构。它可以轻松地转换为JSON字符串&#xff0c;从而实现了将Python对象序列化为JSON格式的目的。本文将详细介绍如何将Python字典转换为JSON字符串。 1. Python字典的基本概念 在Python中&#xff0c;字典是一种无序的键值对…

量子容错计算

基本思想 容错量子计算的基本想法是&#xff0c;在合理编码后的量子态上直接量子计算&#xff0c;以至于不完全需要解码操作。假设有一个简单的量子电路&#xff0c;但不幸的是噪声影响着这个电路的每一个元件&#xff0c;包括量子态的制备、量子逻辑门、对输出的测量&#x…