css day 3

1、合子居中

text-align: center;  盒子内容（文字 行内元素 行内块元素）居中对齐 

（1）margin： 0 auto;   （上下是0，左右auto 自动水平居中）

（2）margin-left： auto；  （使左侧充满，盒子在右边）

margin-right： auto；  （使右侧充满，盒子在左边）

（3）margin： auto；  （盒子居中）

（1）=（2）=（3）

2、清除内外边距

* {

    margin： 0；

    padding： 0；

}

3、外边距合并

两个盒子距离以最大为准

嵌套元素垂直外边距合并塌陷问题解决（给父盒子加外边框   用padding隔开   overflow： hidden；）

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

4、盒子圆角

border-radius： 50%；让一个正方形变成圆圈

border-radius： 10px 0；（左上右下 右上左下）

border-radius：1px 2px 3px 4px；（左上开始顺时针）

5、盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 inset（影子变为内部）

6、浮动

标准流 行内元素按顺序排列

浮动 使多个盒子在一行显示，之间没有缝隙，方便布局（float： left/right；）

浮动模式转换 可以让元素默认转换为行内块 

7、版心和布局流程

确认版心  分析行块

8、ps

显示隐藏标尺 ctrl+r 右击标尺一律改成像素

ctrl+d 取消选取

切片 文件 导出为web  文件类型 所选切片（视图 清除切片）

文字 左边工具栏T

左边工具栏第一个选定图片 点击图层 新建基于涂层的切片

9、高度剩余法

切片量文本到下一行顶点的高度