1、网页小图标
图片转换favicon网址
http://www.bitbug.net/
相关格式
<link rel="icon" type="images/x-icon" href="images/bitbug_favicon.ico">
2、单行文本溢出隐藏
设置内容单行文本溢出隐藏4步
第一步:设置显示范围(width)
第二步:设置内容强制不换行(white-space:nowrap)
第三步:设置超出的内容隐藏(overflow:hidden)
第四步:隐藏的内容转换成省略号(text-overflow:ellipsis)
设置空白空间
white-space:
normal 自动换行,多个空格只识别一个(默认值)
nowrap 强制不换行,多个空格只识别一个
pre 强制不换行,识别换行和空格
pre-line 自动换行,只识别换行不识别空格
pre-wrap 自动换行,换行空格都识别
设置元素超出
overflow:
visible (默认值)
hidden (超出隐藏)
auto (超出才显示滚动条)
scroll (内容是否超出都有滚动条组件)
overflow-x:auto(默认值)
overflow-y:auto(默认值)
设置隐藏的内容
text-overflow
clip 裁剪隐藏的内容
ellipsis 隐藏的内容转换省略号显示
https://www.html.cn/archives/5206/
设置内容多行文本溢出隐藏4步
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; 用来限制在一个块元素显示的文本的行数
overflow: hidden;
3、定位:(相对定位、绝对定位、固定定位、粘性定位、)取消定位
定位元素可以触发5个属性
4个方向:left、right、top、bottom
1个层级关系:z-index:1(可以设置负数,但是必须是整数)
普通元素:0
先定位元素:0.1
后定位元素:0.2
相对定位
position:relative;
1、元素设置相对定位后是占位的
2、相对定位的位置移动是相对于原位置移动
绝对定位
position:absolute
1、绝对定位的元素脱离文档流,不占位
2、绝对定位的元素位置移动先找最近的有定位属性的父元素,如果没有定位父元素,就以浏览器窗口位位置移动的参照物(包含块:就是绝对定位位置移动的参照物)
固定定位
position:fixed
1、固定定位的元素不占位
2、固定定位的位置移动,是始终以浏览器窗口的可视区为位置移动的参照物
粘性定位
position:sticky
算是相对定位和固定定位的结合体,如果粘性定位不设置位置方向,就是一个普通的元素,如果设置位置方向,滚动条划过内容,位置方向才有效果
注意点:
1:需要设置位置方向
2:父元素不能设置overflow:hidden
position:
static 取消定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位(一般情况下,内容占位,当滚动条滑过粘性定位的元素后,跟固定定位效果等同)
inherit 继承父元素position的属性值
设置内容在浏览器可视区水平垂直居中
第一种方法
position:fixed
left:50%
top:50%
margin-left:-(自身宽度的一半)
margin-top:-(自身高度的一半)
第二种方法
position:fixed
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin:auto;