定位
1
2
3
4
5
6
7
8
9
10
11
12
13
| 定位=定位模式+边偏移
position: { static} {relative} {absolute} {fixed}
strtic // 静态定位
relative // 相对定位（相对于原来的位置来说的）保留位置一般给绝对定位当爹
absoiute //绝对定位（相对于他的祖先元素） 不占有原来位置 脱标
如果祖先元素或者是祖先元素没有定位，以浏览器为准
如果祖先定有位，则以最近一级有定位祖先元素参考
父亲需要占有位置使用相对定位儿子不占用位置用绝对 （子绝父相）
fixed //固定定位（浏览器可视窗口定位）
固定版心位置 先固定版心中间 left：50% 然后让固定盒子margin 左或右 设置版心宽度一半
sticky //粘性定位 （浏览器可视窗口定位） 占有位置必须添加一个偏移
z-index // 定位叠放次序
|
显示隐藏
1
2
3
4
5
6
7
8
9
| dispaly ：none (block 显示) 不占有原来位置 //隐藏对象
visibility ：（visible 可视） （hidden 隐藏） 占有原来位置 //可见性
overflow （定位慎用）
visible 不剪切也不加滚动条
hidden 不显示超出 超出隐藏
scroll 不管内容是否超出，总是加滚动条
auto 超出自动显示滚动条
|
CSS常用高级知识点
1. 精灵图
作用:精灵图一般设置固定背景小图片减少服务器传输
使用方法:background-position ：x y； 来实现显示设置的是图片移动； 一般都为负值
1
2
3
4
| https://www.iconfont.cn/ 国内网站 (阿里巴巴)
使用方法：先将fonts放入根目录中 再css中声明
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
字体图标追加 先点击左上角 imp 选择selection.json再选择新图标
|
3. 文字溢出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 单行 想要强制一行显示文本(盒子必须要有宽度)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
多行
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
取消网页的双击被选中使用css加入body内
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
|
4. 布局技巧
1.盒子操作
1
2
3
4
5
6
7
| margin 负值消除浮动盒子边框叠加 细线边框
要使鼠标经细线边框改变颜色 当没有定位是添加相对定位
如果有定位用z-index加大层级
文字浮动图片效果时只需要给图片加上浮动浮动不会压住文字
三角形妙用设置大一点高度直角三角形
左下边框宽度设置为0吧上边框宽度调大
每个网页都要进行初始化
|
2.过渡属性
1
2
| transition:要过渡属性（all） 花费时间 运动曲线 何时开始 //过渡
如果要写多个属性可写逗号 一般多个属性都要变化一般使用all
|
3.鼠标样式
1
2
3
4
| cursor: defautl 默认 //鼠标样式
(pointer 变手 move 移动 text文本 not-allowed 禁止)
outline:none //取消表单 文本域轮廓线
resize:none //防止文本域拖拽
|
4.文字图片居中
1
2
3
| 使用vertical-align:middle可以让行级元素垂直居中，但这个居中是以文字的中线来计算的，
而文字的中线在不同的字体上不同，甚至相同的字体在不同的浏览器上显示的都不同。
所以直接使用vertical-align:middle很难完美居中，因此需要其它调整。
|
5.css三角做法
1
2
3
| css三角形做法 先设置盒子高宽为零设置边框实线透明色然后再设置想要那一边的角
border：50px solid transparent
border-（上下左右）颜色
|
