前端 学习笔记 【持更】

一. 文本换行

1. word-wrap：normal | break-word

设置文本行超出容器边界时是否换行。
normal：控制连续文本换行。
break-word：内容将在边界换行，可能出现词内换行。

2. word-break：normal | break-all | keep-all

属性值与文本语言有关系。
normal：根据亚洲语言与非亚洲语言的文本规则，允许字内换行。
break-all：同亚洲语言的normal，允许强行截断英文单词，达到词内换行的效果。
keep-all：同非亚洲语言的normal，对中日韩文不允许字断开，适合包含少量亚洲语言的非亚洲文本。

二. 段首缩进：text-indent

根据具体的字符大小设置段落首行缩进，一般为两个字符大小。

三. 垂直对齐

1. 文本垂直对齐方式：vertical-align

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。

2. 行高line-height = 容器高度

四. 列表样式

1. 列表符号：list-style-type

无序列表：

disc实心圆、circle空心圆、square实心方块、none无符号。

有序列表：

decimal十进制数字、decimal-leading-zero前导零十进制（01、02、03）、
lower/upper-roman小/大写罗马数字、lower/upper-alpha小/大写英文字母、
none无标记、inherit继承父元素标记

2.自定义列表符号：list-style-imag：url{…}

五. HSLA颜色值

Hue（色调），0或360代表红色，120代表绿色，240代表蓝色。
Saturation（饱和度），取值0%~100%。
Lightness（亮度），取值0%~100%。
不透明度opacity取值0~1。

六. 背景图像固定

background-attachment：scroll（随滚动条一起滚动） | fixed（固定在页面的可见区域）

七.鼠标效果

cursor：url（…）
解决图标在不同浏览器中大小不同：32×32以下。

八.覆盖手机端链接或JS可点击元素的点击高亮。

-webkit-tap-highlight-color：transparent

九.svg使用< img>标签外部引入

需规定height与width。
若需要JavaScript操作dom则需要内联引入svg代码。

十.大小写：text-transform

capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。
none：标准 、transparent：继承

十一.文字两端对齐

text-align: justify;
text-justify: inter-ideograph

十二.省略

text-overflow: ellipsis;
white-space:nowrap;
overflow: hidden;

<div style="width: 90%;line-height: 30px;margin-top: 6px;
text-overflow: ellipsis;white-space:nowrap;overflow: hidden;">
    <span style="color: #999999;">首付预算：</span>
     <span style="color: orangered;opacity: 0.6">
         净首付92.5万，月供、税费点击进入税费计算器</span>
     <span  style="color: gray;position: absolute;right: 8%">
         <van-icon name="arrow" style="position: relative;top: 2px"/>
     </span>
</div>

两行省略

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
width:...;

十三. vertical-align 属性

起作用的前提：元素为 inline 水平元素或 table-cell 元素，包括 span , img , input , button , td 以及通过 display 改变了显示水平为 inline 水平或者 table-cell 的元素。这也意味着，默认情况下， div , p 等元素设置 vertical-align 无效

十四. absolute定位

绝对定位的元素可以使用 top bottom left right 调整布局位置，在没有设置这几个值的时候，绝对定位元素显示还是保持在当前的位置。如果设置了值，那么这个元素就需要找到一个锚点，因为已经脱离文档流，所以需要找到一个参考点，这参考点就是 最近的非 static 祖先元素 ，可以是 relative, absolute, fixed，一直往上到 body 元素。

所以常常会采用 relative + absolute 的组合布局方式，当然也可以利用绝对定位元素在当前位置显示的特性结合 margin 来使用。

绝对定位还有个用处，就是避免触发回流，因为脱离正常的文档流，因此对于频繁回流的元素可以采用绝对定位。

十五. DPR

像素：是图像显示的基本单位，1像素是显示的最小区域。
物理像素：设备的物理像素，每个设备的物理像素都是厂家固定好的。
css像素：主要用于编码，约定好在显示层上的单位，screen.width 可获取到逻辑编码中的窗口最大像素。

DPR：高清屏已成标配，可显示的像素点越多越清晰，导致设备上每英寸可显示的像素点（PPI）越来越多；屏幕的大小没变，css的逻辑像素没变，可物理像素却变多了，一个逻辑像素要对于多个物理像素，这两者的比例为 DPR。

DPR = 物理像素 / css逻辑像素

可通过 window.devicePixelRatio 获取设备的 DPR

1px 问题

在高清屏中 DPR 可能会是 2 或者 3 ，那么原先 1px 像素的线在高清屏下就占了2个或者3个物理像素，导致线看着比较粗。

解决：（二倍屏的情况缩0.5）

1. 使用伪类，设置 border 1px scale(0.5)
2. 设置 meta initial-scale 根据DPR设置初始值
3. 伪类 + transform: scaleY(0.5);（线的情况）

/* 伪类 + transform: scaleY(0.5); */
.px1 {
    position: relative;
}

.px1:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border: 1px solid black;
    color: black;
    height: 200%;
    transform-origin: left top;
    transform: scale(0.5);
}

十六. 水平垂直居中

position: fixed;
//或者relative+absolute
    
top:50%;
left:50%;
    
transform:translate(-50%,-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);

//在宽高固定时可以margin-left/top=-1/2 * height

//又或者：绝对定位absolute + 各方向值为0 + margin：aotu

或者：父元素flex + align-items：center + justify-content：center

或者使用table-cell：

display: table-cell;
vertical-align: middle;
text-align: center;

十七. 浏览器前缀

• -moz-代表firefox浏览器私有属性（-moz-是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。）

• -ms-代表ie浏览器私有属性

• -webkit-代表safari、chrome私有属性

• -o-代表Opera

Autoprefixer是专门用来添加厂商前缀的postcss插件，它处理兼容性的依据来源于caniuse。

https://github.com/postcss/autoprefixer

编译前：

.example {
  display: flex;
  transition: all .5s;
  user-select: none;
  background: linear-gradient(to bottom, white, black);
}

编译后：

.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: -webkit-linear-gradient(top, white, black);
  background: linear-gradient(to bottom, white, black);
}

十八. link VS @import

从属关系区别
link:是 html 提供的标签，不仅可以加载css样式表，还可以定义 RSS、rel 连接属性等。

@import:是 css 提供的语法规则，用于导入样式表。

加载顺序区别
link：文件是同时加载。
@import 引入的 CSS 将在页面加载完毕后被加载。

兼容性问题
link 不存在兼容性问题；@import 可能会有兼容性问题。

十九. display:none VS visibility：hidden

效果都是隐藏元素

display:none 在文档布局中不分配空间（节点），值变化会导致回流和重绘

visibility：hidden 保留渲染树中的节点，占用空间，导致重绘

二十. rem em vh vw

这几个单位常用于自适应布局
rem
css3 新增，相对于根节点的字体大小的一个单位
eg: 1rem * font-size:20px = 20px

em
与rem类似，但是相对于父级元素的字体大小。

vw vh

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

二十一. flex常见属性

容器上的属性

flex-direction : 主轴方向
row | row-reverse | column | column-reverse;

flex-wrap : 换行的方式
nowrap | wrap（第一行在上方） | wrap-reverse（第一行在下方）;

flex-flow ：上面两个的简写，默认 row nowrap

justify-content : 主轴的对其方式
flex-start | flex-end | center | space-between（两端对齐） | space-around（每个项目两侧的间隔相等）;

align-items : 交叉轴的对齐方式
flex-start | flex-end | center | baseline（第一行文字基线对齐） | stretch（如果项目未设置高度或设为auto，占满整个容器的高度）;

align-content : 多根主轴的对齐方式
flex-start | flex-end | center | space-between | space-around | stretch;

元素上的属性

order : 排序值，数值越小越靠前，默认为0

.item {
  order: <integer>;
}

flex-grow : 项目放大的比例，默认为 0 不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink : 项目缩小的比例，默认 1，负值对该属性无效。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis : 属性定义了在分配多余空间之前，项目占据的主轴空间，如果元素定义了宽，那么宽度将无效 默认 auto

flex ：以上三个的简称
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

二十二. object-fit

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit属性值：

fill：默认，不保证保持原有的比例，内容拉伸填满整个内容容器。
contain：保持原有尺寸比例。内容被缩放，保证元素全部置于容器内，容器可能有留白。
cover：保持原有尺寸比例。内容被缩放，保证元素布满容器，内容可能被裁切。
none：保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down：保持原有尺寸比例。取none 或 contain 中尺寸更小的一个。

initial：设置为默认值，
inherit：从该元素的父元素继承属性。

二十三. HTML

一. < legend >标签

做作业遇到的，带文字的border框。

二. .htm 和 .html扩展名区别

DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
所以htm是为了兼容过去的DOS命名格式存在的

三. DTD文档声明

于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异。为了让浏览器能够正确的编译/解析/渲染网页, 需要在HTML文件的第一行告诉浏览器当前网页使用哪一个版本的HTML规范。
格式：<!DOCTYPE html>

<!DOCTYPE>声明必须是 HTML 文档的第一行，位于<html>标签之前
<!DOCTYPE> 声明不是 HTML 标签
<!DOCTYPE> 声明没有结束标签
<!DOCTYPE> 声明对大小写不敏感

四. meta标签

乱码现象：在编写网页的时候没有指定字符集
解决乱码现象：在head标签中添加<meta charset="GBK" />指定字符集

GBK(GB2312)和UTF-8区别：
GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文，体积比较小；
UTF-8里面存储的世界上所有的文字，体积比较大.
如果仅仅包含中文, 推荐使用GB2312, 因为它的体积更小, 访问速度更快
如果网站 还包含了其它国家的语言 , 推荐使用UTF-8

在HTML文件中指定的字符集必须和保存文件的字符集一致, 否则还是会出现乱码。

二十四. 禁止选择文字

-webkit-tap-highlight-color: transparent;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;

二十五. 禁止拖动元素新建窗口

<body οndragstart="return false">
</body>

二十六. transition-timing-function

linear
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out
规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。