CSS基础学习-盒子模型、margin、paddin的使用
CSS基础学习-盒子模型、margin、paddin的使用
盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。
元素的宽度和高度
当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。下面的例子中的元素的总宽度为300px
:
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
算一算:
300px (宽)
- 50px (左 + 右填充)
- 50px (左 + 右边框)
- 50px (左 + 右边距)
= 450px
试想一下,你只有 250 像素的空间。让我们设置总宽度为 250 像素的元素:
div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0; }
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
margin
(外边距)
margin
清除周围的(外边框)元素区域。
margin
没有背景颜色,是完全透明的。
margin
可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
值 | 说明 |
---|---|
auto |
设置浏览器边距。这样做的结果会依赖于浏览器 |
length |
定义一个固定的margin (使用像素,pt ,em 等) |
% |
定义一个使用百分比的边距 |
margin
- 单边外边距属性
在CSS中,它可以指定不同的侧面不同的边距:
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
margin
- 简写属性
为了缩短代码,有可能使用一个属性中margin
指定的所有边距属性。这就是所谓的简写属性。所有边距属性的简写属性是 margin
:
margin:100px 50px;
margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px
文本的上边距设置使用厘米值
Set 使用百分比值设置文本的下边距
所有的CSS边距属性
属性 | 描述 |
---|---|
margin |
简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom |
设置元素的下外边距。 |
margin-left |
设置元素的左外边距。 |
margin-right |
设置元素的右外边距。 |
margin-top |
设置元素的上外边距。 |
padding
(填充)
当元素的 padding
(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。
单独使用 padding
属性可以改变上下左右的填充。
值 | 说明 |
---|---|
length |
定义一个固定的填充(像素, pt , em ,等) |
% |
使用百分比值定义一个填充 |
填充- 单边内边距属性
在CSS中,它可以指定不同的侧面不同的填充:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
- 上内边距是 25px
- 右内边距是 50px
- 下内边距是 25px
- 左内边距是 50px
填充 - 简写属性
为了缩短代码,它可以在一个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding
:
padding:25px 50px;
Padding
属性,可以有一到四个值。
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px
在一个声明中的所有填充属性
所有的CSS填充属性
属性 | 说明 |
---|---|
padding |
使用简写属性设置在一个声明中的所有填充属性 |
padding-bottom |
设置元素的底部填充 |
padding-left |
设置元素的左部填充 |
padding-right |
设置元素的右部填充 |
padding-top |
设置元素的顶部填充 |
原文地址:https://www.cnblogs.com/hirak0/p/15232640.html
- Go并发编程基础(译)
- go-concurrent-programming.md
- Go语言并发模型:以并行处理MD5为例
- golang 使用json 包 实现序列化
- 【远古文章】用 Go 语言来看 Android! 出发, Android, 出发!
- Leaf 游戏服务器框架简介
- MongoDB 存储过程的使用以及性能调优方案
- [go语言]利用缓冲信道来实现网游帐号验证消息的分发和等待
- 【Golang语言社区--投稿专区】简单,好玩,有趣的命令行版12306(golang)
- 网游内存数据库的设计(1)
- 网游内存数据库的设计(2)
- Golang语言 上传文件
- Golang语言 监控文件变化小程序.
- Golang语言实现 tail 查看文本文件末行功能,类似于linux tail -n 100 功能
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例