浅聊CSS的一些经验

一、css属性书写顺序:先布局定位属性->自身属性->文本属性->其他属性

1.布局定位属性

display float positive overflow

2.自身属性

width height margin padding border background

3.文本属性

font-family color text-align line-height

4.其他属性(css3)

box-shadow */

二、页面布局的整体思路

1.行模块 用标准流

2.列模块 用浮动

3.先有结构再有样式，结构永远最重要

三、定位

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

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

3.定位=定位模式+边偏移

4.定位模式：position:static(静态定位) relative(相对定位) absolute(绝对定位) fixed(固定模式)

5.边偏移的四个属性：top left right bottom

6.静态定位static：默认定位，无定位，按照标准流，没有边偏移，在布局中很少使用。

7.相对定位relative:(自恋型)，元素在移动时，相对于原来坐标位置，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他。最典型的应用是给绝对定位当爹的。

8.绝对定位absolute:元素在移动位置的，是相对于他的祖先元素。如果没有祖先元素或者祖先元素没有定位，则以浏览器为定位父级元素。

9.如果祖先元素有定位，以最近的祖先元素为定位参照。

10.固定定位fixed:相对于浏览器可视窗口，不占有位置，浏览器页面滚动的时候，不随浏览器的滚动而滚动。

11.粘性定位sticky:必须使用边偏移才会生效，同时占据位置，兼容性较差。

12.绝对定位的居中使用：left:50%+margin-left的方式进行，通过z-index控制绝对定位后盒子的叠放顺序。

13.浮动的元素不会压住标准流中的文字，绝对定位的元素会压住标准流中的文字

14.子绝父相：子元素为绝对定位，父元素为相对定位。

Tips:只有定位了的盒子才能使用top left right bottom四个属性，标准流和浮动不能使用

四、网页布局第一准则

先用标准流的父元素排列上下位置，内部元素通过浮动进行排列，父元素管上下，子元素管左右。

五、元素的隐藏

1.display:none/block,none时消失，不占有原来的位置

2.visibility:visible/hidden,占据位置

3.overflow:auto(自动，在需要的x或者y轴加滑动块)/visible(默认)/scroll(x,y轴都显示)