我们这里有aside和main元素，它们被放在了wrapper 元素中。当然，.wrapper元素有一个宽度。 div class="wrapper"> ......为什么页面上 wrapper 有必要的 通过多加一层 wrapper 布局，有很多好处： 使内容更具可读性。 没有多加一层 wrapper，文本和图像之类的内容就可以拉伸以占据整个屏幕宽度。...在其中，wrapper可防止内容占据视口的整个宽度。 ? 主内容需要添加 wrapper 吗？ 这要看情况。 让我们探讨两种最常用内容区间的设计。 第一个以其内容为中心，并受特定宽度限制。 ?...在上面的示例中，你可能需要让标题扩展到整个页面的宽度，而不是受wrapper宽度的限制。...流动背景，固定内容 Lea Verou 在她的《CSS Secrets》一书中介绍了一种有趣的技巧，该技巧可用于流动背景（占据整个视口宽度）且内部带有wrapper部分。 让我们回顾一下常见的做法。
固定宽度容器固定宽度容器是一个具有固定宽度的容器，内容将在页面中水平居中显示，并根据屏幕尺寸进行自适应调整。使用.container类可以创建固定宽度容器。...下面是一个示例：div class="container"> div>在上述示例中，我们使用div>元素创建了一个固定宽度容器，并添加了.container类。...流体容器流体容器是一个占据100%宽度的容器，内容将根据屏幕尺寸自动调整，并充满整个可用空间。使用.container-fluid类可以创建流体容器。...-- 嵌套容器的内容 --> div>div>在上述示例中，我们在一个固定宽度容器内创建了一个嵌套的固定宽度容器。可以根据需要进行多层嵌套。...然后，我们使用div class="row">创建了一个行（Row），并在行内创建了两个列（Column）。每个列都使用col-sm-6类，表示在小型屏幕上（如平板电脑）将占据一半的宽度。
行（Row）行（Row）是Bootstrap中的一个容器，用于包含一组列。通过将内容放置在行内，我们可以创建水平排列的列，并控制其在不同屏幕尺寸下的布局。...通过指定列的宽度和偏移量，我们可以控制内容在不同屏幕尺寸下的布局。下面是一个示例：div class="row"> div class="col-6"> 的宽度，如.col-6表示占据一半宽度，.col-4表示占据四分之一宽度，以此类推。...在大型屏幕（大于等于lg断点）上，每个列占据4个网格列的宽度（.col-lg-4），即一行同时显示3个列。...在中等屏幕（大于等于md断点，小于lg断点）上，每个列占据6个网格列的宽度（.col-md-6），即一行同时显示2个列。在小于md断点的屏幕上，每个列会自动换行，占据100%的宽度。
它基于12个网格列的概念，可以将网页内容分成多个部分，并通过在不同屏幕尺寸下设置列的宽度、偏移和排序，来适应不同的设备和布局需求。...container类创建一个固定宽度的容器，宽度随着屏幕尺寸的增大而增大。它在内容周围添加了一些内边距，以保持良好的视觉外观。....container-fluid类创建一个占据整个视口宽度的容器，它会自动填充可用空间。以下是一个示例，展示了栅格容器的使用：div class="container"> 屏幕（sm）上，每个列占据了一半的宽度（.col-sm-6）。在中等屏幕（md）及以上的屏幕尺寸上，每个列占据了三分之一的宽度（.col-md-4）。...例如，.offset-md-2将在中等屏幕及以上的屏幕尺寸上向右偏移2个列的宽度。排序（Ordering）：可以通过.order-*类更改列的顺序。
Bootstrap建议我们应该把所有的行和列放在一个容器内，以确保正确的对齐和填充;Bootstrap中有两种类型的容器类:container和container-fluid，前者在浏览器窗口中创建一个固定宽度的容器...div class="container"> div class="row"> div> div> 在Bootstrap中，列被创建为全屏宽度被12等分后，占据的份额。...在线框中，我们有一个横跨整个网站宽度的标题。然后我们有一个包含博客文章的三栏布局。如果我们在平板电脑(竖屏模式)看到同样的布局，它看起来非常笨拙。...对于额外的小屏幕，我们必须使用具有col_xs前缀的类。这里，我们希望每个博客文章的列占据所有12个引导列，这样我们就可以每一行只有一篇博客文章。...这两个类将帮助我们为我们的列提供一些背景颜色。现在，HTML页面应该类似于图2.13的屏幕快照。 ?
注意：为了安全起见，最好还是给body加一个最小宽度! 圣杯布局要求 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 圣杯布局的三种实现 【1】浮动 先定义好header和footer的样式，使之横向撑满。...在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。...三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满 这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了 接下来设置left的 margin-left
，它将根据屏幕的宽度来改变列的数量。...最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。...总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction。效果如下： ? 总的来说，fraction 单位值将使你可以很容易的更改列的宽度。...现在，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。...这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪。
学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。
我们提供了两个此作用的类。 .mdui-container 类占据 92% - 96% 的屏幕宽度，且最大宽度 1280px。...div> .mdui-container-fluid 类将始终占据 100% 的屏幕宽度。...这句话什么意思呢，就是一整个屏幕，其宽度可以放得下12列的东西，比如说，我用 div class="mdui-col-xs-6">div>两次，就可以得到双栏，同理，用col-xs-4三次，就可以得到三栏...-- 在超小屏幕设备上，第一列 100% 宽度，第二列 50% 宽度。在小屏幕及以上设备上，第一列为 66.6% 宽度，第二列为 33.3% 宽度。...例如：.mdui-row-xs-5 中的每一个 .mdui-col 元素均占据 20% 的宽度。
例如，.mw-lg-75将在大屏幕及以上的屏幕尺寸上将元素的最大宽度设置为75%。通过使用这些宽度调整类，可以根据不同屏幕尺寸来调整元素的宽度，以实现更好的布局控制和适应性。...4"> 这是一个响应式列，将在小屏幕上占据一半宽度，在中等屏幕及以上占据四分之一宽度。... div> div class="col-sm-6 col-md-4"> 这是另一个响应式列，将在小屏幕上占据一半宽度，在中等屏幕及以上占据四分之一宽度。... div> div class="col-sm-12 col-md-4"> 这是一个占据整行的响应式列，将在小屏幕及以上占据整行宽度。...在小屏幕（sm）上，每个列占据一半的宽度；在中等屏幕（md）及以上的屏幕尺寸上，每个列占据四分之一的宽度。其中第三个列使用了col-sm-12，在小屏幕及以上占据整行宽度。
.container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。...) 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 .container...，会查找带有 col-xs-* 的类，在小屏幕设备中，会查找带有 col-sm-* 的类，在中等屏幕设备中，会查找带有 col-md-* 的类，并使用它们。..."col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2div> div> 4.7 列偏移 有时候，我们不希望相邻的两个列紧靠在一起，但又不想用...（row），宽度为100%时，就是当前外部列的宽度，被嵌套的行（row）所包含的列（column）的个数不能超过12。
screen.width // 1920 screen.height // 1080 如果你给一个元素的宽度为width: 192px; 那么你的屏幕上(假设你的屏幕宽度像素为1920)可以在一行上显示...听起来有点难以理解， 下面讲一个例子： 假设， 你给某个div元素设置了width：50%的样式后， 当你缩小放大浏览器的时候，你会发现div元素总是占据了50%的宽度，我们知道，宽度百分比是依赖它的包裹元素...那么html元素有多宽呢，默认情况下它和浏览器窗口一样宽，这也就是为什么div总是占据浏览器宽度的50%，而html元素则是受限于viewport(和viewport占据一样的宽度)，换句话说，viewport...如果两个属性都能设置ideal viewport， 那么当两个属性冲突时怎么解决？ 遇到这种情况时，浏览器会取它们两个中较大的那个值。...然而像上面所说的x是不存在的， 不过好在我们有rem， 只要我们将rem设置成1x，那么开发过程中，不就达到我们的目的了吗？ 如何将rem设成1x呢？
父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：...宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 2.0 bootstrap的介绍 2.1Bootstrap...需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。...宽度定为 750px 超小屏 (100%) .container-fluid 流式布局容器 百分百宽度 占据全部视口（viewport）的容器。...-8 col-lg-pull-4">右侧div> div> 响应式工具 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
接下来，让我们谈一谈将 DOM 与 CSSOM 关联在一起的渲染树。...不过，它们都是独立的对象，分别网罗文档不同方面的信息：一个描述内容，另一个则是描述需要对文档应用的样式规则。 我们该如何将两者合并，让浏览器在屏幕上渲染像素呢？...对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。 发射可见节点，连同其内容和计算的样式。 最终输出的渲染同时包含了屏幕上的所有可见内容及其样式信息。...div> div> 以上网页的正文包含两个嵌套 div：第一个（父）div 将节点的显示尺寸设置为视口宽度的 50%，第二个 div — 将其宽度设置为其父项的...50%；即视口宽度的 25%。
所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。...比如：如果设置的列的宽度大于自动计算的列的宽度，那么实际显示的效果以设置的列的宽度为准；如果设置的列的宽度无法填充整个屏幕，那么实际的宽度可能大于设置的宽度； 如果设置的列的宽度小于自动计算的列的宽度...设置列间隙大小*/ column-gap: 50px; /*4.设置列宽 原则：取大优先 1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度...--填充满整个屏幕 2.如果人为设置宽度更小，使用默认计算的宽度*/ column-width: 200px; } h4{ /*设置跨列显示：取值：1 / all */...3、flex属性（子元素使用） 3.1、flex-grow flow-grow：可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值，这个比例值是和其他兄弟子元素占据的剩余空间平分的。
，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。...Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。.../lib/bootstrap/js/bootstrap.min.js"> 3、bootstrap 布局容器 bootstrap 的 css 样式中，有一个起着支撑整个页面框架的容器...1、.container 实现固定宽度并支持响应式布局的容器。...当屏幕宽度 > 1200，则页面宽度固定为 1170px 当屏幕宽度 992~1200，则页面宽度固定为 970px 当屏幕宽度 768~992，则页面宽度固定为 750px 当屏幕宽度 宽度固定为
通过 grid-template-areas 确定每个区域的布局位置。 顶部导航栏：header 元素被设置在第一行，占据整个页面宽度，居中显示导航文字。...页脚：footer 固定在页面底部，跨越整个页面宽度，并居中显示内容。 响应式设计：通过 grid 的灵活性，你可以轻松扩展布局，适应不同屏幕大小。...product-section 区域使用了 flexbox 布局，product-image 和 product-details 分别占据 1 和 2 的比例，保证图片和描述部分在大屏幕上呈现合理的比例...浮动布局的使用：底部的推荐产品区域采用浮动布局，每个推荐产品使用 float: left 并设置固定宽度，使它们并排排列。同时使用 overflow: hidden 清除浮动。...当屏幕宽度小于 768px 时，产品图片和描述区垂直排列，推荐产品区域的每个项目宽度为 100%。
-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="js/jquery-3.1.1.min.js...步骤 定义容器（类似于table的概念） 容器分为：1. container （固定宽度，两边有留白）2. container-fluid （100% 宽度） 定义行（类似于table中的tr）样式：...栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。...（例如，如果设定了col-xs-4则在小屏幕手机上占四个栅格，同时在大屏幕设备上也能保证占据四个格子） 栅格类属性不可以向下兼容，如果真实设备分辨率小于预设值则一个元素会占满整行（例如，设定col-lg...-4则设备在大屏幕上一个元素占四个栅格，但在小于临界值的所有设备上都单独占据一行） 栅格系统示例 <!
Flexbox布局非常适合用于一维布局，可以轻松实现元素的排列和对齐。我们可以把网站的导航栏、内容区域和侧边栏都放在一个Flexbox容器中，然后根据设备的屏幕大小自动调整它们的排列和样式。...所以，让我们一起拥抱响应式设计吧！二、Grip和Flex，让你的布局“伸缩自如”在这个屏幕尺寸千变万化的时代，我们的网站布局也得跟上时代的步伐，学会“伸缩自如”。...> div class="item">Item 6div> div>在这个示例中：.container 类定义了一个网格容器，并使用 grid-template-columns...属性将布局划分为三列，每列占据相等的空间。...通过使用CSS变量，我们可以轻松地在整个网站中统一管理样式值，而不需要在每个地方都手动输入相同的值。
center(水平居中)/ space-around(等间距布局) align-items 垂直对齐方向 flex-start、flex-end、center、baseline、stretch(默认: 占满整个容器的高度...，第一个标签由于设置了flex-grow: 1，它自动占据了父容器除了剩下两个标签外的所有空间！...: center; align-items: center; } 场景 ②：左右两侧布局，其中一侧宽度确定；另一侧宽度占满剩余空间，并且自动响应 我们要做的就是将自动响应的那一侧的元素的flex-grow...场景 ③：栅栏布局系统 还是以上面的html结构为例，实现一个将屏幕等分为 12 列，3 个标签分别占据屏幕宽度的：1/6、1/6 和 2/3。...： 不再局限于 12 列 不再需要计算宽度，也不需考虑宽度浮点数带来的误差 必看：flex 的坑 在实现水平垂直居中的过程中，发现了flex布局仅仅影响容器的一级子元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
