入门级 HTML5+CSS3学习笔记（三）

一、CSS属性书写顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

 .jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
 } 

二、定位(position)

1）.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

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

1. 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

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

2. 边偏移（方位名词）

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

3. 定位模式 (position)：position: 属性值;

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

三、定位模式

1. 静态定位(static)：position: static;
   静态定位 按照标准流特性摆放位置，它没有边偏移，几乎不用。

2. 相对定位(relative) ：position: relative;

• 是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。最典型的应用为绝对定位当父盒子。

3. 绝对定位(absolute)：position: absolute;

• 完全脱标 —— 完全不占位置；
• 父元素没有定位，则以浏览器为准定位（Document 文档）。

• 父元素要有定位，元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的总结：

1）. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

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

3.） 绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

4. 固定定位(fixed) ：position: fixed;

固定定位的特点：：

• 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系不随滚动条滚动。
• 固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
• 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；跟父元素没有任何关系；单独使用的，不随滚动条滚动。

固定在版心左侧位置：

• 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。
• 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
  

5. 粘性定位(sticky) ：position: sticky; top: 10px;

特点：

1).以浏览器的可视窗口为参照点移动元素（固定定位特点）

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

3).必须添加 top 、left、right、bottom 其中一个才有效跟页面滚动搭配使用。 兼容性较差，IE 不支持。

定位总结：

注意：
1）. 边偏移需要和定位模式联合使用，单独使用无效；
2）. top 和 bottom 不要同时使用；
3）. left 和 right 不要同时使用。

6. 堆叠顺序（z-index）：z-index: 1;
   在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

1）. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2）. 如果属性值相同，则按照书写顺序，后来居上；
3）. 数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

四、网页布局总结

1. 标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2. 浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3. 定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

五、元素的显示与隐藏

1. display 显示

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

2. visibility 可见性

visibility：visible ; 　元素可视

visibility：hidden; 　  元素隐藏

3. overflow 溢出：overflow:hidden

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
• 但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。

4. 总结