CSS基础知识

1. label和input绑定

密码: 方法二 密码:

2. vscode缩写
   .classname> = div+class
   .main>(.header>(.logo{todologo}+input))

3. 盒子模型
   平时设置的width、height是content的，盒子整体是元素的高宽
   margin:
   %:父元素的百分比
   inhert:继承父元素外边距
   margin:上 右 下 左
   margin:上下 左右
   margin: 上 左右 下

4. 行内、块元素
   行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。
   块级元素：块级元素会独占一行，宽高、行高、外边距、内边距都可以单独设置，宽度默认是容器的100%，可以容纳内联元素和其他块级元素
   块级元素和行内元素的转换
   （一）可以通过display这个属性来进行相互转换
   1.块级元素—>行内元素：display：inline
   2.行内元素—>块级元素：display:block
   3.块级元素、行内元素—>行内块：display:inline-block
   （二）float
   若设置行内元素 float:left/right，则该行内元素转换为块级元素 ，且具有浮动特性，行内元素去除了之间的莫名空白。
   （三）position
   若为行内元素进行定位，position:absolute 或者 position:fixed 都会把行内元素转换为块级元素。
   eg：span标签是一个内联元素，只能容纳文本或者其他内联元素。
   和其他内联元素一样，内联元素的宽度和高度就是包含的文字或图片的宽度和高度
   给span标签设置高height、宽width、上下内边距(padding-top/bottom)、上下外边距(margin-top/bottom)都是不起效果。给span标签设置左右内边距(padding-left/right)、左右外边距(margin-left/right)、行高(line-height)是有效的。

5. line-height
   当div没设置高度时，line-height决定了div的高
   div的height与line-height相同时，
   ①行距=line-height-font-size=0
   ②元素垂直居中
   对行内元素来说，padding、margin的上下没有效果，可用
   line-height: 20px; font-size: 10px;

6. media查询

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* 当页面宽度大于等于 900 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

7. overflow内容溢出
   1.visible：使溢出内容展示（默认值）
   2.hidden：隐藏溢出内容且不出现滚动条
   3.scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现
   4.auto：超出滚动
   overflow:hidden：
   ①当父元素没有高度时，且子元素设置float浮动，则父元素会无视浮动元素，其高宽无元素可以撑起。所以给父元素添加hidden属性，可以清除浮动，重新接收子元素的大小
   ②对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
8. 定位
   相对定位元素：relative。在原有基础上调整，不影响其他元素
   绝对定位元素：absolute。会被从正常流中删除，且能够交叠元素。相对于最近的父元素改变位置。
   固定定位元素：fixed。相对于屏幕视图
   粘性定位元素：sticky。基于用户滚动的位置：开始没有脱离文档流，当满足规则时，脱离了文档流
   默认值static表示正常的布局。
   开启定位的元素可以通过top，right，bottom和left属性则决定了该元素的最终位置。
9. 浮动
   float：属性设置的元素会脱离文档流产生浮动。使块级元素在同一行
   clear:left|right|both:此元素侧边不能有浮动元素
10. 选择器
    分组：h1,p{相同属性}
    嵌套：main h1{main选择器下的h1}
    分类:
    .类名{}
    #id{id选择器}
    {统配符选择器：所有}
    标签.classname{交集}
    属性选择器
    [属性名]{}
    [属性名=属性值]{}
    [属性名^=a]{属性值以a开头}
    [属性名$=b]{属性值以b结尾}
    [属性名=c]{属性值含c}
    伪类选择器：不存在的类
    :first-child{},用来选择父元素下的第一个子元素。
    :last-child{},用来选择父元素下的最后一个子元素。
    :nth-child(n){},n为具体数字:用来选择父元素下的第n子元素。
    n为字母:用来选择父元素下的所有元素。
    注意：:xxx-child{}是根据父元素下所有子元素进行排序。
    :first-of-type{},用来选择父元素下的第一个子元素。
    :last-of-type{},用来选择父元素下的最后一个子元素。
    :nth-of-type(n){},用来选择父元素下的第n个子元素。
    注意：:first-of-type{}是根据父元素下所有同类型的子元素进行排序。
    :not(选择器名称){}否定类，将复合的元素去除，n为指定数值。

	li a:hover:not(.aaa){
		background-color:white;
	}	//li下的a元素除了.aaa选择器的，当鼠标滑过链接时

组合：
后代选择器(以空格 分隔)
子元素选择器（以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
详细：
总结 anchor 伪类: link / visited / hover / active(4 个) 。

1. anchor 伪类具体含义:
   1. link: 未访问的链接 (匹配元素被定义了超链接并未被访问过。常用于链接描点上)。
   2. visited: 已访问的链接 (匹配元素被定义了超链接并已被访问过。常用于链接描点上)。
   3. hover: 鼠标划过链接 (用户鼠标停留在元素 E 上。IE6 及以下浏览器仅支持 a:hover)。
   4. active: 已选中的链接 (匹配元素被激活。常用于链接描点和按钮上)。
      a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
      a:active 必须被置于 a:hover 之后，才是有效的。
2. display

• none:隐藏对象，不占空间
• inline:行内元素
• block:块元素
• inline-block:行内块元素，会识别代码间的空格。行内且可以设置宽高
• table-cell:表格单元格
• flex:弹性盒：建立自适应布局
  flex介绍

例子

1. 导航栏：li元素转换为内联块元素或者块元素
2. 下拉框：通过换下拉框内容的display形式；以及父元素的relative和内容的absolute脱离文档流
3. 计数器

ol {
  counter-reset: section;//建立计数器
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";//嵌套计数器
}

4. !important 规则用于增加样式的权重。
   设定一个全站样式的 CSS 样式可以使用 !important。
5. 渐变：background-image: linear-gradient(angle, color-stop1, color-stop2);
6. 过渡：
   div
   {
   width:100px;
   height:100px;
   background:red;
   transition-property:width;//宽度方面
   transition-duration:1s;//时间
   transition-timing-function:linear;
   transition-delay:2s;//延迟
   }
   div:hover
   {
   width:200px;
   }
7. box-sizing 属性：定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框。
   box-sizing: content-box (默认):高度和宽度只应用于元素的内容；
   box-sizing: border-box:高度和宽度应用于元素的所有部分: 内容、内边距和边框；
8. 弹性盒子：。。。。

JS

1. 获取元素
   1.根据id获取元素
   document.getElementById(“id属性的值”);返回元素对象
   2.根据标签名字获取元素
   document.getElementsByTagName(“标签的名字”);返回伪数组：obj[n]
   3.根据name属性的值获取元素
   document.getElementsByName(“name属性的值”);返回伪数组
   4.根据类样式的名字获取元素
   document.getElementsByClassName(“类样式的名字”);返回伪数组
   5.根据选择器获取元素
   1.document.querySelector(“选择器”);返回元素对象
   eg:(#id选择器)、(.类名选择器)
   2.document.querySelectorAll(“选择器”); 返回伪数组