这几天闲着没事,打算利用闲杂时间把b/s端的开发学习学习, 方便我这个写c/s后台的程序员, 了解下b端, 顺便做几个相关的demo, 为自由创业打一打基础。(毕竟通过b/s创业可以拉低很多成本)

b端的后台偶尔接触过一些,但前端ui那一套没了解过。就趁着这次疫情的闲暇时间,补补知识盲区,先了解下这部分把。

经过几天调研,发现有个vue框架很火, 打算通过此入手, 学习应用下前端, 对于玩过c/c++选手来说玩js/ts这些也一个样,简单看了下就打算直接上手了哈哈。

这不, 刚上手的第一个问题就来了,html、css这些做ui拿来用的东西虽然很是无聊,不过既然打算尝试下b/s了,就把遇到的这些记录下吧。

为什么css一开始需要设定margin和padding为0?

在前端ui人员写HTML的时候，通常会在样式里先写上一些像html,body,#app(vue框架下)等标签,全局的一些样式。之所以有这样的习惯，主要是是因为以下几点：

  • 首先：浏览器兼容。做的网页是给用户看的，写ui的只负责把网页做出来，至于用户怎么使用，在哪种浏览器上使用就不是ui人员的事情了。但是不同的浏览器他们的margin又不尽相同，所以为了满足这种需求，ui人员一般都是为body设置他们的margin和padding为0px。
  • 其次,还有如下一些作用:
    • 1、默认的块元素有些会自带margin或者padding。
    • 2、body默认就会有8个像素margin，这样设定后可以清除body的margin。
    • 3、清除这些元素的默认margin和padding后我们自定义的css样式才不会有偏差。
    • 4、同时设置margin为0也有为了居中对其的目的。

什么时候用padding?什么时候使用margin?

原文链接: https://www.jianshu.com/p/eda31e6facf4

背景介绍

margin和padding是盒子模型的两个重要概念，这两个属性在进行页面布局的时候有很重要的作用。要理解padding 和 margin ，首先要从盒子模型开始。

盒子模型由块级元素构成，也可以说成一个 block 元素是一个盒子。一个盒子模型有五个属性：width、height、padding、border、margin。

组成盒子模型的块级元素由content(内容),padding(内边距), border(边框), margin(外边距)四个部分组成。 其中padding 是内边距，就是内容content 与边框之间的距离。padding与内容包含在border内，padding有和内容区相同的背景是色  margin 是外边距，是边框border与其他元素间的距离，margin没有背景色，是透明的。

padding和margin 和盒子模型的关系如图

知识剖析

语法结构

一、padding和margin的语法结构是一样的

  1. padding（margin）-left:10px; 左内边距

  2. padding（margin）-right:10px; 右内边距

  3. padding（margin）-top:10px; 上内边距

  4. padding（margin）-bottom:10px; 下内边距

  5. padding（margin）：10px; 四边统一内边距

  6. padding（margin）:10px 20px; 上下、左右内边距

  7. padding（margin）:10px 20px 30px; 上、左右、下内边距

  8. padding（margin）:10px 20px 30px 40px; 上、右、下、左内边距

padding和margin属性值有四个时,他们是按顺时针方向设置的，如图由top开始顺时针到right-bottom-left

二、可以取的值

  1. length 规定具体单位记的内边距长度

  2. % 基于父元素的宽度的内边距的长度

  3. auto 浏览器计算内边距

  4. inherit 规定应该从父元素继承内边距

三、浏览器兼容问题

  1. 所有浏览器都支持padding属性

  2. 任何版本IE都不支持属性值“inherit”

常见问题

1、在标准流中，margin会出现垂直外边距合并的情况，也就是俗称外边距塌陷。在非标准流中就不会出现这种情况。margin上下外边距合并的情况一般只发生在普通文档流中，margin外边距应用于文本段落的上下排列可以使段落上下间距一致，不然就会出现双倍外边距的现象，可能是因为这个意义，使得一些浏览器默认在标注流中合并垂直外边距。常规流向中两个或多个块框相邻的垂直边距重合的结果是边距宽度取相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。 浮动元素和其它元素之间的垂直边距不重合，绝对定位的框”与“相对定位的框”边距不重合，inline与inline-block元素也不会重合。

2、如果父级元素没有边框border，则子容器的margin是相对于标注流body产生的，父级容器会跟着子容器掉下来。也就是说，本来给子容器设置的margin 会传递到父元素上。

3、padding和margin的百分比是相对于父元素而言的。而应用这个属性，可以在固定比例布局中使用百分比的padding，就可以实现等比例缩放，这对于自适应布局很有效果。

4、margin有负值，基于这个属性可以做出很多有意思的布局效果，比较有名的就是“双飞翼布局”，布局三个浮动的元素，使用负值margin将被挤下去的元素拉回到原来的位置。(使用display:flex可以更容易实现)

5、margin的负值还有很多特点：margin负值会与其他元素重叠，当两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容。当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容。当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素。