不常用HTML和CSS 记录（持续补充中）

选择器

1. .demo>li 只选择demo下的li子元素

2. :nth-child：父元素的第几个子元素

例子	解释
:nth-child(n)	选择器匹配属于其父元素的第 N 个子元素
:nth-child(2n)	选择器匹配属于其父元素的双数的子元素
:nth-child(2n+1)	选择器匹配属于其父元素的单数的子元素

3. :nth-of-type：规定属于其父元素下的第X个元素的元素的每个元素

例子	解释
p:nth-of-type(2)	每个p元素匹配同类型中的第2个同级兄弟元素的背景色
p:nth-of-type(n)	每个p元素匹配同类型中的第n个同级兄弟元素的背景色
p:nth-of-type(2n)	每个p元素匹配同类型中的双数同级兄弟元素的背景色
p:nth-of-type(2n+1)	每个p元素匹配同类型中的单数同级兄弟元素的背景色

4. .demo>li:hover .demo2{display：block} 当鼠标移动到li元素上的时候，li元素的子元素.demo2 会显示。

5. :first-child：选择属于其父元素的首个子元素

6. p:first-of-type：其父元素的第一个 p 元素

7. :last-child：其父元素的最后一个子元素

8. p:last-of -type：其父元素的最后一个 p 元素

9. :fitst-letter：向元素的第一个字符添加样式

10. :fitst-line：向元素的第一行添加样式，换行就是第二行了

11. ::selection：匹配元素中被用户选中或处于高亮状态的部分

12. :focus：选择器用于选取获得焦点的元素。

13. :checked：选择器选取所有选中的复选框或单选按钮。

14. 加号（+）选择器（相邻兄弟选择器）：

// 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
h1 + p {
    
    margin-top:50px;}

15. ~ 选择器：之后的所有XX元素

// 为所有相同的父元素中，位于 p 元素之后的 所有 ul 元素设置背景
p~ul {
    
     background:#ff0000; }

16. 属性选择器

// input标签 type为text 的元素
input[type=‘text’]{
    
    }

17. 选择器中间元素没有空格

//.abc 和 .aaa 之间没有空格，下面代码表示：表示class里面既有abc又有aaa下的P元素
.abc.aaa p{
    
    }

HTML标签

1. iframe：创建包含另外一个网页的内联框架

<a target='iframeName' href="url">
<iframe name='iframeName' src='url2'>

a链接可以通过target='iframeName'，和iframe标签绑定，点击后会修改iframe的src属性

2. input 其他type属性

属性	解释
search	手机小键盘的换行按钮会变成搜索按钮，如果浏览器识别不了就会变成普通文本框。
range	会出现一个滑块，可以设置最大最小值，滑块会等分成几分
color	会调用系统的取色器
email	e-mail 地址的输入，提交时会自动验证email的值
url	url 地址的输入，提交时会自动验证url的值
number	输入为数字，可以设置最大最小值，还可以设置数值的间隔

3. optgroup 把select里面相关的选项分组

使用label="titleName" 来设置分组名称

4. button的type属性，默认值是submit

5. label：标签为 input 元素定义标注（标记）（重点）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label标签的 for 属性应当与相关元素的 id 属性相同。
也可以在label里面嵌套input元素，就不用使用for了

6. datalist 中描述了其可能的值

请使用 input 元素的 list 属性来绑定 datalist。datalist使用ID属性来对应input的绑定

点击input后会出现可能的值，类似搜索，如果是固定信息，可以使用datalist做搜索显示可能值

7. filedlist：表单分组

legend标签来设置title

8. readonly：input表单只能读取，是个布尔属性

9. disabled：input表单禁用，是个布尔属性

10. 所有标签里面的 tabindex 属性：是tab键的切换顺序。

CSS属性

1. box-sizing：规定两个并排的带边框的框

属性	解释
content-box	宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

2. background-clip：规定背景的绘制区域

属性	解释
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

3. word-break：在恰当的断字点进行换行

属性	解释
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

4. white-space：规定段落中的文本不进行换行

属性	解释
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

5. text-overflow：修剪文本

属性	解释
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

6. object-fit：对图片进行剪切

属性	解释
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial	设置为默认值。
inherit	从该元素的父元素继承属性。

7. opacity：属性设置元素的不透明级别，是整个元素，包括元素内的文字

8. cursor：属性规定要显示的光标的类型（形状）
cursor: url(xxx) auto; 后面的auto是如果图片不显示，使用auto

9. visibility：属性规定元素是否可见。即使不可见的元素也会占据页面上的空间

10. 默认背景图横标纵坐标图片重复

11. background-position：属性设置背景图像的起始位置
background-position：top left;
第一个值是水平位置，第二个值是垂直位置

12. background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动（相对于视图窗口的位置）

属性	解释
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

13. 速写（简写）background
background：url(“imgs/images.jpg”) no-repeat 50% 50%/100% fixed #000
顺序为设置图片、不重复、位置、尺寸、视口、背景颜色，因为位置和尺寸都有可能为百分比，所有浏览器规定尺寸必须写在位置后面中间加/隔开。
有些属性可以不写，不写会按默认值处理

background：背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸

14. sprite（雪碧图，也叫精灵图）：将很多的图片组成一张大的图片，通过控制图片显示位置来达到自己想要的图

15. resize：属性规定是否可由用户调整元素的尺寸。

属性	解释
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。