前端里面padding作用是什么?

用margin还是用padding这个问题是每个学习css进阶时的必经之路。

css边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——css权威指南

padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢css权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。——css权威指南

关于什么时候用margin什么时候用padding,网上有许许多多的讨论,大多数似乎讨论到点上面,却又有些隔靴搔痒的感觉,总是答不到点上。而且margin和padding在许多地方往往效果都是一模一样,而且你也不能说这个一定得用margin那个一定要用padding,因为实际的效果都一样,你说margin用起来好他说padding用起来会更好,但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的:

何时应当使用margin:
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。

需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。

个人认为:margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑
本质上是浏览器可识别的规则
我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm(没有区别)

网页文件的扩展名:.html或.htm(没有区别)

我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)

网页文件的扩展名:.html或.htm(没有区别)

层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言

简称“JS”,是一种属于网络的脚本语言
常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

bootstrap:简洁、直观、强悍的前端开发框架
它在jQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
浏览器内嵌了一个socket客户端,默认TCP链接

△浏览器自带socket客户端,自己编写的服务端也可以为浏览器服务

浏览器内核(渲染引擎):渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
渲染引擎是兼容性问题出现的根本原因,大部分渲染效果差不多

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字
某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类

设置网站描述信息,用于在搜索引擎搜索时,显示网站基本描述信息

未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址

span标签 文档分区

如果不对 div和span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异

div标签 换行文档分区

div是一个块级元素。这意味着它的内容自动地开始一个新行
可以把文档分割为独立的、不同的部分

注意:a标签字体颜色设置,必须找到a标签才能设置 div{ 用了基本选择器中的元素选择器 给所有div标签加样式

jquery对象和dom对象之间不能调用互相的方法

$("选择器:筛选器") 优先

:has(选择器) 包含某个子代的父标签 .has() 包含某个子代的父标签

$("选择器").筛选器方法

往上找,直到找到哪个标签为止

操作样式一般通过class而不是id

父标签 . append(子 标签) //子标签添加到父标签的子代的最后 子标签. appendTo(父标签) //子标签添加到父标签的子代的最后 父标签 . prepend(子标签) //子标签添加到父标签的子代前面 子标签.prependTo(父标签) //子标签添加到父标签的子代前面
父标签.append(子标签) // 子标签添加到父标签的子代的最后
父标签.prepend(子标签) // 子标签添加到父标签的子代前面

一、盒子的实际大小:内容的宽和和高度+内边距+边框;

Margin外边距的设置

取值的个数不同表示意思不同:

问题:01、如果盒子有固定的宽高的情况下,添加了边框和内边距,盒子的实际大小会变大;

解决方案:加多少减去多少,再减的是还要注意是减去宽度环视高度;

margin不同方向设置:

取值的个数不同表示意思不同:

2、块级盒子水平居中(天天用)

01 盒子的显示模式必须为块级元素

(1)行内元素设置外边距marginpadding的问题

解决方案:01、不要添加;

(2)垂直排列的盒子外边距合并

问题:两个盒子如果垂直排列,上面的盒子设置了margin-bottom,下面的盒子设置了margin-top,最终显示的样式两个值谁大就显示谁;

解决方案:不要同时设置,只给一个盒子设置即可;

(3)嵌套垂直外边距合并

问题:如果两个盒子有嵌套包含的父子级关系,如果给子级盒子设置了margin-top,效果显示父级盒子也会跟着掉下来;

1、为父级设置上边框(不用,因为添加了border父级的高度会增大)

2、直接给父级设置padding-top1px,如果父级有高度注意减去对应的高度;


我要回帖

更多关于 css的padding是什么意思 的文章