网页设计盒子内外边距？ 网页设计盒子大小？

摘要： 移动端布局vw和vh、em与rem1、px、rpx、em、rem、vw/vh、百分比的区别：px（像素）：定义：绝对长度单位，用于描述一个元素的宽高以及定位信息。特点：在PC端，...

移动端布局vw和vh、em与rem

1、px、rpx、em、rem、vw/vh、百分比的区别：px（像素）：定义：绝对长度单位，用于描述一个元素的宽高以及定位信息。特点：在PC端，通常认为1px的真实长度是固定的，但实际上CSS像素与物理像素之间存在转换关系，受设备分辨率影响。在移动端，不同设备的分辨率不同，1个css像素可以表示的物理像素是不同的。

2、vw、vh 是针对移动设备，如果视窗的大小发生改变，这两个值也会跟着发生相应的变化。所以在使用情况上来看，vw 比 rem 更加的智能。由于现在的主流浏览器对vw的兼容性是非常成熟的，所以现在移动端布局主要考虑 vw。

3、CSS中的em、px、rem、vh、vw单位的区别如下： px 类型：绝对长度单位。 特点：直接对应屏幕上的物理点，大小相对独立于其他元素。 适用场景：适用于需要精确控制元素大小的场景，特别是在传统开发中因其兼容性和直观性深受喜爱。但在响应式设计中，其局限性逐渐显现。 em 类型：相对长度单位。

4、CSS中px、em、rem、%、vw、vh、vm、rpx这些单位的区别如下：px 定义：像素是最基本的单位，表示显示器上的点。用途：常用于绝对尺寸定义，如元素的宽度和高度。特点：在不同分辨率的设备上，px的实际尺寸可能有所变化，特别是在移动设备上。em 定义：基于父元素的字体大小，如未设置，浏览器默认16px。

5、rem、em、vw、vh 是 CSS 中用于设置元素尺寸或间距的相对单位。rem：定义：rem 单位是根据根元素（即 Html 元素）的 font-size 大小来计算的。特点：无论嵌套层级有多深，rem 单位始终基于根元素的 font-size。这使得使用 rem 单位可以方便地实现整个页面的统一缩放。

来认识一下神器Sketch

Sketch是一款专为界面设计打造的高效设计工具，具有以下特点和优势：专为设计师打造：与photoshop不同，Sketch从一开始就专注于用户界面设计，提供了更简单、更高效的设计工具。自动保存和多版本控制：Sketch能够自动保存设计成果，并允许用户恢复到此前的任一版本，极大地提高了工作效率。

Sketch：界面设计神器，值得一试的Mac平台应用 在界面设计领域，Sketch作为一款专为设计师打造的工具，正逐渐受到国内外大企业的青睐。今天，我们就来深入了解一下这款设计神器。为何期待新的设计工具？随着对效率和协作需求的增加，许多设计师发现传统的PHOTOSHOP已经无法满足他们的需求。

界面布局 简洁设计：Sketch的界面设计非常简洁，最顶端是工具箱，包含了最重要的操作。工具箱与属性面板：你可以用右侧的属性面板来调整被选中图层的内容，左侧显示文件中的所有图层，中间是创作画布。Sketch里没有浮动面板，右侧的属性面板会根据你选中的工具显示所需控件，确保创作不受打扰。

Sketch，一款专为设计师设计的矢量绘图应用，因其矢量编辑功能及基本位图工具，如模糊和色彩校正，成为网页、图标和界面设计的理想选择。Sketch易于理解和上手，即便是经验丰富的设计师也能迅速掌握，它在多数数字产品设计中能替代Photoshop、Illustrator和Fireworks。

Bootstrap栅格化系统设计原理

原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。

网页栅格化布局是提升页面设计与开发效率的关键工具，它让页面布局更加统一且易于复用。Grid.Guide、bootstrap 等工具提供了灵活的栅格系统，允许开发者自定义最大宽度、列数及边界，以生成优化的栅格方案。

简单看一下Bootstrap的栅格参数， 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

现大多数UI框架设计上都会设计栅格化系统，比如 bootstrap（jquery） 、 element（vue） 、 antD（react） 等。Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例（宽度百分比）的思想，实现响应式布局。

外边距(margin)

外边距是网页设计中用于设定元素之间空间距离的属性。以下是关于外边距的详细解释：作用：margin属性主要用于控制元素与其他元素之间的外部空间。通过设置外边距，可以调整元素之间的距离，从而影响网页的整体布局和美观。设置方式：外边距可以通过简写来设置。这意味着可以同时设置元素的上、右、下、左四个方向的外边距，简化了代码编写过程。

margin（外边距）margin是盒模型中的外边距，它相当于在元素的外围加上了一层围栏，用于控制元素与其他元素之间的间距。基本用法：margin： 20px；：设置元素的上、右、下、左四个方向的外边距均为20px。margin： 20px 0；：设置元素的上、下外边距为20px，左、右外边距为0。

外边距用“margin”表示，外边距属性可以通过CSS中的margin属性来设置。margin属性的写法和用法如下：基本语法：margin： value；：设置一个统一的外边距。margin： top right bottom left；：分别设置上、右、下、左四个方向的外边距。

Margin（外边距）重叠通常发生在以下几种情况下：垂直相邻的块级元素：当两个块级元素（例如div、p等）垂直排列时，它们的上外边距（margin-Top）和下外边距（margin-bottom）可能会发生重叠。在这种情况下，两个元素的外边距只保留较大的那个，而不是两者之和。

我设计的网页为啥四周都留有空隙,没有完全填满

如果是Dreanmweaver设计的网页背景，可以通过设置背景属性，填充满网页右边的空白缝隙：①在代码中加入style= background：url（） repeat right其中repeat是铺满，right是右对齐； ②在代码中加入style= background：url（） repeat-x其中repeat-x 向x轴铺满。

调整完毕后，通过微调图片的边缘，确保图片与单元格四周边框无缝对接，不留任何空隙。最终效果应该是图片完全填满单元格，周围无多余空间。在整个过程中，耐心和细致是关键，适当利用放大镜工具可以帮助你更精确地调整图片大小。经过上述步骤，你应该能够成功地将图片嵌入word表格中，实现无缝对接。

打开设置在设置里能调有一个技能的间距，往右往左拉一下。可以选择更改位置，变成侧边滑动后取消技能，具体方法如下：点击下方的开始游戏。在主界面的右上角点击设置的图标。点击左侧的操作设置。找到取消模式的设置，当前默认的设置是需要手指拖动到到上方才可以。