day09

1 margin的塌陷

第一个元素的margin-top与最后一个子元素的margin-bottom会传递给父元素

解决办法：

• 1给父元素添加overflow:hiddden属性
• 2 给父元素添加border
• 3 给父元素添加padding
• 4 给父元素添加 float
• 5 给元素本身添加float
• 6 给元素本身添加display：inline-block
• 7 不让他是第一个元素或者最后一个元素

2 overflow:

over-x 水平方向

over-y 垂直方向

hidden 溢出隐藏，溢出的内容不可见

scroll：以滚动条形式显示，无论是否存在溢出都会显示滚动条的区域，溢出内容可见

auto：自动，内容存在溢显示滚动条（哪个方向存在溢出就显示哪个方向的滚动条），不存在溢出不显示滚动条

3 空白空间 white-space

pre 将所有的回车、换行、缩进、空格都解析出来，内容遇到边界不会换行，遇到br换行

pre-wrap 将所有的回车、换行、缩进、空格都解析出来，内容遇到边界会换行

pre-line 只解析回车换行，内容遇到边界换行

nowrap 内容遇到边界不会换行，遇到br换行，强制在一排显示

4 截字 （单行文本溢出显示省略号）

text-overflow: clip 裁切 ellipsis 省略号

必要条件：

• 1 有一定的宽度
• 2 强制在一排显示
• 3 溢出裁切 overflow:hidden
• 4 显示省略号 text- overflow:ellipsis

5 ps操作

取色：调出拾色器面板---点击颜色

测量：直接框选出来 w宽度 h高度

ctrl+r 调出标尺，在标尺中右击，将单位改成像素

缩放：图片放大测量才会更精准

文字大小和行高的测量：

文字大小：测量文字的高度

文字行高：测量一行文字的开头到下一行文字的开头

截图

• 1 选框工具选中，ctrl+c复制--ctrl+n新建---ctrl+v粘贴--ctrl+shift+alt+s 存储为web所用格式（只能单张截图，不会破坏原图）
• 2 裁切工具框选出来--ctrl+shift+alt+s 存储为web所用格式（只能单张截图，会破坏原图）
• 3 使用切片工具，可以批量截图
• 用切片工具将需要的图片一个个框选出来，--ctrl+shift+alt+s 存储为web所用格式，点击存储（注意：选择所有用户切片），可以右击编辑切片，给切片重新命名

6 安全区（版心区）

页面区域的最大宽度是安全区的宽度