由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。...viewport的高度，这个属性很少使用 一般情况下禁止用户缩放网页，设置的时候只需要： <meta name="viewport" content="width=device-width, initial-<em>scale</em>...定义在主轴上<em>的</em><em>对齐</em><em>方式</em>。...align-content 定义多根轴线<em>的</em><em>对齐</em><em>方式</em> <em>容器</em>内<em>的</em>子元素增加，布局所占<em>的</em>系数：<em>如</em>： <div class...<em>不</em>设置其他属性<em>的</em>时候，弹性布局默认水平方向从左排列，还可以通过属性控制垂直方向布局，<em>对齐</em><em>方式</em>等，可以点击《flex布局制作自适应网页 - 前端人 - 博客园》详细学习。
这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局；initial-scale=1.0: 设置初始的缩放级别为 1.0。...这也有助于确保网页在加载时以原始大小显示，而不是被缩小或放大；minimum-scale=1.0: 最小缩放比例为 1；maximum-scale=1.0: 最大缩放比例为 1；user-scalable...单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。flex 布局主要是设置 flex 容器的对齐方式和 flex 项目的大小形态，上图中的四个概念十分重要。...，项目将占满整个容器的高度align-content 属性定义了多根轴线的对齐方式。...，给容器设置属性用来决定容器中的项目如何排列，如主轴方向、是否换行、主轴和交叉轴的对齐方式等，可以理解为宏观的设定。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。...其它情况下，该值将参与基线对齐。...该情况下弹性子项可能会溢出容器。 wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse -反转 wrap 排列。...align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。...baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
css可继承与不可继承的属性 无继承性的属性 display：规定元素的显示类型 文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow...文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 word-spacing：增加或减少单词间的空白（即字间隔） letter-spacing...、翻转等 图片等比例缩放 在img标签里面只设置宽，不设置高，图片就会等比例缩放。...我们可以给图片的父元素设置 padding 来保持图片本身的宽高比。...transform: scale(w-rate, h-rate);//缩放 w-rate: 宽度缩放倍率 h-rate: 高度缩放倍率 transform: skew(xdeg, ydeg);
设置宽或高 100% 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。...fill：会充满整个容器，不考虑宽高比，所以会被拉伸变形。 contain：会缩放到容器内，保持宽高比。 cover：会保持比例进行缩放，内容的尺寸一定会大于等于容器，然后进行裁剪。...none：保持图片的原始尺寸。 而 scale-down有两种表现方式所以我们单独来看。 ?...不不不，这才是刚刚开始，精彩的还在后面。后面的布局才更加精彩。 多图片的布局 上面一直在说的都单张图片的显示。只要我们把图片用合适的方式放进容器即可。如果是图片列表呢？...，整体进行缩放适应容器让右边对齐 if (this.rowWidth > clientWidth) { //减去每个css padding边距 clientWidth
，设置盒内元素的左右排列。 align-items: ...，设置同行元素的上下排列方式。 align-content:...，多行状态下，多行在盒内的对齐方式。...align-items: center; //单个网格内元素在网格内的上下对齐方式 justify-items: center; //单个网格内元素在网格内的左右对齐方式 align-content...: center; //当网格的长小于整个容器时，整个网格在它的父容器内的上下对齐方式 （口内一个田） justify-content: center; //当网格的宽小于整个容器时，整个网格在它的父容器内的左右对齐方式..."> width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。...initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。
HorizontalAlign 名称 描述 Start 按照语言方向起始端对齐。 Center 居中对齐，默认对齐方式。 End 按照语言方向末端对齐。...WrapReverse Flex容器的元素反向多行/列排布，子项允许超出容器。 VerticalAlign 名称 描述 Top 顶部对齐。 Center 居中对齐，默认对齐方式。...Exchange 将源页面元素移动到目标页面元素位置并适当缩放。 FontStyle 名称 描述 Normal 标准的字体样式。 Italic 斜体的字体样式。...LineThrough 穿过文本的修饰线。 Overline 文字上划线修饰。 None 不使用文本装饰线。 TextCase 名称 描述 Normal 保持文本原有大小写。...HoverEffect8+ 名称 描述 Auto 使用组件的系统默认悬浮效果。 Scale 放大缩小效果。 Highlight 背景淡入淡出的强调效果。 None 不设置效果。
设置宽或高 100% 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。...所以往往我们会在项目中使用第 3 种方式，即设置高度或者宽度。它会保持原有比例进行缩放。 ?...fill：会充满整个容器，不考虑宽高比，所以会被拉伸变形。 contain：会缩放到容器内，保持宽高比。 cover：会保持比例进行缩放，内容的尺寸一定会大于等于容器，然后进行裁剪。...none：保持图片的原始尺寸。 而 scale-down 有两种表现方式所以我们单独来看。 ?...不不不，这才是刚刚开始，精彩的还在后面。后面的布局才更加精彩。 多图片的布局 上面一直在说的都单张图片的显示。只要我们把图片用合适的方式放进容器即可。如果是图片列表呢？
所以，对于图片高清问题，比较好的方案就是两倍图片(@2x)。 如：200×300(css pixel)img标签，就需要提供400×600的图片。...，有很多方法 在REM布局中普遍采用的是viewport scale 视窗缩放的方式 视窗缩放很简单，其实就是直接将meta标签中的scale进行更改。...文本大小是否用rem单位 有时我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现...如果需要兼容，可以尝试 viewport-units-buggyfill 在REM布局中处理1px问题是用了视窗缩放的方案，在VW布局中就不用了，转而使用容器缩放（transform）的方案 调用方式形如...百分比的方法，实现一下容器内文本区的固定纵横比 ?
10、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？ 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。...控制子元素在侧轴的对齐方式（多行） flex-start 从主轴起点到主轴终点 flex-end: 从主轴的终点到起点 center: 居中对齐 space-between 两端分布 space-around...text-overflow:ellipsis(省略) text-wrap:规定文本换行的规则 word-break 规定非中日韩文本的换行规则 word-wrap 对长的不可分割的单词进行分割并换行到下一行...如：transform:translateY(20px): 三、缩放scale 缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（...如：transform:scale(2,1.5): 2、scaleX() ：使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。
'\n' 并换行 一般在富文本中返回换行符不是的标签，而且\n。...css3中可使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提前条件：图片的父级容器要有宽高。...内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。...cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（常用） none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。...scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。
媒体查询中的orientation选择器，您可以监听屏幕的旋转事件，并根据屏幕方向调整样式，以便页面始终保持最佳布局。...input { line-height: normal; } ⭐️⭐️对齐下拉选项 通过设置direction: rtl，可以改变下拉框选项的对齐方式，使其从右向左排列。...此外，点击穿透问题也常见，如点击蒙层，蒙层消失后可能会触发蒙层下层元素的点击事件。 解决方案 禁止缩放：通过设置 meta 标签的 user-scalable=no来禁止用户缩放。...原因 这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。 解决方案 利用伪元素和 scale 来实现 0.5px 的效果。...在需要锁定滚动的情况下，给 document 添加 touchstart 和 touchmove 事件的监听器，通过捕获触摸滑动事件，并根据情况阻止默认行为，从而避免滚动穿透。
; } 5、设置图像宽度 关闭按钮 和 LOGO 按钮 包含两个图片 , 要为图片设置宽度 , 以及对齐方式 ; 这里特别注意 , 默认的图片对齐方式是基线对齐 , 只要不是基线对齐 , 随便设置 顶部...高度也是 30 像素 */ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */...vertical-align: middle; } 建议为图像设置一个总体默认样式 , 默认的基线对齐是个大坑 ; img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐...*/ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...margin: 0; padding: 0; /* 取消列表项的样式 - 左侧的小圆点 */ list-style: none; } img { /* 默认的图片对齐方式是基线对齐
viewport 设置情况下，默认 initial-scale 的值为多少？...但是实际表现并非如此： ●小米 9 的系统浏览器表现符合预期; ●iOS 中 所有 Web 容器均无法缩放 到 比 initial-scale 更小的倍数，即使 minimum-scale 声明了一个更小且合理的取值...6 移动端跨屏适配中的 viewport 移动端的屏幕宽度差距比较小（4-8 英寸），UI 页面通常也会保持一致的布局方式，只是文字、图标、大图片等可能会根据业务需要做一些定制化的处理。...（css 中的 px 取值需按一倍屏 UI 稿来写）； ●布局方案灵活使用相对单位%/float/flex 等，以保证布局的横向伸缩和容器内各元素的大小间距符合预期； ●组合包裹相关元素，并相对某一方向做定位...中 rem 的换算系数，动态计算并设置 html 根节点 font-size，以实现整个页面内容的等比例缩放 注：一些文本段落展示类的需求，UI 设计师可能会希望宽屏比窄屏在一行内可以展示更多的文字。
标签显示模式转换 display 背景样式（重点） 背景颜色 背景图片 图片重复方式 图片位置(重点) 为什么需要CSS精灵技术 精灵技术 简写属性 背景透明(CSS3) 背景缩放(CSS3) 背景总结...# 并集选择器 并集选择器（css选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器，id选择器等），都可以作为并集选择器的一部分。...保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 # list-style-image 值 描述 URL 图像的路径。 none 默认。无图形被显示。 <!...# CSS层叠性 所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1.
, 如果 拉长浏览器的宽度 , 搜索栏也会跟着拉长 ; 实现自动伸缩的效果 : HTML 标签结构如下 : 最外层的父容器 父容器内部两个半圆形的子容器 ; 中间部分可自动伸缩的子容器盒子 半圆子容器...: 两侧的 半圆形 圆角矩形框 是通过 定位 设置的 ; 中间矩形子容器 : 中间的 白色矩形框 是通过 标准流 盒子实现的 , 该盒子不设置宽度 , 自动充满父容器 ; 为了不让该白色矩形影响到两侧的半圆...390 x 44 像素 , 该父容器的高度是 44 像素 ; 由于设备宽度不同 , 这里不设置宽度 , 让宽度自适应即可 ; css 样式实例 : .search-btn { /* 左侧按钮布局...: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...*/ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align
领取专属 10元无门槛券
手把手带您无忧上云
