CSS 定位相关知识

CSS属性书写顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break
4. 其他属性：content / cursor /border-radius / box-shadow / text-shadow …

学成在线案例

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含的做法

无序列表dl dt dd

写了2个晚上终于把这个写完了

定位

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

定位=定位模式+边偏移

定位模式

通过CSS中的position值来设定

边偏移

相对定位

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

选择器{position：relative；}

绝对定位

在移动的时候，相对于它的祖先元素来说的

选择器{position：absolute；}

三个特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2. 如果祖先元素有定位，则以最近一级有定位祖先元素为参考点移动位置
3. 绝对定位不占有原先的位置

子绝父相

父元素加相对定位，子元素加绝对定位

父盒子不加定位的话，子元素的定位将由浏览器的页面为准

固定定位

固定在浏览器的可视区域，与父元素无关

position:fixed;

固定到版心

1. 贴版心右侧：先left:50%;，再让固定定位的盒子margin-left:版心宽度的一半；

粘性定位

滑到某个位置时，盒子固定

position:sticky;
top:10px;

特点：

1. 以浏览器可视窗口为参照点移动元素

2. 粘性定位占有原先的位置

3. 必须加一个边偏移才能有效

定位叠放次序

通过z-index的值来确定哪个靠上面

数值越大，盒子越靠上，可正可负

{z-index:2;}

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin来居中

水平

1. 先走父元素宽度的一半
2. 在往左走定位盒子的宽度的一半

垂直

1. 高度的一半
2. 往下走盒子高度的一半

扩展

特性

1. 行内元素加绝对或者固定定位，可直接设置高度和宽度
2. 块级元素加绝对或固定定位，如果不给宽高，默认大小是内容的大小
3. 浮动元素不会压住标准流的文字，绝对定位会压住所有内容