CSS之margin padding，相对定位了解

目的

主要是为了了解CSS布局，方便布局。因为Qt qss与之差不多，方便qt 采用qss布局，设计美观界面。
这三个属性， 我们在qt设置样式qss文件中， 经常用到， 所以特此梳理总结一波， 不是很详细， 望谅解。

margin: 设置四个方向的外边距， 模块与模块之间距离， 为负数就是靠近， 正数就是远离.
padding: 设置四个方向的内边距， （填充）属性定义元素边框与元素内容之间的空间.
border: 设置四个方向的边框， 处于margin 与 padding 之间.

盒子模型

首先了解box盒模型，我觉得这张图片很形象生动，参考如图

同时注意设置顺序时上右下左。

css 中margin padding

博客1
博客2

css相对定位

参考博客1
参考博客2

CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删 除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该 元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序 。
那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）

fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

qt 中 margin border padding

qt中这三个，以盒子模型为参考。QWidget 设置如下

QToolButton{    
    border: 10px solid green; 
	padding:10px;
/*
	margin: 0px solid yellow;*/
	qproperty-icon: url(":/btn_pc_dis.png");
    qproperty-iconSize: 22px 22px;
    background-color: yellow
} 

内容里面填充的是icon, 文字等信息， background-color是指border 以内的所有内容背景色（包含padding).

1. 无margin时, QWidget 此时最外层就只有border. 此时两控件挨着

2. 设置margin 10px

QToolButton{    
    border: 10px solid green;  //只有border 设置才有效
	padding:10px;  颜色 样式款式设置没啥用
	margin: 10px;  //颜色 样式款式设置没啥用
	qproperty-icon: url(":/btn_pc_dis.png");
    qproperty-iconSize: 22px 22px;
    background-color: yellow
} 

ui上给人的感觉就是 内缩了

3. 设置margin -10px

QToolButton{    
    border: 10px solid green; 
	padding:10px;
	margin: -10px;
	qproperty-icon: url(":/btn_pc_dis.png");
    qproperty-iconSize: 22px 22px;
    background-color: yellow
} 

4. 设置padding -40px;

QToolButton{    
    border: 10px solid green; 
	padding:-40px;
	qproperty-icon: url(":/btn_pc_dis.png");
    qproperty-iconSize: 22px 22px;
    background-color: yellow
} 

5. 设置padding 60px;

QToolButton{    
    border: 10px solid green; 
	padding:60px;
	qproperty-icon: url(":/btn_pc_dis.png");
    qproperty-iconSize: 22px 22px;
    background-color: yellow
} 

6. 设置border: 0px;

QToolButton{    
	qproperty-icon: url(":/btn_pc_dis.png");
    qproperty-iconSize: 22px 22px;
    background-color: yellow
}