单行文本溢出隐藏
1.设置范围(设置宽度)
2.内容强制不换行 white-space:nowrap;
3.超出的内容隐藏 overflow: hidden
4.把隐藏的内容设置为省略号text-overflow:ellipsis
设置内容空白空间的处理
white-space
normal: ,默认值,浏览器默认效果(自动换行,空格只能识别一个)
pre 强制不换行,多个空格可以识别
nowrap 强制不换行,多个空格只能识别一个
pre-wrap 自动换行,多个空格可以识别
pre-line与normal一样(自动换行,空格只能识别一个,但是可以识别换行)
元素溢出内容设置
overflow
visible 默认值
hidden 溢出隐藏
auto 溢出内容转换滚动条(只有超出才有滚动条)
scroll 溢出内容转换滚动条(内容不超出也有滚动条组件)
延伸:overflow-x和overflow-y
如果设置overflow-x和overflow-y(默认值是auto)
overflow-x:hidden
x轴隐藏,Y轴默认是auto的效果
text-overflow 设置隐藏的内容
clip 裁剪隐藏的内容 默认值
ellipsis 设置隐藏的内容为省略号
--------------------------------------------------------------------
多行文本溢出隐藏（兼容性不好，使用不灵活，拓展，试效果用谷歌浏览器打开）
pc 一般不会使用，兼容性不好，可能会移动端使用（移动端的浏览器一般都是最新版本的）
display:-webkit-box 必用属性，将内容作为弹性盒模型显示
-webkit-box-orient:verticle 必用属性，设置盒子的排列方式
-webkit-line-ciamp:3; 显示的行数
overflow:hidden;
-webkit-box-orient:verticle 必用属性，设置盒子的排列方式
-webkit-line-ciamp:3; 显示的行数
overflow:hidden;
--------------------------------------------------------------------
定位
定位一共有4种
定位的属性是position
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
static 取消定位
inherit 集成父元素的position值
定位元素可以出发5个属性
4个方向:left,right,top,bottom
1个层级关系:z-index
z-index设置内容层级关系,值越大,层级就越高,z-index只能设置整数
1.相对定位
position:relative
1.相对定位可以使用触发的5个属性
2.相对定位是在自己的原位置上移动
3.相对定位的元素是占位的,没有脱离文档流
2.绝对定位
position:absolute
1.绝对定位可以使用触发的五个属性
2.首先先找定位父元素为参照物移动,没有就以浏览器窗口为参照物位置移动
(一般使用
父元素 相对定位(设置参照物)
子元素 绝对定位
)
决定定位的元素脱离文档流(绝对定位的元素不占位)
3.固定定位
position:fixed
1.固定定位可以使用触发的5个属性
2.固定定位始终以浏览器窗口为位置移动的参照物
3.固定定位脱离文档流(固定定位的元素不占位)
锚点:网页的内部跳转(只能用id设置)
<a href="#box1"></a>
<div id="box1"></div>
设置内容固定在网页水平垂直居中
第一种方法
position:fixed
left:50%
top:50%
margin-left:-(本身宽度的一半)
margin-top:-(本身高度的一半)
第二种方法
position:fixed
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
中心放大:
中心放大的公式
左边移动的距离= - (放大后的宽度-放大前的宽度)/2
上边移动的距离= - (放大后的高度-放大前的高度)/2