20231010-学习笔记

定位

定位 = 定位模式 + 边偏移

定位模式position：
static：静态定位，没有边偏移
relative：相对定位，移动位置的时候参照点是自己原来的位置；
原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它（不脱标，继续保留原来的位置）
absolute：绝对定位，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位；
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考移动位置；
绝对定位不再占有原先的位置（脱标）
fixed：固定定位；元素固定于浏览器可视区的位置；不随滚动条滚条；不占有原先的位置
sticky：粘性定位；以浏览器的可视窗口为参照点移动元素并占有原先的位置，必需有一个边偏移；兼容性较差

边偏移：top|left|right|bottom

子绝父相

定位的叠放顺序：z-index:999;只有定位点的盒子才有该属性

绝对定位的盒子居中
left:50%;
margin-left:让盒子向左移动自身宽度的一半;

特殊特性
行内元素添加绝对或者固定定位，可以直接设置宽度和高度
块级元素添加绝对或者固定定位，如果不给定宽度或者高度，默认大小是内容的大小
脱标的盒子不会触发外边距塌陷问题

浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字、图片
绝对定位（固定定位）会压住下面标准流所有的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

固定定位小技巧：固定在版心右侧位置

1、让固定定位的盒子走到浏览器可视区一半的位置 left:50%;
2、让固定定位的盒子再多走版心宽度一半的位置 margin-left:版心宽度的一半距离；

元素的显示和隐藏

display:none|block;隐藏元素后，不在占有原来的位置

visibility：hidden|visible;隐藏元素后，继续占有原来的位置

overflow:visible|hidden|auto|scroll;溢出隐藏
1
2
3
4
5

单行文字溢出省略号显示

/* 1、先强制一行内显示文本 */
white-space: nowrap;
/* 2、超出的部分隐藏 */
overflow: hidden;
/* 3、文字用省略号替代超出的部分 */
text-overflow: ellipsis;
1
2
3
4
5
6

多行文字溢出省略号显示（兼容性有问题）

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
1
2
3
4
5
6
7
8

精灵图使用

background:url();
background-position:-100px -100px;
1
2

字体图标

下载字体图标：
https://icomoon.io/
https://www.iconfont.cn/

把下载包里面的fonts文件夹放入页面根目录下

字体图标引入
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?w6grul');
  src:  url('fonts/icomoon.eot?w6grul#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?w6grul') format('truetype'),
    url('fonts/icomoon.woff?w6grul') format('woff'),
    url('fonts/icomoon.svg?w6grul#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

使用
去下载文件中的demo.html复制小框框
并在其样式中使用font-family: 'icomoon';即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

CSS三角做法

width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:skyblue;
1
2
3
4
5
6

界面样式

鼠标样式
cursor:default|pointer（小手）|move（移动）|text（文本）|not-allowed（禁止）;

取消表单的轮廓线
outline:none;

防止拖拽文本域
resize:none;

设置行内元素或者行内块元素垂直对齐方式
vertical-align:baseling|top|middle|bottom;
1
2
3
4
5
6
7
8
9
10
11

解決图片底部默认空白缝隙问题

给图片添加vertical-align:top|middle|bottom;
把图片转换为块级元素display:block;
1
2

Bootstrap前端开发框架

中文官网：https://www.bootcss.com/
官网：http://getbootstrap.com/
推荐使用：https://v3.bootcss.com/
1
2
3

资源

1.codepen：http://codepen.io/
2.jsrun：http://jsrun.net
3、html5tricks：http://www.html5tricks.com/
4、Enjoy CSS：http://enjoycss.com/
5、frontendrescue：https://uptodate.frontendrescue.org/

RunJS：http://runjs.cn/
CodePlayerh：ttp://thecodeplayer.com/
实验楼-web：https://www.shiyanlou.com/courses/
CSS-tricks：https://css-tricks.com/
Dribbble：https://dribbble.com/
1
2
3
4
5
6
7
8
9
10
11