html+css
声明
它不是html的标签，它为浏览器提供一项信息（声明），即html是用什么版本编写的。
标签
lang属性：HTML语言声明属性，用来定义当前文档显示的语言。
lang=“en” 表示定义语言为英文
标签
/*charset 属性规定 HTML 文档的字符编码。*/
a标签
target：属性有：_blank(新窗口打开) _self(当前窗口打开) _parent _top
锚链接：给元素添加id属性，使用a标签添加其中的href=“#id名字”，来实现对网页的定位。
a标签如何做到点击不跳转
将a标签中的href属性中添加 井号加上其他东西
我是链接
块元素，行元素，行内块元素
块级元素：独占一行，对宽高的属性值生效；如没有给出宽高，块级元素就默认为浏览器的宽度，即就是100%；
行内元素：可以多个标签存在一行，对宽高属性不生效，完全由内容撑开宽高；
行内块元素：可以对宽高属性值生效，还可以多个标签存在一行显示；
块标签：p，div，ul，ol，li，h1~h6，form；
行内标签：a，span，em，strong（一般用来对文字进行强调，使用加粗字体体现出来），img，var（JavaScript中命名变量的标签）；
行内块元素：img，input，textarea；
各种标签之间的转换：
display:black;/*该标签设置为块级元素，能够设置宽高，不可以和其他标签占一行*/
display:inline;/*该标签设置为行级元素，不能设置宽高，可以和其他标签占一行*/
display:inline-block;/*该标签能设置宽高，可以和其他标签占一行*/
块标签可以套行标签，行标签不可以套块标签。
四种定位
static定位：html元素的默认值，即没有定位
fixed定位：元素的位置相对于浏览器窗口位置固定
relative 定位：相对定位元素的定位是相对其正常位置
absolute定位：相对于已定位的父元素，和其他元素重叠
子绝父相
在父类的position属性是relative的情况下，子类的position属性又是absolute的情况下，那么我们的子类的定位是在父类的范围中absolute，而不是整个页面。
选择器的分类及用法
分类及优先级
基本选择器：
标签选择器，类选择器，id选择器，通配符选择器，组合选择器
层次选择器：
后代选择器：div p{color:red;}
子元选择器：div>p{color:red;} （与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素）
兄弟选择器：div+P{color:red;}
通用选择器：div~p{color:red;}
伪类选择器
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
伪元素选择器
p:first-line {color:#FF0000;} /* 文本首行设置特殊样式 */
p:first-letter {color:#FF0000;} /* 文本首字母设置特殊样式 */
p:before {color:#FF0000;} /* 在元素的前面加上新的内容 */
p:after {color:#FF0000;} /* 在元素的后面加上新的内容 */
p:first-child{color:#FF0000;}/* 样式匹配元素的第一个子元素 */
优先级
选择器的权值
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 1
id： 100
important： 1000
.testClass{
color:blue !important;/*使用！important提高优先级*/
}
用法
内联样式（行内样式）
在标签内部通过style属性来设置元素的样式，改样式只对一个标签生效
内部样式表
将样式编写到头部中的style标签里，通过css选择器来选中元素并为其设置样式，可以为多个标签设置样式
外部样式表
将样式编写到一个外部的css文件中去，然后通过link标签来引入外部的css文件（最佳实践）
css单位的种类和区别
px : 绝对单位，按照像素的长度衡量
em : 相对单位，父类字体大小的倍数
% : 相对于父类元素的长宽（当position：fixed时，相对于窗口的大小；当position：absolute时，将相对于其相对元素的大小）
颜色的表示方法
十六进制颜色（红色：#ff0000 带有透明的红色：#ff000080）
带透明度的十六进制颜色
RGB 颜色（蓝色：rgb(0,0,255) 带有透明度的蓝色：rgba(0, 255, 0, 0.3)）
RGBA 颜色
HSL 颜色（ 指的是色相（hue）、饱和度（saturation）和亮度（lightness））
HSLA 颜色（使用格式：hsla(hue, saturation, lightness, alpha)； 其中alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。）
预定义/跨浏览器的颜色名称（blue 颜色名）
使用 currentcolor 关键字（currentcolor 关键字引用元素的 color 属性值。）
浮动及清除浮动
css浮动
浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。
由于浮动框不在文档中的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
css float属性
通过float属性来实现元素的向左向右浮动。
行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
盒子模型
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容
元素的宽度和高度：
最终元素的总宽度计算公式是这样的：
总元素的宽度=设置的宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的宽度：content + padding-left +padding-right +border-left+ border-right+margin-left+margin-right
元素的总高度最终计算公式是这样的：
总元素的高度=设置的高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
怪异盒子模型的宽度和高度：
怪异盒模型下盒子的大小=width（content + border + padding） + margin
css flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。
通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。
flex容器属性：
display：指定html元素的盒子类型
flex-direction：指定弹性盒子中元素的排列方式（row：默认值，主轴沿水平方向从左到右；row-reverse:主轴沿水平方向从右到左；column：主轴沿垂直方向从上到下；column-reverse：主轴沿垂直方向从下到上；initial：将此属性设置为属性的默认值；inherit：从父元素继承此属性的值）
flex-wrap：属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行（nowrap：默认值，表示项目不会换行；wrap：表示项目会在需要时换行；wrap-reverse：表示项目会在需要时换行，但会以相反的顺序；initial： 将此属性设置为属性的默认值；inherit：从父元素继承属性的值）
flex-flow:是 flex-direction 和 flex-wrap 两个属性的简写(例如：flex-flow: row-reverse wrap;)
justify-content：用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式（flex-start：默认值：左对齐；flex-end：右对齐；center：居中；space-between：两端对齐，项目之间的间隔是相等的；space-around：每个项目两侧的间隔相等；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值）
align-items：设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式（stretch：默认值，项目将被拉伸以适合容器；center：项目位于容器中央；flex-start：项目位于容器顶部；flex-end：项目位于容器的底部；baseline：项目与容器的基线对齐；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值；）
align-content：align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式（stretch： 默认值，将项目拉伸以占据剩余空间；center：项目在容器内居中排布；flex-start：项目在容器的顶部排列；flex-end；项目在容器的底部排列；space-between：多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部；space-around：多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值；）
flex项目属性
order属性用来设置项目在flex容器中出现的顺序（给order来用数字赋值，默认值为零）
align-self：允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值（auto：默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”；stretch：项目将被拉伸以适合容器；center：项目位于容器的中央；flex-start：项目位于容器的顶部；flex-end：项目位于容器的底部；baseline：项目与容器的基线对齐；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值）
flex：它是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：
flex: flex-grow flex-shrink flex-basis;
（flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。）
column, float, clear和vertical-align对网格容器没有效果。
css Grid布局
Grid布局和flex布局：flex布局是一维布局，Grid布局是二维布局；
CSS：Grid布局教程文档
Grid容器属性
（1）display属性：指定html元素的盒子类型
使用display属性来定义一个网格容器，它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器，它的所有子元素都进入grid文档流，称为网格子项。
（display:grid；指定一个容器为网格布局，定义为块级元素；inline-grid：定义一个内联的网格容器
subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。）
（2.1）grid-template-columns/grid-template-rows：设置各个行高和列宽
/*定义列的宽度*/
/* 定义单元格的宽高; 定义单元格的名字 */
/* 单元格的名字不是一定要定义的，不定义将默认以数字命名 */
grid-template-columns: ... / ...;
/*定义行的高度*/
grid-template-rows: ... / ...;
/* 具体的格式 */
.container{
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
.container02{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
（2.2）grid-template-areas
grid-template-areas可以配合grid-area定义一个显式的网格区域。
grid-template-areas定义网格区域，然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。（即是使用grid-area定义盒子的名字，再由grid-template-areas进行排布）
grid-template-areas: " | . | none | ..." "..." /*
：在grid-area中指定的网格区域名字
.：一个句点表示一个空的网格单元none：没有网格区域被定义 */
（2.3）grid-column-gap/grid-row-gap/grid-gap
指定网格线的大小，也可以说是网格子项之间的间距。
/* 长度值 */grid-column-gap: grid-row-gap:
（2.4）justify-items/align-items
justify-items：让网格子项的内容和列轴对齐（align-items则相反，是和行轴对齐），这个值对容器里面的所有网格子项都有用；
start：内容和网格区域的左边对齐
end：内容和网格区域的右边对齐
center：内容和网格区域的中间对齐
stretch：填充整个网格区域的宽度（默认值）
（2.5） justify-content/align-content
justify-content：是整个内容区域在容器里面的水平位置
align-content：是整个内容区域在容器里面的垂直位置
属性值：
start:左对齐
end：右对齐
center：居中对齐
stretch：填充网格容器
space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly：网格间隔相等，包括始末两端
Grid子项属性
（1）grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row
通过网格线来定义网格项的位置。
grid-column-start、grid-row-start定义网格项的开始位置，grid-column-end、grid-row-end定义网格项的结束位置。
（2）grid-area
给网格子项取一个名字以让它被由grid-template-areas属性创建的模板引用
同时，这个属性还可以用来更简短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end。
（3）justify-self/align-self
justify-self是让网格子项的内容以列轴对齐（与之相反align-self是跟行轴对齐），这个值可以应用在单个网格子项的内容中。
属性值：
start – 让内容在网格区域左对齐
end – 让内容在网格区域右对齐
center – 让内容在网格区域中间对齐
stretch – 填充着呢个网络区域的宽度（默认值）
input标签的种类
文本框
密码框
提交按钮
重置按钮
单选框
复选框
普通按钮
文件选择控件
隐藏框
图片按钮
特殊字符
（空格）<（小于）>（大于）©（版权）
（空格）
<（小于）
>（大于）
©（版权）
css样式继承
外层元素的样式会被内层元素所继承
当内层元素的属性与外层相同时，内层元素会覆盖外层元素的样式
只有文本与字体的样式属性会被继承，其余的样式属性不可以被继承
布局：响应式布局（自适应）
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
/*假若有三个盒子向左浮动，当其外面的盒子宽度小于600px时，三列变为单列*/