前端HTML+CSS查漏补缺——2021-7月19
跳转锚点：超链接a的href属性设置为锚点，如果锚点是id，就在前面加#。
层级：列表dl，标题dt，标题解释dd。
input type=file 是上传文件
下拉菜单：select - option。其中select加一个 multiple 表示所有的选项都摆出来
斜体：font-style：italic；
双层边框：border：double就行
background-position；百分比，以图片中轴来放。
视觉差：background-attachment：fixed；图片不会随着鼠标滚轮滚动
text文字样式复习一下
text-decoration：overline、underline、line-through
text-transform：capitalize首字母大写、lowercase、uppercase
text-indient：2rem；首行缩进
letter-spacing、word-spacing
折行
不强：word-warp：break-word；
强：word-break：break-all；
选择器复习一下：
单个：id、class、元素
群组：逗号隔开选择多个
通配：*
层次：1后代：ul li
2父子：ul>li
3同级：div~h2
4相邻：div+p
属性：
div[class],
div[class=‘box‘],
div[class^=‘s‘],
div[class$=‘s‘],
div[class=*=‘ea‘],
div[class][name]
伪类：
普通元素：hover、active点击下去；before、after前后附加的伪类；focus选中的状态
a：link，hover，active，visited
checkbox：checked被选中的状态，disabled不可选的状态
结构伪类：
nth-of-type()可以进行一些简单运算，只计算指定类型的元素
only-of-type只有在唯一的时候起作用
nth-child() 在同辈元素中排行括号里的数，如果类型不一致就没反应。
盒模型复习一下
margin叠加和传递问题：
只在垂直方向叠加和传递；
给父元素加上border之后，父元素就不跟着子元素移动位置了（也就是不传递了）；
父元素加上padding属性，可以把子元素“挤出去”，实质上也是打破了传递
块元素和内联元素区别
块：宽度默认父元素宽度。
内联：宽度由内容决定，不写就没有宽度。内联标签之间有空隙，是换行产生的。常用于修饰文本
visibility：hidden和display：none
visibility占用空间，display连空间都不占
可以直接用cursor：url（）来定义手势（鼠标移上去的变化）
img是inline-block类型，默认它是基线对齐，除非重新设置底部对齐。
vertical-align:baseline; --> vertical-align:bottom;
浮动：
/* 每一个浮动元素的新行高度是上一行最后一个元素的高度，如果上一行有东西挡住
就往后移，直到到达能放下的位置。如果上一行高度小于它的新行高度，也只按新行高度来 */
span元素自带float：left属性
清除浮动的四种方式：在父元素上添加
overflow：hidden 不推荐使用。想溢出的子元素会被隐藏
display：inline-block 不推荐使用。后面的元素如果是inline-block就不会另起一行了
clear：both 推荐使用（这个是加在最后一个子元素上）
.clear::after { 推荐使用
content: ‘‘;
display: block;
clear: both;
}
一套通用的初始化代码——以后还要完善：
* { margin: 0; padding: 0; } ul { list-style: none; } img { display: block; } a { text-decoration: none; color: #666; } .l { float: left; } .r { float: right; } .clear::after { content: ‘‘; display: block; clear: both; }
定位position复习一下
脱离文档流
relative块级元素，因为它已经占了一行，即使它被挪到其他位置，它的下一个元素还是会腾出
它的位置。所以relative是不脱离文档流的。
但如果换成absolute就只是相对页面的绝对定位，不会腾出一行，fixed也一样。这两个都让它
和其他元素失去联系。本质上absolute和fixed都是脱离文档流的。
脱离文档流之后，内联元素像块元素一样可以设置宽高，块元素会像内联元素那样宽度随内容变。
但这种变化并不是完全的，只是拥有一些特性，但不是所有特性。
absolute相对谁偏移？
默认相对添加了position属性的祖先元素偏移，如果没有，就相对整个文档偏移（页面）
fixed相对谁偏移？
浏览器窗口。常见用途：返回顶部、广告栏、弹窗
sticky相对谁偏移？
在没有滚到规定的位置之前跟着其他元素一起动。到那个位置脱离文档流，类似于fixed了。
如何表示层级？
z-index：数字； 数字越大越靠上。【注意：后代的层级会被祖先的层级拖累】
下拉选择框的要点：用position：absolute设置ul，背景为白色，可以调整一下位置。
添加省略号：在宽度有限的容器内写如下代码
#content { width: 200px; border: 1px black solid; white-space: nowrap; //避免全部显示，不换行 overflow: hidden; text-overflow: ellipsis; //省略号的写法 }
原文：https://www.cnblogs.com/yh-queen/p/15028521.html