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,设置全屏页面
- 给自己设置100%高
- 给body设置100%高
- 给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. 内联元素设置浮动后,会变成块级元素,拥有块级元素的特点