前端随笔（一）

一、header标签

标签定义及使用说明
<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个 <header> 元素。

注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

二、@media

@media screen and (min-width: 1201px) {
				.abc {
					width: 1200px
				}
			}
			/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
			
			@media screen and (max-width: 1200px) {
				.abc {
					width: 900px
				}
			}
			/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
			

三、div设置点击跳转属性

设置onclick属性即可

四、div的hover鼠标手

cursor: pointer;

五、box-shadow不显示

1.浏览器不支持

2.观察是否有div覆盖掉了阴影

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

六、:nth-child(an+b)

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：

• 0n+3 或简单的 3 匹配第三个元素。
• 1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
• 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
• 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
• 3n+4 匹配位置为 4、7、10、13...的元素。

*a* 和 *b* 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，*an* 必须写在 *b* 的前面，不能写成 *b+an* 的形式。

选择器示例

• tr:nth-child(2n+1)

  表示HTML表格中的奇数行。

• tr:nth-child(odd)

  表示HTML表格中的奇数行。

• tr:nth-child(2n)

  表示HTML表格中的偶数行。

• tr:nth-child(even)

  表示HTML表格中的偶数行。

• span:nth-child(0n+1)

  表示子元素中第一个且为span的元素，与 :first-child 选择器作用相同。

• span:nth-child(1)

  表示父元素中子元素为第一的并且名字为span的标签被选中

• span:nth-child(-n+3)

  匹配前三个子元素中的span元素。

七、设置select默认样式，设置默认文字

1.重写所有或者给指定select附加自定义class

<select class="select-self"></select>
/*select框*/
.select-self{
    width: 7rem;
    box-shadow: 1px 1px 7px 0px
		#c0c4ce;
	border-radius: 4px;
	opacity: 0.9;
    font-size: 0.9rem;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 0.5rem;
}

2.添加option时，附加属性，即该option不会显示

<option  disabled selected hidden>批量管理</option>

八、对于百分比和固定宽度之间匹配

width : calc(100% - 16px);

九、table中设置td固定宽度

.table-td-limit {
    width: 20%;
    overflow: hidden;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/

}

如果还需要鼠标悬浮显示全部文字，则显示

十、form中的button默认type为submin

若是希望按钮不为提交，需要给按钮设置type为“button”

十一、html中标签内文字之间空格占位符

 

它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，

该空格占据宽度受字体影响明显而强烈。

 

它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，

就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

 

它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，

就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

 

它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

‌

它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌

‍

它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。

此外，浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（	）、换行（
）和回车（
）还有（　）等等。

十二、link标签引入css

可以通过media来选择不同设备的引入

语法

<link media="value">

属性值

值	描述
screen	计算机屏幕（默认）。
tty	电传打字机以及类似的使用等宽字符网格的媒介。
tv	电视机类型设备（低分辨率、有限的滚屏能力）。
projection	放映机。
handheld	手持设备（小屏幕、有限带宽）。
print	打印预览模式/打印页面。
braille	盲人点字法反馈设备。
aural	语音合成器。
all	适用于所有设备。