.box{ flex-wrap: nowrap | wrap | wrap-reverse; } nowrap（默认）：不换行。 wrap-reverse：换行，第一行在下方。...所以，项目之间的间隔比项目与边框的间隔大一倍。 align-items：定义项目在交叉轴上如何对齐。...center：交叉轴的中点对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 align-content：属性定义了多根轴线的对齐方式。...@media关键字 10-5 简要说明什么是视口。 在桌面浏览器中，视口的概念等于浏览器中窗口的概念。视口中的像素指的是CSS像素，视口大小决定了页面布局的可用宽度。...视口的坐标是逻辑坐标，与设备无关。
1，h1到h6这里也有定义了 2，全局元素被直接赋予font-size 设置为 14px，line-height 设置为 1.428， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距...>小号文本，是父容器字体的85%，也可以用.small代替； 8，强调一段文本； 9，斜体文本 10，,在 HTML5 中可以放心使用 11，对齐： text-left...,text-center, text-right, text-justify：、、注意段落与段落之间不能留任何空行 text-nowrap//禁止文件自动换行 12，改变文件大小写： text-lowercase....list-inline:将所有元素放置于同一行 有序列表 18,描述：带有描述的短语列表 ......19，自动截断：.text-overflow水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。
, 第二行紧贴底部 , 该设置可以使用 align-content 样式进行设置 ; 侧轴只有一行元素 , 设置 align-content 样式 无效 ; 使用该设置的前提 : ① 设置了 flex...-- 设置 meta 视口标签 --> 视口标签 --> 视口标签 --> 视口标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable
固定定位元素 fixed 的元素相对于视口html定位，且不随视口滚动而滑动，不占原来的位置。同时设置float浮动失效。...定位元素与弹性盒子都会变成“行内块”化，弹性盒子作用于子元素，定位元素作用于自身。 浮动与弹性盒子选择上的区别： 浮动(float)：可以让元素同行显示，元素排列不下时会自动让元素换行显示。...弹性容器(display: flex)：可以让元素同行显示，元素排列不下时不会自动换行，而是将元素进行压缩排列显示，除非设置flex-warp属性才会换行显示。...格式：display: flex; 写在父级元素(容器)里 容器属性 1. flex-direction： 主轴方向 2. flex-wrap： 主轴一行满了换行 3. flex-flow： 1和2的组合...4. justify-content： 主轴元素对齐方式 5. align-items： 交叉轴元素对齐方式//单行 6. align-content： 交叉轴行对齐方式//多行 侧轴： align-items
因此，了解最新的 CSS 功能非常重要，这样你才能在项目中使用它们，减少对第三方库的依赖。 本文将介绍一些即将推出的 CSS 新特性，这些特性将简化你的开发工作。...text-wrap 属性 text-wrap 属性用于指定元素中的文本是否应换行。它是 CSS 文本模块第 4 级规范的一部分。...该属性可以接受多个值，但最有趣的值是 balance 和 pretty 。 如果将 text-wrap 属性设置为 balance ，浏览器将尝试以元素的最后一行与第一行一样长的方式对文本进行换行。...另一方面，如果将 text-wrap 属性设置为 pretty ，浏览器就会尝试智能地将文本分成块元素，使最后一行不会出现单字/孤字。...查看过渡 CSS 规范中即将出现一个名为 view-transition 的新元标记，它将允许我们在用户滚动页面时控制视口的转换。 例如，如果想在用户浏览新页面时为视口添加淡入效果，可以这样做。
视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...2.2 视觉视口 （visual viewport） 它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 ?...meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。...*/ flex-wrap: wrap; /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
但是没有任何技巧十全十美，我们需要注意几点： 我们有时不能选择绝对定位，他对整个布局影响太过强烈 如果需要居中的元素已经在高度上超过了视口，那它的顶部部分就会被视口裁掉 在某些浏览器中，这个方法可能会导致元素的显示模糊...，因为元素可能会被放置在半个元素上.可以用一个偏hack的手段来修复transform-style:preserve-3d 基于视口的解决方案 假设我们不使用绝对定位，仍然采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动...transform:translateY(-50%); } 但是却产生了十分离谱的效果.原因在于margin的百分比值是以父元素的宽度作为解析基准的 在CSS值与单位（第三版）定义了一套新的单位...，称为视口相关的长度单位 vm是与视口宽度相关的.1vm相当于视口的1% 与vw类似，1vh相当于视口的1% 当视口宽度小于高度时，1vmin等于1vw，否则等于1vh 当视口宽度大于高度时，1vmax...; margin:0; } main{ margin:auto; } Flexbox还有一个好处就是，它可以将匿名容器（即使没有节点包裹的文本节点）垂直居中.
与 A 同级，则选中 B img + p # 选择器组 当多个选择器使用相同样式时，可以用 , 将多个选择器隔开 例如： h1, h2, h3, h4 { color: red; } a...# 行高 line-height 即每行文字的 baseline 的间距，可以用不带单位的数字表示行高为字体大小的数倍 line-height: 1.6; line-height: 32px; # 文本对齐方式...（pre-line 是在 normal 的基础上保留了 html 中的换行符） # CSS 如何调试 使用浏览器自带的开发者工具 DevTools，快捷键Ctrl+Shift+I或F12（Windows...# Flex Box 排版上下文 一种新的排版上下文 它可以控制子级盒子的： 摆放的流向 () 摆放顺序 盒子宽度和高度 水平和垂直方向的对齐 是否允许折行 # flex-direction 属性 控制...，表示对于上下左右的间隔距离 # position: fixed 相对于视口绝对定位 要点： 脱离常规流，即不为元素预留空间 相对于屏幕视口（viewport）的位置来指定元素位置 元素的位置在屏幕滚动时不会改变
4.1 标题 h1-h6 重新定义样式，HTML 中的所有标题标签， 到 均可使用。 增加了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。...，则可以添加 .lead，将得到更大更粗，行高更高的文本，它的作用相当于是文章摘要。...> 4.5 对齐类 简单方便将文字对齐的类，它们一般应用在 p 标签上（用在 div 上不符合规范，用在 span 标签则不能生效）。...（padding），将所有元素放置于同一行。...在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。 4.10 强调类 这些强调类，通过颜色来表示强调。一般是给 p 元素加这些类名，会显示不同的颜色。 <!
是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。viewport 视口。...minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">width=device-width: 将视口的宽度设置为设备的宽度。...：定义了项目在主轴上的对齐方式，属性值作用flex-start（默认）与主轴的起点对齐flex-end与主轴的终点对齐center与主轴的中点对齐space-between两端对齐主轴的起点与终点，项目之间的间隔都相等...项目之间的间隔比项目与边框的间隔大一倍align-items 属性定义项目在交叉轴上如何对齐。...属性值作用flex-start交叉轴的起点对齐flex-end交叉轴的终点对齐center交叉轴的中点对齐baseline项目的第一行文字的基线对齐stretch（默认值）如果项目未设置高度或设为 auto
用于响应式排版的视口单位 使用视口单位（vw、vh、vmin、vmax）可以使字体大小响应视口大小。 h1{ font-size: 5vw; } 06....用于文本换行的 CSS 形状 将 shape-outside 与 Polygon() 函数结合使用，可实现围绕不规则形状的精确文本环绕。...形状边缘 当与 CSS 形状结合使用时，形状边距指定浮动元素形状周围的边距，从而可以精确控制文本换行和布局。 .shape { shape-margin: 20px; } 75....文本最后对齐 text-align-last 确定块元素中最后一行文本的对齐方式，从而提供对多行块中文本对齐的精确控制。 p { text-align-last: justify; } 78....首字母 将块元素的第一个字母或首字母字符设计为装饰性首字下沉或其他视觉上突出的首字母字符。
设备像素与CSS像素的区别是什么？ EM，REM 的计算规则是什么？实际应用中如何选择？ 什么是视口 viewport，布局视口，视觉视口，理想视口的区别？ 百分比单位和视口单位的计算规则是什么？...我们可以通过 meta 设置将布局视口转换为理想视口， 复制代码 meta 视口可以通过 与视口相关的几个单位有：vw，vh，百分比。...这里只需要记住一点，百分比是相对于父元素的宽度和高度计算的。 到这里，相信你已经掌握了响应式布局里常用的所有单位。接下来，我们介绍弹性盒和栅格，它们都不是单位，而是一种新的布局方案。...，子元素在主轴上的对齐方式 align-items，子元素在垂直于主轴的交叉轴上的排列方式 align-content，子元素在多条轴线上的对齐方式 items 子元素也支持 6 个属性可选值， order
浏览器兼容性与视口设置： ：指定页面在 Internet Explorer 浏览器中以最新版本的渲染模式显示...：设置视口宽度等于设备宽度，初始缩放比例为 1.0，实现页面在不同设备上的自适应显示...color: #242333;：设置屏幕上文本的颜色为深灰色。 text-align: center;：使屏幕上的文本在水平方向上居中对齐。...line-height: 70px;：设置文本的行高等于屏幕的高度，使文本在垂直方向上居中对齐。 font-size: 30px;：设置文本的字体大小为 30px。...flex-wrap: wrap;：允许座位元素在一行排不下时换行。 gap: 10px;：设置座位元素之间的默认间隔为 10px。
一、案例框架搭建 1、html 标签结构 在 html 中设置 meta 视口标签 , 设置宽度等于设备宽度 , 初始比例为 1.0 , 用户不可缩放 , 最大缩放比例和最小缩放比例都设置为 1.0 ;..., 积累的一些默认 css 样式 , 先设置到 css 样式文件的头部 ; 清除点击高亮样式 , 将点击后的高亮样式设置为transparent 完成透明 ; * { -webkit-tap-highlight-color...height: 0; clear: both; } 设置 css3 盒子模型样式 : div { /* css3 盒子模型 */ box-sizing: border-box; } 设置文本与图片对齐的样式...: 默认是与文字基线对齐 ; img { /* 图片与文字对齐样式 默认是与文字基线对齐 */ vertical-align: middle; } 设置链接的样式 : img, a {...{ /* 图片与文字对齐样式 默认是与文字基线对齐 */ vertical-align: middle; } div { /* css3 盒子模型 */ box-sizing
=1.0"> 空白折叠现象 夏安 效果如下： 现在大家应该知道了，空白缝隙是因为什么导致了，因为文本与文本之间和文本与图片之间存在换行现象...你可以通过设置top、left、bottom和right偏移量属性来将元素移动到你想要的位置。 但是通常情况下你并不希望元素相对于视口进行定位，而是相对于容器元素。...当页面滚动时，固定的元素会留在相对于视口的位置，而其他正常流中的内容则和通常一样滚动。 当你想要一个固定导航栏一直停留在屏幕上时这会非常有效。...这样固定的元素就会相对于该块级元素偏移，而非视口。 接下来给出栗子： 的间隔比项目与边框的间隔大一倍。 4.3.5 align-items属性 align-items属性定义项目在交叉轴上如何对齐。
，而 sizes 属性定义了在不同视口宽度下使用的图像尺寸。...这样可以根据设备的屏幕特性选择合适的图像，从而优化加载性能和显示效果。 六、响应式排版 响应式排版确保文本在不同设备上可读且美观。这涉及到字体大小、行高和文本对齐等方面的调整。...6.1 使用相对单位 使用相对单位（如 em 和 rem）来定义字体大小和行高可以使文本在不同屏幕尺寸下保持良好的可读性。 示例：响应式排版 上减少了字体大小，以确保文本在不同设备上保持良好的可读性。 七、视口元标签 视口元标签用于控制网页在移动设备上的显示方式。...它允许我们设置视口的宽度和缩放级别，从而确保页面在不同设备上能够正确渲染。 7.1 基本视口设置 设置视口宽度为设备宽度，可以确保页面在移动设备上按照预期显示。 示例：视口元标签 <!
文本 CSS文本控制可以帮助我们更好地展示网页中文本的信息，并提高网页的视觉效果。 缩进 用于设置文本的首行缩进，适用于段落首行缩进的场景，避免在行内元素上使用。...justify-all（不太常见）： 类似于 justify，但不仅仅在行末增加额外空白，而是在行首和行末均匀分布。 start： 视浏览器的文本方向而定，表示文本在起始端（通常是左端）对齐。...end： 视浏览器的文本方向而定，表示文本在结束端（通常是右端）对齐。...: center;">这段文本居中对齐 效果： 行高 使用 line-height 属性，可设置文本行与行之间的高度。...行高设置： 根据字体大小适当设置行高，以提高文本的可读性。通常，行高可以设置为字体大小的 1.4 到 1.6 倍。 粗细 CSS 中字体粗细可以使用 font-weight 属性来设置。
在滚动后，它相对于 viewport 视口仍处于同一位置。...如果允许换行，这个属性允许你控制行的堆叠方向。 取值： nowrap：默认值。不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。...每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。...---- align-items CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。...最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。 center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。
align-items 设置侧轴子元素排列 align-items的值为center 表示居中显示 align-items的值为stretch 会将子元素拉伸 align-self 控制某个弹性盒子在侧轴的对齐方式...10份， HTML标签的字号为视口宽度的 1/10 @media (width:320px) { html { font-size...height 1vw = 1/100视口宽度 1vh = 1/100视口高度 vw的好处自动是视口宽度的1/100 自动计算不需要在引入额外js，不过又移动兼容性问题 设计稿一般是375px，1vw就是...3.75px flexible 移动设备视口宽度很多，我们不能一个一个使用媒体查询，我们使用flexible配合rem使用 flexible.js是手淘开发出的一个用来适配移动端的js框架。...核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
line-height 设置行高。 letter-spacing 设置字符间距。 text-align 对齐元素中的文本，默认left，right、center、justify两端对齐。...11. vh/vw与%区别 单位 依赖于 % 元素的祖先元素 vh/vw 视口高度/宽度的尺寸（横屏/竖屏会自动变化） 12. export default 和 export 区别 export 与...flex-wrap属性定义，如果一条轴线排不下，如何换行。 // nowrap（默认）：不换行。 （不换行） // wrap：换行，第一行在上方。...（正常换行） // wrap-reverse：换行，第一行在下方。...// flex-start：与交叉轴的起点对齐。 // flex-end：与交叉轴的终点对齐。 // center：与交叉轴的中点对齐。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
