一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。...由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。...二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候...viewport 设置可视区之后，就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习，可查阅《viewport深入理解和使用 - 前端人 - 博客园》。...属性值分别为： content-box - 标准模型 border-box - IE模型 两者最大区别就是盒子的宽度不同： 标准模型宽 = 内容宽 + padding + border IE模型宽 =
在这种方式里，块级元素在它们的包含块里一个一个垂直延伸，行内元素在它们的包含块里从左至右的水平排布。 值得注意的是，在正常流里垂直边距（vertical margin）是重叠的。...也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！...名词解释： 视口：通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。...在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。...名词解释： 边距折叠：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客 正文 或许对于你来说，喜欢js的背后，是看不懂css的深层。...而margin，相对应的是盒子模型的外边距，它会对每个元素框起到作用，使得元素框与其他元素之间产生空白。...盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容) css中存在两种不同的盒子模型，可以通过box-sizing...它的特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。 三栏布局可以有4种实现方式，每种实现方式都有各自的优缺点。...因此，移动端盛行的现在，我们应该掌握一些自适应布局技巧和flex等方式。 移动端的时代 或许，手机占用了人们大部分的时间，对于前端工程师来说，不仅需要会h5和大前端的技术，还需要去适配不同的手机屏幕。
CSS盒子模型是一种设计网页布局的概念，它将每个HTML元素表示为一个盒子，该盒子由内容、内边距、边框和外边距组成，这些部分共同构成了一个完整的盒子模型。...通过使用这些属性，我们可以轻松地调整盒子的大小和位置，从而实现所需的布局效果。 什么是CSS盒子模型？ CSS盒子模型是一种用于布局和渲染网页元素的概念。...盒子模型由以下四个部分组成： Content（内容） Padding（内边距） Border（边框） Margin（外边距） 如何计算盒子的总宽度和高度？...上外边距 + 下外边距 如何调整盒子的大小和位置？...可以使用CSS的绝对定位和负边距的方式来实现一个盒子在页面中居中。
属性值]：选择属性值以指定值开头的元素 [属性名$=属性值]：选择属性值以指定值结尾的元素 [属性名*=属性值]：选择属性值中含有某值的元素的元素 <!...，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样。... 语法: #红色绿色蓝色 颜色浓度通过00-ff 如果颜色两位两位重复可以进行简写 #aabbcc --> #abc ---- 1.4 盒子模型 盒模型、盒子模型、框模型(box model...外边距 外边距(margin) 外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置 一共有四个方向的外边距 margin-top：上外边距，设置一个正值，元素会向下移动 margin-right...margin也可以设置负值，如果是负值则元素会向相反的方向移动，元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。
以下是一些与 CSS 元素定位相关的学习资源和主题, 我们将一一的进行学习实际： 盒子模型：了解 CSS 中的盒子模型（前面简单的提及了），包括内容区域、边框、内边距和外边距，以及如何使用这些属性来控制元素的大小和间距...浮动和清除浮动：了解浮动属性和清除浮动的方法，以实现元素的自适应布局和多列布局。...，CSS 渲染绘制时屏幕上盒子实际宽度和高度会加上设置的边框和内边距值，所以在实现响应式布局事会非常烦人，需要时刻注意到这个元素的边框和内边距。...，在外边距设置为正时是如何推开周边元素，以及设置为负时，是如何收缩空间的。... border-边框 描述: 边框是在边距和填充框之间绘制的，如果你正在使用标准的盒模型，边框的大小将添加到框的宽度和高度，如果你使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度
本章文中示例代码托管在CodeSandbox[1] 3.1 盒模型 盒模型是 CSS 的核心概念，描述了元素如何显示以及(在一定程度上)如何相互作用、相互影响。...相应的，span、strong这些是行内元素，所以它们会以行内盒子(简称行盒子，inline box)显示在行内。 CSS 中有几种不同的定位模型，包括浮动、绝对定位和相对定位。...最后，内边距、边框和外边框可以应用于元素的四边，也可以单独用于某一边。外边距甚至可以使用负值，从而使得元素在页面中移动。...下面我们来看看另一种，浮动模型。 浮动盒子可以向左或向右移动，直到其外边沿碰到包含块的外边沿，或者碰到另一个浮动盒子的外边缘。...浮动-宽度自适应.png 如果三个盒子都向右浮动，则后面两个会向右移动直到碰到自己前面的浮动盒子。如下： ?
image-20200518001513036 可以看到这种情况下，父子元素下边距并不会发生边距坍塌。 会发生边距坍塌 发生边距坍塌需要满足2个前提 1.是 block 盒子模型，在同一个 BFC。...盒子的上边距和第一个流入子元素的上边距 盒子的下边距和同级后一个流入元素的上边距 如果父元素高度为“auto”，最后一个流入子元素的底部距和其父元素的底部距 某个元素没有建立新的 BFC，并且 min-height...「如果'min-height'属性为零，并且框没有顶部或底部边框，也没有顶部或底部填充，并且框的'height'为0或'auto'，并且框不包含边距，则框自身的边距会折叠 行框，其所有流入子页边距（如果有的话...image-20200519001704179 边距塌陷如何解决 通用型 1.改变盒子模型（非 block 模型） 2.创建新的 BFC 限制型 查看刚才不会发生高度坍塌的情况 边距塌陷如何计算 1.当两个或更多边距坍塌时...，当边距全为正数的时候，结果页边距宽度是边距塌陷宽度的最大值。
一、流式布局简介 流式布局 又称为 百分比布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充...; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ; 当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...: 使用 Flex 弹性盒模型 或 Grid 网格布局 : 使用这些布局技术可以更轻松地实现复杂的布局结构。...最小宽度 : min-width ; 最大宽度 : max-width ; max-width: 980px; min-width: 320px; 使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整...测试不同设备的显示效果 : 在完成布局之后，需要 在不同的设备上测试显示效果，以确保布局在不同设备上都能正常显示。 二、流式布局代码示例 ---- 代码示例 : <!
* 早期以table为主(简单) * 之后 以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局 在移动端大行其道的时代 是必备的 * table表格布局 * float...留下自适应的空间：和两列布局类似，一列固定宽度 另一列随屏幕自适应。 (类似的思路，在屏幕顶部 给logo固定宽度 logo右侧的纯色背景 可以自适应)。...自适应：1. 既然不同设备的屏幕尺寸不一样，那么网页中的文字 也应该是不一样的，此时 可以采用等比例的方式 来自适应屏幕。 2....fixed相对于屏幕(viewport) 来进行定位 3. display: inline-block的间隙 如何处理？...如何视频移动端？
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。...不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。...box-sizing box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。...box-sizing类似于ie盒模型，它会把内边距和边框包含在width内。在实际工作中，我们设置一个固定宽度的盒子，但当给它设置padding、border之后，它的真正宽度就会改变。...它会自动调整内容的宽度，保证盒子的真正宽度还是我们设置的宽度。 可以查看实例：box-sizing实例
内的组件按边界对齐ohos:alignment_type=“align_contents” 表示TableLayout内的组件按边距对齐 column_count 列数 ohos:column_count...(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。 布局方式 PositionLayout以坐标的形式控制组件的显示位置，允许组件相互重叠。...⑥ AdaptiveBoxLayout AdaptiveBoxLayout是自适应盒子布局，该布局提供了在不同屏幕尺寸设备上的自适应布局能力，主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景...该布局中的每个子组件都用一个单独的“盒子”装起来，子组件设置的布局参数都是以盒子作为父布局生效，不以整个自适应布局为生效范围。...该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数，高度为match_content，每一行中的所有盒子按高度最高的进行对齐。
要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。...盒子模型（Box Model） 这里略过 老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。 首先，我们来看一张图，来体会下什么是盒子模型。...盒子模型布局稳定性 开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？ 答案是： 其实他们大部分情况下是可以混用的。...为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。...相当于给每个盒子添加了左右margin外边距 4、align-items调整侧轴对齐（垂直对齐） 子盒子如何在父盒子里面垂直对齐（单行） 值 描述 白话文 stretch 默认值。
CSS(三) 發佈於 2018-06-28 本篇将讲解盒模型以及外边距折叠的相关知识。 “CSS 盒模型”是一组规则，用于定义如何呈现 Internet 上的每个网页。...在以后的章节中，我们将更多地了解 HTML 结构和 CSS 框模型如何组合以形成各种复杂的页面布局。...box 和周围 box 之间的距离 Padding h1 { background: #eee; padding: 50px; } 注意背景颜色如何扩展以填充此空间。...strong { margin: 50px; } 如果我们将边距更改为填充，它会显示背景。但是，它不会影响周围盒子的垂直布局。 垂直边距折叠 盒子模型的另一个怪癖是”垂直边距折叠”。...当你有两个垂直边距彼此相邻的盒子时，它们会折叠。不是将边距加到一起，而是仅显示最大的边距。
本文将介绍Image Asset Studio工具的使用，介绍如何制作圆形图标 目录 1、 关于Image Asset Studio 2、 自适应和旧版启动器图标 3、 操作栏和标签页图标 4、通知图标...如果项目中已存在该资源名称（由向导底部的错误来指示），它将被覆盖。名称只能包含小写字符、下划线和数字。 Trim - 要调整源资源中图标图形与边框之间的边距，请选择 Yes。...如果项目中已存在该资源名称（由向导底部的错误来指示），它将被覆盖。名称只能包含小写字符、下划线和数字。 Trim - 要调整源资源中图标图形与边框之间的边距，请选择 Yes。...Padding - 如果要调整全部四面的源资源内边距，请移动滑块。选择一个介于 -10% 和 50% 之间的值。如果也选择了 Trim，则先进行剪裁。...Padding - 如果要调整全部四面的源资源内边距，请移动滑块。选择一个介于 -10% 和 50% 之间的值。如果也选择了 Trim，则先进行剪裁。
五、盒子模型 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ ? 其实网页布局的本质就是： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。...最后把网页元素比如文字图片等等，放入盒子里面。 5.1、盒子模型（Box Model） 所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。...盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。...7.2、边偏移 简单说， 我们定位的盒子，是通过边偏移来移动位置的。 在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的父级元素来移动位置，也就是我们常说的拼爹。
简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效的移动端适配库 我们再也不用写不同屏幕的媒体查询,因为js里做了处理 它的原理是把当前的设备划分成10分,但是不同设备下...我现在在.contain这个类里写了一个123,可以看到左右是有15px的边距的,而且也可以自适应....bootstrap提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视口的尺寸的增加,系统会自动最多分为12列....:大; 列(column)大于12,多余的"列(column)"所在的元素将被作为一个整体另起一行排列 每一列默认有左右15px的padding,使用类名为row的盒子可以去除15px的边距 可以同时为一列指定多个设备的类名...使用.col-md-offset-*类可以将列向右偏移.这些类实际是通过使用*选择器为当前的元素增加了左侧的边距.
目录 字体相关调整 背景相关调整 控制背景平铺 调整背景图像的大小 边框属性 圆与圆角 盒模型 块级盒子（Block box） 和 内联盒子（Inline box） display属性 盒子模型 盒模型的各个部分...在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。...在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。 在下面的例子中，我使用了上面例子中的大图，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。...垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。...大小通过 margin 相关属性设置； 通俗理解 以快递盒为例 1.快递盒与快递盒之间的距离 外边距(标签之间的距离) 2.快递盒的厚度 边框 3.内部物品到盒子的距离 内边距
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
