定位
- 为什么需要定位 > 定位可以让盒子在指定盒子内自由移动位置，并压住其他盒子，而浮动只能让盒子排在一行；
- 定位的组成 >定位是定位模式 边偏移 > 定位模式用于指定一个元素在文档中的定位方式，使用CSS属性 position；值包括static、relative，absolute,fixed
代码语言：txt
复制> 边偏移决定了改元素的最终位置；CSS中有top left right bottom四个属性；配合定位属性position使用
代码语言：txt
复制- 静态定位static
代码语言：txt
复制 > 是元素的默认定位方式，按照标准流特性摆放位置，没有偏移
代码语言：txt
复制- 相对定位relative
代码语言：txt
复制 >元素在移动时会以自己原来的位置移动； 原来在标准流中的位置还保留,后面的盒子以标准流对待它(不脱标)
代码语言：txt
复制- 绝对定位absolute
代码语言：txt
复制 > 绝对定位是元素在移动位置的时候，是相对于它祖先元素移动；
> 如果没有祖先元素或祖先元素没有定位，则以浏览器为准对齐
> 如果祖先元素有定位，则以最近一级有定位的祖先元素为准移动位置；
> 觉得定位不占用原来标准流的位置，即脱标
代码语言：txt
复制- **子绝父相**：
代码语言：txt
复制 >子元素是绝对定位， 父元素则需要是相对定位，因为相对定位会保留位置，而绝对定位不保留位置；
代码语言：txt
复制- 固定定位fixed
代码语言：txt
复制 > 以浏览器的可视窗口为准移动元素
> 与父元素没有任何关系
> 不随着滚动条的滚动而滚动
> 不占用标准流的位置，是一种特殊的绝对定位
代码语言：txt
复制- 粘性定位 sticky
> 粘性定位可以被认为是相对定位和固定定位的混合
代码语言：txt
复制 > 已可视窗口为参考点
> 占有标准流位置
> 必须要有left，top right bottom中的一个属性
代码语言：txt
复制- 定位总结；
代码语言：txt
复制- 定位布局的叠放顺序属性 z-index
代码语言：txt
复制 >默认值auto,属性为数字，可以有负值，但没有单位
代码语言：txt
复制 >当都没有z-index属性，按照属性叠放,后来居上
代码语言：txt
复制- 绝对定位盒子居中：
> left和top 设置 父元素宽度50%
代码语言：txt
复制 > margin-left和margin-top设置自身元素宽度的一半
代码语言：txt
复制- 定位的特殊特性
代码语言：txt
复制 > 行内元素添加定位，可以直接设置宽度和高度
> 块内元素添加定位，默认的是内容的高度和宽度
> 脱标的盒子不会触发外边距塌陷问题
代码语言：txt
复制- 浮动和定位的区别：
> 浮动会压住后面的盒子，不会压住盒子中的文字；(浮动最初的目的是为了做文字环绕效果的，文字会围绕着浮动元素)
代码语言：txt
复制> 绝对定位会压住标准流的盒子内容；
网页布局总结：
- 网页布局是通过标准流，浮动，定位一起完成的；
- 标准流可以让盒子上下或左右排列
- 浮动可以让多个块级元素一行显示或左右对齐盒子
- 定位有层级概念，可以让多个盒子前后叠压显示；
部分开发规范
CSS属性书写顺序
- 布局定位：display 等
- 自身属性：width,height 等
- 文本属性：color font text- 等
- 其他属性：css3属性等
在这里插入图片描述
布局整体思路
- 确定页面的版心（可视区）
- 分享行模块，以及行模块里的列模块；
- 一行中的列模块经常为浮动布局，先大小，后位置
- 先结构，后样式。
- 先布局，后代码。
html结构
- 导航栏的实际开发中，不会直接使用连接a,而是使用li包含链接的做法 > 直接使用a,搜索引擎会辨别为关键字堆砌，有降权的风险
