CSS学习5（属性书写顺序、定位）

1、CSS属性书写顺序

1、布局定位属性：display / position / float / clear / visibility / overflow

2、自身属性：width / height / margin / padding / border / background

3、文本属性： color / font / text-decoration / text-align / white-space / break-word

4、其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

一般导航栏不会直接用链接 a 而是用 li 包含链接 a 的做法。

2、定位

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移决定了该元素的最终位置。

2.1 定位模式

定位模式决定元素的定位方式，他通过CSS的 position属性 来设置，值有以下四个：

static      静态定位
relative    相对定位
absolute    绝对定位
fixed       固定定位

2.1.1 静态定位（static）

静态定位是元素的默认定位方式，无定位的意思。

静态定位是按照标准流的特性摆放位置，他没有边偏移。

2.1.2 相对定位（relative）

相对位置就是元素在移动位置的时候，是相对于它原来的位置移动的。

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不会脱标，继续保留原来位置）

2.1.3 绝对定位（absolute）

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的 。

1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准定位。

2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参照点移动位置。

3、绝对定位不再占有原先的位置（脱标）。

21.4 注意点

1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子。

2、父盒子需要加定位限制子盒子在父盒子内显示。

3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。

口诀：子绝父相。（只是用的比较多）

2.1.5 固定定位（fixed）

 固定定位是元素固定于浏览器中可视区的位置，可以在浏览器页面滚动时元素的位置不会被改变。

1、以浏览器的可视窗口为参照点进行移动的。

小技巧：固定在版心右侧的位置

1、浏览器宽度的一半。

2、利用margin，放到版心盒子宽度的一半。

2.1.6 粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合。

1、以浏览器的可是窗口为参照点移动元素。（固定定位的特点）

2、粘性定位占有原先的位置（相对定位的特点）

3、必须添加top、left、right、bottom其中一个才会有效。

4、sticky并不常用，因为兼容性差，IE不支持。

例如写成 top: 0;意思是当top移动到0的时候，就不会移动了，变成固定定位了。

 

2.2 边偏移

边偏移就是定位的盒子移动到最终位置。有 top、 bottom 、 left 和 right 四个属性。

 

2.3 定位的叠放次序 z-index

z-index可以用来控制盒子的前后次序（z轴的），属性值：正整数、负整数、0、auto（默认），规则：数值越大，盒子就越靠上。如果属性值相同，则按照书写顺序靠后的靠上。

注意：

1、数字后面不加单位。    2、只有定位的盒子有z-index属性。

 

2.4 拓展

加了绝对定位的盒子不能通过margin: 0 auto; 来进行水平居中的。

• 水平居中做法：

1、先让其走到浏览器宽度的一半。

2、通过margin赋值， -  盒子宽度的一半。

• 垂直居中做法：

1、先让其走到浏览器高度的一半。

2、通过margin赋值， -  盒子的高度的一半。

 50%

绝对定位和固定定位和浮动类似，有以下的特殊特性

1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2、块级元素添加绝对或者固定定位，如果没设置高度或者是宽度，默认大小是内容大小。

3、脱标的盒子是不会触发外边距塌陷的情况的，浮动元素、固定定位、绝对定位不会触发外边距合并问题。

4、绝对定位/固定定位会完全压住盒子，但是浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。因此，浮动可以用于实现文字环绕效果，文字围绕着浮动元素。