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.rhkb.cn/news/464148.html

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

相关文章

原来大佬的测试用例都是这样写的...

1、测试点与测试用例 测试点不等于测试用例&#xff0c;这是我们首先需要认识到的。 问题1&#xff1a;这些测试点在内容上有重复&#xff0c;存在冗余。 问题2&#xff1a;一些测试点的测试输入不明确&#xff0c;不知道测试时要测试哪些。 问题3&#xff1a;总是在搭相似…

ubuntu20.04 加固方案-设置SSH是否使用业界认可的加密算法

一、编辑/etc/ssh/sshd_config配置文件 打开终端。 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/ssh/sshd_config文件。 vi /etc/ssh/sshd_config 二、添加配置参数 在打开的配置文件中&#xff0c;如图位置添加如下参数&#xff1a; 查看支持的算法&#xff1a;h…

机器学习是什么?AIGC又是什么?机器学习与AIGC未来科技的双引擎

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

动态规划应该如何学习?

动态规划如何学习 参考灵神的视频和题解做的笔记&#xff08;灵神YYDS&#xff0c;以后也都会用这套逻辑去思考&#xff09; 枚举选哪个&#xff1a; 动态规划入门&#xff1a;从记忆化搜索到递推_哔哩哔哩_bilibili 746. 使用最小花费爬楼梯 - 力扣&#xff08;LeetCode&a…

虚拟化环境中的精简版 Android 操作系统 Microdroid

随着移动设备的普及和应用场景的多样化&#xff0c;安全性和隐私保护成为了移动操作系统的重要课题。Google推出的Microdroid&#xff0c;是一个专为虚拟化环境设计的精简版Android操作系统&#xff0c;旨在提供一个安全、隔离的执行环境。本文将详细介绍Microdroid的架构、功能…

【Docker系列】指定系统平台拉取 openjdk:8 镜像

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

(七)Python运算符和优先级

一、算数运算符 算数运算符&#xff0c;如下表所示&#xff1a; x1 y2 z3 # 加法运算 axy print(a,a) # 减法运算 by-x print(b,b) # 乘法运算 cy*z print(c,c) # 除法运算 dz/y print(d,d) # 取模运算 ez%y print(e,e) # 幂运算 fy**z print(f,f) 输出结果&#xff1a; 二…

Linux中使用NGINX

NGINX简介 Nginx&#xff08;engine x&#xff09;是俄罗斯人编写的十分轻量级的HTTP服务器是一个高性能的HTTP和反向代理服务器&#xff0c;同时也是一个IMAP/POP3/SMTP代理服务器官方网站&#xff1a;http://nginx.org/ NGINX概述 Nginx默认配置文件&#xff1a;/etc/ngin…

数据结构之线段树

线段树 线段树&#xff08;Segment Tree&#xff09;是一种高效的数据结构&#xff0c;广泛应用于计算机科学和算法中&#xff0c;特别是在处理区间查询和更新问题时表现出色。以下是对线段树的详细解释&#xff1a; 一、基本概念 线段树是一种二叉搜索树&#xff0c;是算法竞…

【C++】继承的理解

1.继承的概念和定义 1.1继承的概念 继承 (inheritance) 机制是面向对象程序设计 使代码可以复用 的最重要的手段&#xff0c;它允许程序员在 保 持原有类特性的基础上进行扩展 &#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承 呈现了面向对象 程序…

C++ 详细讲解 洛谷P1428 小鱼比可爱

&#xff08;其实这道题难度不高&#xff0c;但是博主正在适应c语言加上这道题目太可爱了所以忍不住发发~&#xff09; 目录 1.题目要求 2.题目解读 3.代码实现 1.题目要求 2.题目解读 这道题需要使用c中的容器储存小鱼的可爱程度和不如自己可爱的小鱼的数目&#xff0c;…

Android亮屏Job的功耗优化方案

摘要: Job运行时会带来持锁的现象,目前灭屏放电Job的锁托管已经有doze和绿盟标准监管,但是亮屏时仍旧存在过长的持锁现象,故为了优化功耗和不影响用户体验下,新增亮屏放电下如果满足冻结和已运行过一次Job,则进行job限制,当非冻结时恢复的策略 1.现象: (gms_schedu…

Spring1(初始Spring 解耦实现 SpringIOC SpringDI Spring常见面试题)

Spring1 创建项目集成maven创建一个Maven项目实现&#xff1a; 初识SpringSpring简介Spring的发展历史Spring之父体系结构生态系统官方文档解耦实现JDBCSpringBoot整合MyBatis和lombok&#xff0c;开启驼峰映射三层思想 SpringIOC实现 SpringDIset注入全部代码&#xff1a;实现…

服务器新建用户

文章目录 前言一、步骤二、问题三、赋予管理员权限总结 前言 环境&#xff1a; 一、步骤 创建用户需要管理员权限sudo sudo useradd tang为用户设置密码 sudo passwd tang设置密码后&#xff0c;可以尝试使用 su 切换到 tang 用户&#xff0c;确保该用户可以正常使用&#…

leetcode-88-合并两个有序数组

题解&#xff1a; 解法一&#xff1a;从后向前同时遍历两个数组&#xff0c;因为nums1后面是0&#xff0c;从后遍历节省空间。 1、定义三个指针&#xff0c;分别为&#xff1a;len1m-1指向nums1的最后一个非0数字&#xff1b;len2n-1指向nums2的最后一个数字&#xff1b;len3…

操作系统(10) (并发(2)------基于软件/硬件/操作系统层面解决两个进程之间的临界区问题/抢占式/非抢占式内核)

目录 1. 基于软件层面(Petersons Solution) Petersons Solution 满足三个要求: 好处: 缺点 2. 基于硬件层面 1. Disabling Interrupts (禁用中断) 概念解释&#xff1a; 代码框架&#xff1a; 要求&#xff1a; 禁用中断的好处与问题&#xff1a; 2. Test and Set Lock (…

Java | Leetcode Java题解之第526题优美的排列

题目&#xff1a; 题解&#xff1a; class Solution {public int countArrangement(int n) {int[] f new int[1 << n];f[0] 1;for (int mask 1; mask < (1 << n); mask) {int num Integer.bitCount(mask);for (int i 0; i < n; i) {if ((mask & (1…

2024年大厂AI大模型面试题精选与答案解析

前言 随着AI市场&#xff0c;人工智能的爆火&#xff0c;在接下来的金九银十招聘高峰期&#xff0c;各大科技巨头和国有企业将会对AGI人才的争夺展开一场大战&#xff0c;为求职市场注入了新的活力。 为了助力求职者在面试中展现最佳状态&#xff0c;深入理解行业巨头的选拔标…

智能网联汽车:人工智能与汽车行业的深度融合

内容概要 在这个快速发展的时代&#xff0c;智能网联汽车已经不再是科幻电影的专利&#xff0c;它正在悄然走进我们的日常生活。如今&#xff0c;人工智能&#xff08;AI&#xff09;技术与汽车行业的结合犹如一场科技盛宴&#xff0c;让我们看到了未来出行的新方向。通过自动…