-
2.9-CSS基础--盒子模型
盒 子 模 型 的 介 绍
盒子概念
- 页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便进行布局
- 浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们称之为盒子
盒子模型
- CSS中规定每个盒子分别由以下内容构成
- 内容区域（content）
- 内边距区域（padding）
- 边框区域（border）
- 外边距区域（margin）
盒子模型与现实中的包装盒类似
盒 子 模 型 内 容 区 域 宽 高 设 置
边 框 border 相 关 属 性 设 置
作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style 实线solid、虚线dashed、点线dotted 边框颜色 border-color 颜色取值 边框border的连写形式
- 单个取值的连写，取值之间以空格隔开
- 如：border：10px solid red;
边框border的单方向设置
- 只给盒子的某个方向单独设置边框
- border - 方位名词
- 如：border-top：10px solid red;
- 顶部 top
- 底部 bottom
- 左边 left
- 右边 right
- 如：border-top：10px solid red;
盒子实际大小计算公式
- 盒子实际大小（宽度）=左边框+内容宽度+右边框
内边距（padding）-取值
- 作用：设置边框与内容区域之间的距离
- 常见取值
取值 示例 含义 一个值 padding：10px; 上右下左设置为10px 两个值 padding：10px 20px; 上下设置为10px、左右设置为20px 三个值 padding：10px 20px 30px; 上设置为10px、左右设置为20px、下设置为30px 四个值 padding：10px 20px 30px 40px; 上设置为10px、右设置为20px、下设置为30px、左设置为40px - 规则：从上开始赋值，顺时针赋值
内边距（padding）-单方向设置
- padding - 方位名词
- padding-top：20px;
新 浪 导 航 栏 实 例
Document - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
-
相关阅读:
[附源码]java毕业设计柠檬电动车租赁系统
NVIDIA：应将USD作为3D互联网的HTML标准语言
VIT(Vision Transformer)学习-模型理解（一）
javascript编程学习笔记分享
C++多态的理解，笔记
这次主要的配置
【网络安全】使用meterpreter进行远控、Mysql注入、反弹型XSS攻防
23.1 Bootstrap 表格
Docker部署es+kibana
Java进行excel的导入导出操作
- 原文地址：https://blog.csdn.net/weixin_43472938/article/details/126001993
