首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS基础-盒模型:边框、内边、外边

    它包括内容区域、内边(padding)、边框(border)和外边(margin)。...内边(Padding) 内边是指内容区域与边框之间的空间。增加内边可以使内容与边框之间有更多间隔,提升视觉效果。 易错点:误将边框宽度计算在元素总宽度内。....box { padding: 20px; /* 四个方向内边均为20px */ padding-top: 30px; /* 仅顶部内边为30px */ } 确保在计算元素总宽度时,考虑内边的影响...DOCTYPE html> 盒模型示例 .... 通过上述代码,我们可以看到一个包含内边、边框和外边的盒子,直观地展示了盒模型的各个部分。 总结而言,理解并熟练掌握盒模型是前端开发的基础。

    15410

    HarmonyOS实战—组件的外边内边

    组件的位置属性,分为:内边 和 外边 [在这里插入图片描述] 1....外边 表示组件跟外部其他组件的边 [在这里插入图片描述] [在这里插入图片描述] [在这里插入图片描述] 案例: 如果只设置 margin ,就会把上下左右都给设置了,这是一个整体的设置。...="10vp" 设置第一个文本组件 ohos:top_margin="10vp" [在这里插入图片描述] 给下面的文本框设置:ohos:top_margin="20vp" [在这里插入图片描述] 外边小节...内边 组件边框内侧跟文本之间的间距 [在这里插入图片描述] [在这里插入图片描述] 一般设置上内边和左内边就行了,因为设置了这两个,就可以确定文本的位置了 [在这里插入图片描述] 利用内边就可以调整组件内部文本的位置...把第二个文本的内边设置为:ohos:top_padding="20vp" [在这里插入图片描述] 内边小节: 组件边框内侧距离内部文字的距离。

    1.6K20

    wxss学习系列《二》尺寸(Dimension),外边(margin)和内边(padding)

    外边(margin)和内边(padding) 说到边,那这个基本上跟Android里的概念差不多,先来看一个图吧,(虽然标注的丑了点,不过那不是重点) ?...一.margin:外边;设置对象四边的外延边。 margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。...某些相邻的margin会发生合并,称之为margin折叠,具体的现象就如果两个块级元素都设置了margin,那取两者之间的最大值做为两个元素的外边。...二.padding:内边:设置对象四边的内部边。...四.padding-top,padding-right,padding-bottom,padding-left对应的分别是上右下左内边的距离,可取值:auto/数值/百分比。

    1.9K60

    【CSS】盒子模型内边 ③ ( 盒子模型内边案例 | 使用 Fireworks 分析网页 | 缩放图片 | 切片工具测量图片 | 吸管工具获取图片颜色 | 代码示例 )

    文章目录 一、盒子模型内边案例 二、使用 Fireworks 分析网页 1、导入图片 2、缩放图片 3、切片工具测量图片 4、吸管工具获取图片颜色 5、测量结果 三、代码示例 一、盒子模型内边案例...最近 " , " 课程 " 等 , 只有 2 个字 , 有的链接很长 , 如 " 关注/订阅/互动 " , 字数很多 , 这样就不适合为其设置一个固定宽度 ; 最佳方案 是 为 链接 选项 设置一个内边...DOCTYPE html> 博客导航栏 <base...line-height: 48px; /* 文本大小 15px 灰色 */ font-size: 15px; color: #555666; /* 上下内边...0px 左右内边 20px */ padding: 0 20px; /* 取消链接下划线 */ text-decoration: none; } /* 鼠标经过样式

    1.2K20

    【CSS】使用绝对定位 浮动解决外边塌陷问题 ( 为父容器 子元素设置内边 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

    > 展示效果 : 二、传统方法解决外边塌陷 - 为父容器 / 子元素设置内边 / 边框 ---- 这里使用传统方法 : 为 父容器 / 子元素 设置 内边 / 边框 ; 下面是 为父容器设置 1...像素的 内边 ; .father { width: 400px; height: 400px; background-color: pink; /* 为父容器 / 子元素设置内边...{ width: 400px; height: 400px; background-color: pink; /* 为父容器 / 子元素设置内边 / 边框 */ padding...{ width: 400px; height: 400px; background-color: pink; /* 为父容器 / 子元素设置内边 / 边框 */ /*...{ width: 400px; height: 400px; background-color: pink; /* 为父容器 / 子元素设置内边 / 边框 */ /*

    1.3K20

    【CSS】浮动 ⑥ ( 浮动元素与父容器盒子关系 | 代码示例 )

    文章目录 一、浮动元素与父容器盒子关系 二、代码示例 1、有内边的情况 2、没有内边的情况 一、浮动元素与父容器盒子关系 ---- 在 父容器 盒子模型 中 , 将 子元素 设置为 浮动元素 ,...会出现如下情况 : 浮动元素位置 : 浮动元素 会自动 浮动到 父容器盒子模型 的左上角 与 右上角 , 浮动元素 与 父容器盒子模型边框 : 浮动元素 与 父容器 边框不重叠 , 如果没有内边 ,...浮动元素 紧贴边框 内测 ; 浮动元素 与 父容器盒子模型 内边 : 浮动元素 紧贴 父容器内边 ; 二、代码示例 ---- 1、有内边的情况 在下面的代码中 , 父容器 边框 20 像素 ,...内边 20 像素 , 浮动元素 会 紧贴 20 像素的内边 , 距离边框 20 像素 位置 的左上角 放置 ; 代码示例 : 显示效果 : 2、没有内边的情况 如果不设置内边 和 外边 , 父容器样式如下设置 : /* 父容器盒子模型 */ .father { width: 400px; height

    78430

    【CSS】盒子模型外边 ⑤ ( 模型盒子垂直外边的合并 - 塌陷 | 相邻模型盒子垂直外边合并 | 嵌套模型盒子垂直外边合并 )

    3、代码示例 - 解决塌陷问题 - 为父容器添加 overflow:hidden 样式 4、代码示例 - 解决塌陷问题 - 为父容器设置边框 5、代码示例 - 解决塌陷问题 - 为父容器设置内边 一...> 展示效果 : 二、嵌套模型盒子垂直外边合并 - 塌陷 ---- 1、外边塌陷现象说明 嵌套 的 模型盒子 中 , 如果出现下面的情况 : 父元素 没有 内边 和 边框 父元素 和 子元素 都设置了...上外边 , 则会出现 父元素 上外边 与 子元素 上外边 合并的情况 , 合并后的 上外边为 二者之间 较大的值 ; 推荐解决方案 : 为 父元素 设置 边框 或 内边 , 不要让 两个外边...> 效果展示 : 4、代码示例 - 解决塌陷问题 - 为父容器设置边框 为父容器 设置 顶部 1 像素 透明 实线边框 ; 代码示例 : 效果展示 : 5、代码示例 - 解决塌陷问题 - 为父容器设置内边 为父容器 设置 顶部 1 像素 内边 ; 代码示例 : <!

    1.1K30

    【Web APIs】JavaScript 操作元素 ⑦ ( 多精灵图背景设置 | 核心要点 - 设置 backgroundPosition 属性 | 清除默认样式 | )

    一、案例需求 给定一张精灵图 , 如下所示 : 将其设置到 Web 页面中 , 显示如下样式 : 二、案例核心要点分析 1、清除元素的默认内外边样式 ★ ( 重点 ) HTML 标签元素 都有自己的...默认内边 和 外边 样式 , 如下所示 : 元素 : 默认外边 常见为 8px 或 16px , 默认内边 常为 0 ; , , , , ,... 元素 : 默认的 上边和下边可能都在 16px 到 24px 之间 , 内边 通常为 0 ; 元素 : 默认的上边和下边 为 16px 或 1em , 默认内边 0 ;..., 元素 : 默认的上边和下边 16px 或 1em , 默认的左内边 40px 或 2em ; 元素 : 默认外边 0 , 默认的左内边 20px 或 1em ;...; 下面的代码中 , 使用 通用选择器 * 将网页上所有 HTML 元素的 外边 ( margin ) 和 内边 ( padding ) 都设置为 0 ; /* 全部元素的通用样式设置

    9710
    领券