day10-李大人part1

day10

浏览器长截图

更多工具—>开发者工具—>控制台—>ctrl+shift+p—>搜素capture full size screen shot，即可自动保存在本地存储

ps切图

切片工具—>鼠标左键—>ctrl+shift+alt+s—>png24—>存储—>所有用户切片

一·溢出属性：

1.1，属性

overflow （overflow-x/overflow-y）：

• —hidden：溢出隐藏
• —visiable：溢出正常显示
• —scroll：溢出显示滚动条
• —auto：溢出时候出现滚动条，没有溢出的时候不加滚动条

1.2，单行文本溢出

单行文本溢出显示省略号
    1. 设置宽度
    2. 设置不换行 white-space: nowrap;
    3. 设置溢出隐藏 overflow:hidden
    4. 设置文本溢出显示省略号 text-overflow: ellipsis;

二：宽高自适应

2·1，宽度不设置

​ （参考父元素的宽）

2·2，宽度设置百分比%

​ （参考父元素的宽）

2·3，宽度自适应范围（响应式布局）

​ 最大宽大max-width：数值+px

​ 最小宽度 min-width：数值+px

三：浮动对宽度自适应的影响**

3·1，元素不设置宽,

   设置浮动后,宽度自适应失效,宽度由内容撑开

3·2，元素设置margin:auto

   再设置浮动后,margin:auto会失效

3·3 ，给内联元素设置浮动后,

   会变成块级元素,拥有块级元素的特点

四：高度自适应

4·1，高度不设置或者auto

​ （由内容撑开）

4·2，高度设置百分比%

​ （参考父元素的高）

4·3，高度自适应范围（响应式布局）

• 最大高度max-height：数值+px

（高度自适应,内容可以无限多 撑开高度 但是不能高于某个值 ）

• 最小高度 min-height：数值+px

（ 高度自适应,内容可以无限少 撑开高度 但是不能低于某个值 ）

4·4，设置全屏页面

1. 给自己设置100%高
2. 给body设置100%高
3. 给html设置100%高

五：定位position

5·1：默认值

• static；静态（默认值，相当于没有定位）

5·2：相对定位

属性：

• -relative 相对定位

  1.参照物：自己本身

  2.移动：left、right，top，bottom: 数值+px

  产生距离是正数 交叉是负数

特点：

 1. 移动之后依旧占位置（例如座位）
 2. 不脱离文档流

5.3：绝对定位

属性：

• absolute 绝对

  1.参照物：有定位属性的祖先元素（一般情况下设置为相对定位）

  2.移动：left、right，top，bottom: 数值+px

  3.一般情况下，给元素设置绝对定位，就要给祖先元素设置相对定位

• 元素会从里到外找有定位属性的祖先元素，谁有定位属性，就参考谁，

• 如果找到body之后依然没有找到的话.参考的就是浏览器窗口,

• 如果祖先都有定位属性的话,谁离该元素近就参考谁

特点：

1. 元素会脱离文档流, 也会遮挡住后面的文字
2. 元素不设置宽,设置绝对定位后,脱离文档流,宽度自适应失效,宽度由内容撑	开
3. 元素设置margin:auto;再绝对定位后,脱离文档流,margin:auto会失效
4. 内联元素设置浮动后,会变成块级元素,拥有块级元素的特点

5.4：固定定位

5.5：粘性定位

,脱离文档流,宽度自适应失效,宽度由内容撑 开
3. 元素设置margin:auto;再绝对定位后,脱离文档流,margin:auto会失效
4. 内联元素设置浮动后,会变成块级元素,拥有块级元素的特点

5.4：固定定位

5.5：粘性定位