细节

1.静态页面：

①居中：

居中对齐	方法
先找版心	①先给盒子设置宽高(margin：0 auto；）才会起效 不可直接100%
margin:0 auto	加在父盒子身上，对浮动元素没用
text-align	行内元素或行内块元素居中对齐
vertical-align	垂直居中，一般和line-height=父级盒子高度 搭配使用

②浮动脱标状态需要清除浮动，子盒子才可撑起父盒子高度 。行内元素浮动后可以直接设置宽高

③padding在块元素没有指定width时不会撑开盒子
box-sizing：box-size 自动内减（内边距和边框）

2.定位：

♥脱标：①可以直接定义宽高②如果没有宽高，由内容撑开③margin的auto对于脱标元素（加了绝对定位的盒子）无效
♥z-index只有定位时能用提高层级

定位模式	是否脱标	移动位置	是否常用
static 静态	否	不能使用边偏移	很少
relative 相对	否	相对于自身位置移动	常用
absolute 绝对	是	带有定位的父级盒子	常用
fixed 固定	是	浏览器可视区	常用
sticky 粘性	否	浏览器可视区	当前阶段少

定位的特殊特性

绝对定位、固定定位也和浮动类似。（可以出现相对定位和浮动，不会出现绝对定位和浮动，浮动会失效）

1. 行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对定位或固定定位，如果不指定width/height，默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位、固定定位的元素都不会触发外边距合并的问题。

绝对定位、固定定位会完全压住盒子

• 浮动元素只会压住它下面标准流的盒子，但是不会压住它下面标准流盒子里的文字/图片。（原因：浮动产生的最初目的是为了左文字环绕效果的，文字会围绕浮动元素。）
• 绝对定位、固定定位会压住它下面标准流里的所有内容

绝对定位的盒子居中

1，让绝对定位的盒子left: 50%，走到父级盒子的一半位置
2，让固定定位的盒子margin-left: 自身宽度的一半距离

精灵图主要针对小的背景图片，用background-position来定位

类型	模式	优点	缺点
精灵图（复杂图片用）	background-position(小的背景图片)		1，图片文件比较大2，图片本身放大和缩小会失真3，一旦图片制作完成想更换很复杂
字体图标iconfont(简单图标用)		1.灵活：本质是字体(color/size)2.兼容性强（任意浏览器)不失真3.轻量级：字体图标比图像要小，一旦加载马上渲染减少服务器请求

3. 注意

①行内块元素中间有缝隙

• 底边栏好做： 行内块元素（本身有间隙不用加margin）+text-align：center=居中

将标签全部一行排列/font size：0（同时要去设置具体字体大小）/
行内块元素联动性较强，中间块字体变化会牵扯两边（文字底部对齐），面对复杂布局避免使用，尽量用浮动（文字上部对其）

②解决图片底部默认空白缝隙

1，给图片加vertical-align:top/middle/bottom不设置baseline 属性（提倡）
2.把图片转换为块级元素 display:block;

③margin负值运用：

1，margin往左侧移动-1px可压住相邻盒子边框

2，鼠标经过某个盒子时，提高当前盒子层级（如果没有定位，加相对定位保留位置，如果有定位，加z-index）

④box-sizing：border-box(自动内减内边距边框)

没有给盒子宽度时，padding不会撑开盒子

⑤语义化

土豆案例经过video时遮盖罩出现
.video:hover .mask {
display：block；
}

广告：banner	导航：nav
栏目：column	登录条：loginbar
滚动：scroll	整体布局：wrapper
广告：banner	侧栏：sidebar