CSS学习笔记（五）

一.CSS属性书写顺序

布局定位属性->自身属性->文本属性->其他属性

二.页面布局整体思路

1.必须确定页面的版心（可视区），测量得知；
2.分析页面中的行模块，以及每个行模块中的列模块；（页面布局第一准则）
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置；（页面布局第二准则）
4.制作HTML结构，遵循先有结构，后有样式的原则。结构永远最重要；
5.先理清布局结构再写代码；

三.定位

1.为什么需要定位
标准流和浮动都无法实现的功能用定位实现。定位可以让盒子自由地在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子

2.定位组成
定位：将盒子定在某一位置
定位 = 定位模式 + 边偏移
（1）定位模式
属性position：static（静态定位） | relative（相对定位）| absolute（绝对定位）| fixed（固定定位）
（2）边偏移
属性：top、bottom、left、right

3.静态定位
元素默认定位方式：
语法格式：选择器{ position:static;}
静态定位按照标准流摆放位置，没有边偏移，很少使用

4.相对定位
相对定位是元素在移动位置时，是相对于它原来的位置来说的
语法格式：选择器{ position:relative;}
注意：它是按照自己原来的位置移动的；
原来在标准流中的位置仍然保留（不脱标）；

5.绝对定位
绝对定位是元素在移动位置时，是相对它的祖先元素的
语法格式：选择器{ position:absolute;}
注意：如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位；
如果祖先元素有定位（相对、绝对、固定定位）时，则以最近一级的有定位的祖先元素为参考点移动位置；
绝对定位不再占有原来的位置（脱标）；

6.子绝父相的由来
子级是绝对定位的话，父级要用相对定位
（1）子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子；
（2）父盒子需要加定位限制子盒子在父盒子中的移动；
（3）父盒子布局时，需要占有位置，需要使用相对定位；
（4）子绝父相不是绝对不变的，只是比较常用；

7.固定定位
固定定位是元素固定于浏览器可视区的位置，在浏览器页面用滚轮移动时元素位置不会改变
语法格式：选择器{ position:fixed;}
注意：以浏览器的可视窗口作为参照点移动元素；
跟父元素没有关系；
不随滚动轮滚动；
固定定位不再占有原先的位置（脱标）；
小技巧：固定在版心右侧位置
①让固定定位的盒子left：50%，走到浏览器可视区的一半位置
②让固定定位的盒子margin-left：版心宽度的一半距离，多走版心的一半

8.粘性定位（了解）
相对定位和固定定位的混合
语法格式：选择器{ position:sticky; top:10px;}
注意：以浏览器的可视窗口作为参照点移动元素；
占有原先的位置（不脱标）；
必须添加top、left、right、bottom其中一个才有效；
兼容性较差；

9.定位的叠放次序
语法格式：选择器 {z-index：1；}
注意：数值可以时正整数，负整数和0，默认为auto，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位；
只有定位的盒子才有z-index属性

10.定位的拓展
（1）绝对定位的盒子的居中算法
加了绝对定位的盒子不能通过margin： 0 auto水平居中
①让固定定位的盒子left：50%，走到浏览器可视区的一半位置
②让固定定位的盒子margin-left：自身宽度的一半距离，让盒子向左移动自身宽度的一半
（2）定位特殊特性
绝对定位和固定定位也和浮动类似。
①行内元素添加绝对定位和固定定位，可以直接设置宽度和高度；
②块级元素添加绝对定位和固定定位，如果不给宽度和高度，默认大小是内容的大小；
（3）脱标的盒子不会触发外边距塌陷
（4）绝对定位会完全压住盒子
浮动的元素不会压住下面标准流盒子的文字（图片）；
绝对定位会压住下面标准流所有的内容；
浮动最初的目的是用来做文字环绕；

四.元素的显示和隐藏

本质：让一个页面在页面中隐藏或显示出来

1.display属性
隐藏对象：dispaly：none;
除了转换为块级元素，还有显示元素的意思：display：block;
注意：display隐藏元素后，不再保留原来的位置

2.visibility可见性
元素可视：visibility：visible；
元素隐藏：visibility：hidden；
注意：visibility隐藏元素后，继续保留原来的位置

3.overflow溢出
overflow属性指定了如果内容溢出一个元素的框时，会发生什么
显示溢出部分：overflow：visible；（默认）
隐藏溢出部分：overflow：hidden；
溢出、不溢出时候都显示滚动条：overflow：scroll；
只溢出的时候显示滚动条：overflow：auto；
注意：如果有定位的盒子，谨慎使用overflow：hidden；，因为它总会隐藏溢出的部分