style /* 最外层容器样式设置内边距让内容不贴边 */ .content { padding: 20rpx; } /* 所有按钮统一设置外边距避免按钮之间紧贴 */ button { margin: 20rpx; } /* 设备列表项的样式使用 flex 布局让名称和按钮左右分布 */ .device-item { display: flex; justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */ padding: 20rpx; border-bottom: 1px solid #eee; /* 底部分隔线 */ } /style1. 注释/* ... */作用CSS 中的注释用来解释代码浏览器会忽略。写注释是良好习惯方便自己和他人理解。2. 类选择器.contentcss.content { padding: 20rpx; }.content类选择器选中所有classcontent的元素即最外层的view classcontent。padding: 20rpx;padding是内边距指元素内容与边框之间的内部间距。20rpx是 uni-app 中使用的响应式单位类似于px但会根据屏幕宽度自动缩放保证在不同设备上显示比例一致。这里设置四周内边距均为20rpx使页面内容不紧贴屏幕边缘留出空白视觉上更舒适。常用相关属性padding-top/padding-right/padding-bottom/padding-left分别设置四个方向的内边距。也可以简写padding: 10px 20px;上下10px左右20pxpadding: 5px 10px 15px 20px;上右下左顺时针顺序设置。3. 标签选择器buttoncssbutton { margin: 20rpx; }button标签选择器选中页面中所有的button组件。margin: 20rpx;margin是外边距指元素与其他元素之间的外部间距。这里给每个按钮四周都加上20rpx的外边距避免按钮之间紧贴在一起比如垂直排列的按钮之间会有空隙水平排列也会分开。因为按钮默认是块级元素在 flex 容器中会改变但加上外边距可以控制间距。常用相关属性类似padding也有margin-top、margin-right、margin-bottom、margin-left。简写规则同上。注意外边距可能会发生“折叠”现象垂直相邻的 margin 会合并但这里不深入。4. 类选择器.device-itemcss.device-item { display: flex; justify-content: space-between; align-items: center; padding: 20rpx; border-bottom: 1px solid #eee; }4.1display: flex;将当前元素设置为弹性容器flex container其子元素会按照flex 布局规则排列默认水平方向排列。flex 布局非常强大能轻松实现水平或垂直方向的对齐、分布。4.2justify-content: space-between;定义子元素在主轴默认水平方向上的对齐方式。space-between两端对齐第一个子元素靠左最后一个子元素靠右中间的子元素等间距分布剩余空间均匀分配在它们之间。这里的效果是左边的设备名称靠左右边的“连接”按钮靠右中间有间距。其他常用值flex-start左对齐默认。flex-end右对齐。center居中对齐。space-around每个子元素两侧的间距相等最左边和最右边与容器的间距是内部间距的一半。space-evenly所有间距完全相等包括最左边和最右边。4.3align-items: center;定义子元素在交叉轴垂直于主轴默认垂直方向上的对齐方式。center让子元素在垂直方向居中对齐。这样设备名称和按钮都能在列表项中间显示不会一上一下。其他常用值flex-start顶部对齐。flex-end底部对齐。stretch拉伸填满默认如果子元素未设置高度则会拉伸至容器高度。4.4padding: 20rpx;给每个列表项设置内边距让内容文字和按钮与边框之间有留白避免拥挤。4.5border-bottom: 1px solid #eee;设置下边框作为列表项之间的分隔线。1px边框粗细。solid边框样式为实线其他可选dotted点线、dashed虚线等。#eee颜色浅灰色十六进制表示法#eeeeee的简写。常用边框属性border是简写也可以分别设置border-width、border-style、border-color。单独设置某一边border-top、border-right、border-bottom、border-left。常用 CSS 概念补充选择器决定哪些元素应用样式。常见的有标签选择器如button类选择器如.contentID 选择器#id不常用组合选择器如.device-item button选中设备项内的按钮盒模型每个元素可以看作一个盒子从内到外依次是内容content、内边距padding、边框border、外边距margin。理解盒模型对布局很重要。单位px固定像素。rpxuni-app 的响应式单位根据屏幕宽度自适应通常设计稿按 750rpx 宽度。%百分比相对于父元素。vw/vh视口宽度/高度的 1%。颜色可以用十六进制#rrggbb、RGBrgb(255,0,0)、RGBA带透明度、颜色名称red等。总结这段样式实现了页面整体留边距.content。所有按钮之间保持间距button的margin。设备列表项采用 flex 布局名称左、按钮右且垂直居中并有下划线分隔每个项也有内边距。如果你在浏览器或手机模拟器中运行会看到这些效果。如果需要调整比如改变间距、颜色、对齐方式直接修改对应的数值或属性值即可。1.padding为什么叫内边距CSS 把每个元素视为一个盒子从内到外依次是内容content实际显示的文字、图片等。内边距padding内容与边框之间的空白区域填充在内容外面。边框border围绕在内边距外的线条。外边距margin盒子与其他元素之间的空白区域。所以padding就是“内部的填充距离”用于控制内容不贴着边框让布局更透气。2. 除了内边距还能规定什么用什么单位CSS 可以规定几乎所有视觉表现常见的有类别示例属性说明尺寸width,height,max-width元素的宽度、高度外边距margin,margin-top元素外部间距边框border,border-radius边框粗细、样式、颜色圆角背景background-color,background-image背景色、背景图文本color,font-size,text-align文字颜色、大小、对齐布局display,position,flex排列方式、定位动画transition,animation过渡、动画效果常用单位px固定像素。rpxuni-app 专用根据屏幕宽度自适应通常按 750rpx 设计。em相对于当前元素字体大小1em 当前字体大小。rem相对于根元素html字体大小。%相对于父元素的对应属性值。vw/vh视口宽高的 1%。3. Flex 布局规则是什么样的Flex弹性布局是一维布局模型要么水平排要么垂直排。规则如下父容器flex container设置css.container { display: flex; /* 启用flex */ flex-direction: row; /* 主轴方向row(水平) | column(垂直) | row-reverse | column-reverse */ flex-wrap: nowrap; /* 是否换行nowrap(不换行) | wrap(换行) */ justify-content: flex-start; /* 主轴对齐flex-start | flex-end | center | space-between | space-around | space-evenly */ align-items: stretch; /* 交叉轴对齐stretch | flex-start | flex-end | center | baseline */ align-content: stretch; /* 多行时的交叉轴对齐类似justify-content */ }子元素flex items设置css.item { flex: 0 1 auto; /* 简写flex-grow, flex-shrink, flex-basis */ order: 0; /* 排列顺序数值越小越靠前 */ align-self: auto; /* 单独覆盖align-items */ }flex-grow当有多余空间时子项按比例放大默认 0不放大。flex-shrink空间不足时子项按比例缩小默认 1可缩小。flex-basis在分配多余空间前子项的初始大小默认auto。你代码中的用法css.device-item { display: flex; justify-content: space-between; /* 主轴水平两端对齐左边文字靠左右边按钮靠右 */ align-items: center; /* 交叉轴垂直居中 */ }效果设备名称左对齐连接按钮右对齐两者垂直居中间距自动分配。
毕设日志26.3.18（1）：HBuilderX.vue 文件样式部分（＜style＞）解读
style /* 最外层容器样式设置内边距让内容不贴边 */ .content { padding: 20rpx; } /* 所有按钮统一设置外边距避免按钮之间紧贴 */ button { margin: 20rpx; } /* 设备列表项的样式使用 flex 布局让名称和按钮左右分布 */ .device-item { display: flex; justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */ padding: 20rpx; border-bottom: 1px solid #eee; /* 底部分隔线 */ } /style1. 注释/* ... */作用CSS 中的注释用来解释代码浏览器会忽略。写注释是良好习惯方便自己和他人理解。2. 类选择器.contentcss.content { padding: 20rpx; }.content类选择器选中所有classcontent的元素即最外层的view classcontent。padding: 20rpx;padding是内边距指元素内容与边框之间的内部间距。20rpx是 uni-app 中使用的响应式单位类似于px但会根据屏幕宽度自动缩放保证在不同设备上显示比例一致。这里设置四周内边距均为20rpx使页面内容不紧贴屏幕边缘留出空白视觉上更舒适。常用相关属性padding-top/padding-right/padding-bottom/padding-left分别设置四个方向的内边距。也可以简写padding: 10px 20px;上下10px左右20pxpadding: 5px 10px 15px 20px;上右下左顺时针顺序设置。3. 标签选择器buttoncssbutton { margin: 20rpx; }button标签选择器选中页面中所有的button组件。margin: 20rpx;margin是外边距指元素与其他元素之间的外部间距。这里给每个按钮四周都加上20rpx的外边距避免按钮之间紧贴在一起比如垂直排列的按钮之间会有空隙水平排列也会分开。因为按钮默认是块级元素在 flex 容器中会改变但加上外边距可以控制间距。常用相关属性类似padding也有margin-top、margin-right、margin-bottom、margin-left。简写规则同上。注意外边距可能会发生“折叠”现象垂直相邻的 margin 会合并但这里不深入。4. 类选择器.device-itemcss.device-item { display: flex; justify-content: space-between; align-items: center; padding: 20rpx; border-bottom: 1px solid #eee; }4.1display: flex;将当前元素设置为弹性容器flex container其子元素会按照flex 布局规则排列默认水平方向排列。flex 布局非常强大能轻松实现水平或垂直方向的对齐、分布。4.2justify-content: space-between;定义子元素在主轴默认水平方向上的对齐方式。space-between两端对齐第一个子元素靠左最后一个子元素靠右中间的子元素等间距分布剩余空间均匀分配在它们之间。这里的效果是左边的设备名称靠左右边的“连接”按钮靠右中间有间距。其他常用值flex-start左对齐默认。flex-end右对齐。center居中对齐。space-around每个子元素两侧的间距相等最左边和最右边与容器的间距是内部间距的一半。space-evenly所有间距完全相等包括最左边和最右边。4.3align-items: center;定义子元素在交叉轴垂直于主轴默认垂直方向上的对齐方式。center让子元素在垂直方向居中对齐。这样设备名称和按钮都能在列表项中间显示不会一上一下。其他常用值flex-start顶部对齐。flex-end底部对齐。stretch拉伸填满默认如果子元素未设置高度则会拉伸至容器高度。4.4padding: 20rpx;给每个列表项设置内边距让内容文字和按钮与边框之间有留白避免拥挤。4.5border-bottom: 1px solid #eee;设置下边框作为列表项之间的分隔线。1px边框粗细。solid边框样式为实线其他可选dotted点线、dashed虚线等。#eee颜色浅灰色十六进制表示法#eeeeee的简写。常用边框属性border是简写也可以分别设置border-width、border-style、border-color。单独设置某一边border-top、border-right、border-bottom、border-left。常用 CSS 概念补充选择器决定哪些元素应用样式。常见的有标签选择器如button类选择器如.contentID 选择器#id不常用组合选择器如.device-item button选中设备项内的按钮盒模型每个元素可以看作一个盒子从内到外依次是内容content、内边距padding、边框border、外边距margin。理解盒模型对布局很重要。单位px固定像素。rpxuni-app 的响应式单位根据屏幕宽度自适应通常设计稿按 750rpx 宽度。%百分比相对于父元素。vw/vh视口宽度/高度的 1%。颜色可以用十六进制#rrggbb、RGBrgb(255,0,0)、RGBA带透明度、颜色名称red等。总结这段样式实现了页面整体留边距.content。所有按钮之间保持间距button的margin。设备列表项采用 flex 布局名称左、按钮右且垂直居中并有下划线分隔每个项也有内边距。如果你在浏览器或手机模拟器中运行会看到这些效果。如果需要调整比如改变间距、颜色、对齐方式直接修改对应的数值或属性值即可。1.padding为什么叫内边距CSS 把每个元素视为一个盒子从内到外依次是内容content实际显示的文字、图片等。内边距padding内容与边框之间的空白区域填充在内容外面。边框border围绕在内边距外的线条。外边距margin盒子与其他元素之间的空白区域。所以padding就是“内部的填充距离”用于控制内容不贴着边框让布局更透气。2. 除了内边距还能规定什么用什么单位CSS 可以规定几乎所有视觉表现常见的有类别示例属性说明尺寸width,height,max-width元素的宽度、高度外边距margin,margin-top元素外部间距边框border,border-radius边框粗细、样式、颜色圆角背景background-color,background-image背景色、背景图文本color,font-size,text-align文字颜色、大小、对齐布局display,position,flex排列方式、定位动画transition,animation过渡、动画效果常用单位px固定像素。rpxuni-app 专用根据屏幕宽度自适应通常按 750rpx 设计。em相对于当前元素字体大小1em 当前字体大小。rem相对于根元素html字体大小。%相对于父元素的对应属性值。vw/vh视口宽高的 1%。3. Flex 布局规则是什么样的Flex弹性布局是一维布局模型要么水平排要么垂直排。规则如下父容器flex container设置css.container { display: flex; /* 启用flex */ flex-direction: row; /* 主轴方向row(水平) | column(垂直) | row-reverse | column-reverse */ flex-wrap: nowrap; /* 是否换行nowrap(不换行) | wrap(换行) */ justify-content: flex-start; /* 主轴对齐flex-start | flex-end | center | space-between | space-around | space-evenly */ align-items: stretch; /* 交叉轴对齐stretch | flex-start | flex-end | center | baseline */ align-content: stretch; /* 多行时的交叉轴对齐类似justify-content */ }子元素flex items设置css.item { flex: 0 1 auto; /* 简写flex-grow, flex-shrink, flex-basis */ order: 0; /* 排列顺序数值越小越靠前 */ align-self: auto; /* 单独覆盖align-items */ }flex-grow当有多余空间时子项按比例放大默认 0不放大。flex-shrink空间不足时子项按比例缩小默认 1可缩小。flex-basis在分配多余空间前子项的初始大小默认auto。你代码中的用法css.device-item { display: flex; justify-content: space-between; /* 主轴水平两端对齐左边文字靠左右边按钮靠右 */ align-items: center; /* 交叉轴垂直居中 */ }效果设备名称左对齐连接按钮右对齐两者垂直居中间距自动分配。
