html css

选择器的优先级相同的情况下清除浮动:

.clear:after,
.clear:before{
       clear: both
       content: "";
       width: 0;
       height: 0;
       display: block;
       visibility: hidden;
     }

设置滚动条的宽度及样式

        /*定义滚动条样式（高宽及背景）*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
            background: #007acc;
        } 
        /*定义滚动条轨道（凹槽）样式*/ 
        ::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
            border-radius: 3px; 
        } 
        /*定义滑块 样式*/ 
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 100px;    /* 滚动条滑块长度 */
            background-color: #ccc;

calc()函数用于动态计算长度值

　　需要注意的是,运算符前后都需要保留一个空格

　　任何长度值都可以使用 calc()函数进行计算

　　calc() 函数支持 + - * / 运算

　　calc() 函数使用标准的数学运算优先级规则

 calc(100vh - 80px);

vh/vw
　　vh: view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
　　vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

　　vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
　　vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
　　视区所指为浏览器内部的可视区域大小，
　　即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

　　calc
　　calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

　　calc是 css3提供的一个在css文件中计算值的函数：

用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如： calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

1 calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
2 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

一般用来设置流式布局宽高，当然，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值

outline: none; // 去除选中状态边框

letter-spacing: 0.1em; 汉字文字间距

word-spacing:0.1em 英文单词文字间距

vertical-align:middle 属性设置元素的垂直对齐方式。(设置文字与图片对齐方式[属性用在图片上])

关闭表单提示 autocomplete: “off” 关闭表单的提示(就是选中input是的提示)

outline:none; 去除input选中时的样式

usel-select: none 文本禁止被用户选中

cursor:pointer 鼠标变成小手

<a href =”javascript:;”></a> 阻止页面刷新

<a href=”javascript:history.back();”></a> 返回上一步

<a href="www.baidu.com" target="_blank"></a> 点击按钮跳转新页面（target="_blank" 主要是这个属性）

文字超出显示省略号

 txt{
  200px; /*不允许出现半汉字截断,不允许超出宽度*/
 overflow: hidden; /*自动隐藏文字*/
 text-overflow: ellipsis;/*文字隐藏后添加省略号*/
 white-space: nowrap;/*强制不换行*/ 
}
// 多行省略
.box {
     overflow: hidden;
      -webkit-line-clamp: 2; // 行数
      -webkit-box-orient: vertical;
      display: -webkit-box;
}

什么是HTML?

HTML并不是真正的的程序语言，他是一种超文本标记语言，用来结构化和含义化你想要放

在web 网站上的那些内容。它由一系列的元素（elements）所组成，这些元素可以用来

封装你的内容中担任不同工作的各部分和各个角色。

什么是css?

就像 HTML，CSS 也不是真正的编程语言。它是样式表语言，也就是说，它允许你有

选择性的为 HTML 文档的元素添加样式。

DOCTYPE的作用？

1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以

何种模式来渲染文档。

1. 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。

2. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

1. DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

1. 换行标签 <br>

2. 横线标签 <hr>

3. 注释标签  // (键盘按钮 trl + / )

注意：

注释标签在我们以后写代码过程中，更多的是扮演解释说明的角色

4. 设置网页编码

<meta charset="UTF-8"> 当前网页的编码是按照utf-8进行编码的,防止网页乱码

Gbk、gb2312、big5

1. 标题标签：一共有6个标签

<h1></h1>到 <h6></h6>

注意：

☞ 在同一个网页中，可以设置多个标题标签

☞ 如果要设置多个标题，那么一号标题最好只出现一次。

2. 段落标签：

<p></p>

3.网页中表示强调或者文本修饰的标签：

改变文字颜色 <font color="颜色"></font> 备注： color属于font标签的属性

改变文字大小<font size="具体数字"></font> 备注： size属于font标签的属性

实现文字加粗效果：<strong></strong> | <b></b>备注strong标签在语义性方面比b标签要更合适

实现文字下划线标签：<ins></ins> | <u></u>

实现文字斜体显示标签：<em></em> | <i></i>

实现删除线效果标签：<del></del> | <s></s>

边框: border

border-color: 边框的颜色

border-style: 边框的样式

border-width: 边框的宽度

超链接标签

<a href="路径">文本</a>　target="_blank" →添加这个属性页面会在新的页面打开　

例如：<a href="https://www.baidu.com/">跳转到百度首页</a>

属性介绍：

href: 设置要跳转页面的路径

target：设置新页面打开方式

该属性默认值就是在当前窗口中打开新页面 self

如果希望在新窗口中打开新页面， blank （跳转到另一个页面）

如果我们希望在跳转页面的时候，不加target属性，也要实现在新窗口中打开新页面？

只要在 head标签中添加一个base标签即可

title：设置鼠标悬停到超链接上的文字提示

例如：<a href="https://www.baidu.com/" title="我是超链接">跳转到百度页面</a

总结：

超链接的本质就是用来实现页面跳转的

在超链接中，如果要从a（本页面）跳转到b(目标页面)，那么在href属性中设置的就是目标页面b的路径

如果在超链接中，不跳转到其他页面，那么href属性中只要设置一个“#” 或者本页面的路径地址即可

图片标签

<img>

写法：<img src="图片路径">

属性：

src: 设置要显示图片的路径【绝对路径| 相对路径】

title: 设置鼠标悬停到图片上的文字提示

设置标签宽度

height: 设置标签高度

alt：描述图片信息，为搜索引擎提供服务的。

注意：

由于图片标签在浏览中也是以多媒体形式渲染出来的，具有固定的宽高比例。

如果我们遇到需要改变多媒体标签大小的时候，一般推荐只设置一个值。

Link标签

在设置网页图标的时候能使用img标签

如果要实现设置网页图标，那么需要使用link标签

设置网页图片的正确写法：

<link rel="icon" href="favicon.ico">

注意事项：

1. 网页图标签的格式最好是 ico格式的。

2. favicon.ico 图标直接放到网站的根目录下

3. link标签要在head标签中使用

列表

无序列表 : <ul><li></li></ul>

有序列表 : <ol><li></li></ol>

自定义列表：<dl><dt>自定义列表的标题<dt><dd>l列表项,与li标签的用法一样</dd></dl>

有序列表的属性:

reversed: 值 reversed 规定列表顺序为降序

start: 值 munber 规定有序列表的起始值

type: 值 1 A a I i 规定列表中使用的标识类型

表格

行：<tr></tr>

列：<td></td>

标题：<th></th>

border : 设置表格的边框

cellpadding: 设置表格内容的padding值的

align: 设置文字居中位置的 [如果设置给table的话是表格居中]

设置这个表格的宽度的

cellspacing: 设置表格单元边界与单元内容之间的间距

给table表格的tr行加border边框

直接设置 tr { border-bottom: 1px solid red} 这样没有效果

只需要给table增加一个属性就可以了

 table{ border-collapse:collapse; }

添加这个样式后就可以给tr单独设置(上下)边框了

关于属性 border-collapse的取值、解析

separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。

collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

-inherit 规定应该从父元素继承border-collapse 属性的值。

详细属性介绍：

☞ 设置边框 border： 0 | 自定义值;

☞ 改变表格大小： width：设置宽度 height: 设置高度

☞ 改变单元格与table之间的距离： cellspacing： 2 | 自定义值；

☞ 如果希望表格中设置内容的对齐方式可以给 tr 或者 td 设置 align属性

align= left | right | center

☞ 如果希望整个表格设置对齐方式，需要给table 设置 align属性即可。

☞ 设置单元格中内容与边框之间的距离： cellpadding。注意该属性是给table标签设置的。

☞ 设置背景颜色： bgcolor

表格中的其他标签介绍：

☞ 设置表格表头 <th></th> 用法与td一样

<table>

<caption>标题</caption>

<tr>

<th>表头</th>

<th></th>

</tr>

</table>

☞ 设置表格标题标签： <caption></caption>

合并单元格：

横向合并（跨列合并）： colspan="值"

纵向合并（跨行合并）： rowspan="值";

emmet语法： {table[border="1" width="600" height="400" cellspacing="0"]>tr*8>td*8} +tab

表单

组成:

提示信息表单控件表单域

表单域 <form></form>

普通表单:<input type="text" name="username">

密码表单:<input type="password" name="pwd">

普通表单和密码表单的属性:

name: 设置当前控件的名称

value：设置当前控件的默认值

placeholder：占位符[虚隐文字]【当前控件的一个提示信息】【重点掌握】

id: 设置当前控件唯一标识的属性【身份证】

readonly：设置当前控件为只读模式【当前控件只能看一看，不能输入】

disabled：设置当前控件不能输入

maxlength：设置当前控件最多能输入多少个字符

autofocus: 自动获取焦点

提交表单:<input type="submit" name="btn">

属性: action：用来指定当前表单控件中的数据要交给哪个后台文件去处理

method：用来指定一种数据提交方式【选择一种交通工具去北京一样】

method： get | post

get: 这种方式提交数据的时候，会将数据在地址栏中显示【安全性差】

post: 这种方式提交数据的时候，数据会以后台的形式提交给文件【安全】

单选控件: <input type="radio">

属性: checked：设置当前控件默认选中

注意：

默认单选控件不能实现单选效果

只要给单选空件设置相同的name值即可。

多选控件: <input type="checkbox" checked>

多选控件中设置默认选中项的属性与单选控件一样

下拉列表框: <select multiple>

<option>河北</option>（多个）

</select>

属性:

selected: 设置下拉列表框中的默认选中项

multiple：可以实现多选效果

Label : 标记直接作为默认选项

多行文本框(域): <textarea></textarea> 属性:resize:none 禁止拖拽

　　可拖拽的文本框

上传控件: <input type="file">

按钮系列：

☞ <input type="submit"> 就是用来提交表单数据的

☞ <input type="image" src="按钮.jpg"> 用来提交表单数据

☞ <input type="button" value="按钮"> 不能提交表单数据，和js配合使用

☞ <input type="reset"> 将控件中的值恢复到默认值

legend: 标题给form标签上用的

fieldset: 包裹form标签用

实体字符

CSS

letter-spacing 设置字符间距单位(px em)

text-align: left | right | center (设置内容[文字和图片] 的对齐方式)

text-indent: 设置文本首行缩进

text-decoration: none (去掉下划线)

text-decoration: underline;(设置下划线)

推荐类命名：

☞ 选择有语义的单词或者拼音

☞ 推荐使用一些已经固定下来的类名：

.title(标题) .content(内容) .logo(商标) .nav(导航) .aside(侧边栏)

font属性

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-weight:bold; /*文字粗体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

text属性

text-decoration:line-through; /*加删除线*/

text-decoration: overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

设置元素在垂直方向的对齐方式

①在网页中所有的行内快元素都有vertical-align默认属性

②vertical-align可以解决网页中插入图片底部3像素的空白

　　1.vertical-align的值不是默认的baseline就可以

　　2.将图片转换成块级元素也可以

③在网页中实现图片垂直居中

　　1.先设置行高等同于容器的高度

　　2. 设置图片的垂直对齐方式 vertical-align: middle

font-size: 改变文字大小

font-family 改变文字字体

使用字体汉字对应的英文名称：

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

font-weight: normal(700) | bold(400) [表示文字是否加粗]

font-style:normal | italic (设置文字是否斜体显示)

line-height 设置文字的行高（改变文字的上下间距）

css特性

1. 层叠性：

li+li(相邻选择器)， li~li(兄弟选择器) 这样的选择器的意思是：同一父级选择器下的同级选择器，除第一个li的样式

 li{
　　 100px;
   height: 20px;
   background: red
   }
 li+li {
   background: pink
   }

　/* li~li {

　　background: pink

　　} */

【选择器的优先级相同的情况下】在CSS代码中，如果多个选择器同时指向同一个标签，并且其样式发生冲突，那么最后定义的样式会将前面定义的样式给覆盖掉。

2. 继承性：

保证html标签之间属于嵌套结结构。

继承性：如果在默认情况下没有给子元素定义任何样式，那么该子元素的样式会受父元素样式的影响

3. 优先级：

标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important

　　10 　　　100 　　　1000 　　10000 　　 10000以上

优先级特点:

1. 继承的权重为0

2. 权重【优先级】叠加

标签显示模式

一、块级元素：

代表：

div ，p， ul，ol，li，h1-h6....

特点：

1. 所有的块级元素都会独占一行显示

2. 块级元素可以直接设置宽度和高度【独占一行显示与宽度无关】

3. 如果一个块级元素没有设置宽度，那么其默认宽度等于父元素的宽度。【宽度，高度,背景颜色不能继承】

二、行内元素：

代表:

span， a， strong，em，font，b，s，i....

特点：

1. 所有的行内元素都在一行上显示。

2. 行内元素没有宽度和高度【不能设置宽度和高度】

三、行内块元素：

代表：

img、input、select、button...

特点：

1. 与行内元素一样所有的元素都在一行上显示。

2. 与块级元素一样可以设置宽度和高度

元素模式转换　　　　　　　　

1. 转换为块级元素： display: block;(元素显示)

2. 转化为行内块元素： display: inline-block;

3. 转换为行内元素： display: inline;

元素隐藏

　visibility:hidden(元素隐藏占位置)

　display:none (元素隐藏脱标不占位置)

添加滚动条

overflow-

css伪类选择器

:link{ } 设置超链接的默认样式

:visited{ } 设置被访问过后的样式 (只能设置与颜色相关的属性)

:hover{ } 设置鼠标悬停到标签上的样式

:active{ } 设置标签激活状态下的样式(鼠标按下时的样式)

背景相关属性

background-image:none | url(“图片路径”) 设置背景图片

background-repeat: repeat(平铺) | no-reoeat(不平铺) repeat-x | repeat-y (设置背景图片是否平铺)

background-position：设置背景图片位置(也可以设置具体值) left | right | top | bottom | center

　　精灵图作为背景图片设置给元素

　　通过方向移动精灵图的位置

background-size: contain/ cover

值	描述
background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-origin	规定背景图片的定位区域。
background-clip	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-image	规定要使用的背景图像。

background-size值(规定背景图的尺寸)	描述
*length*	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
*percentage*	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-position值 (规定背景图的位置)	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

多背景写法: 一个标签可以同时设置多个背景图片。
在设置多背景图片的时候，多个背景图片之间使用逗号隔开。

☞ background-size属性：  通过该属性可以设置背景图片的大小。
      1. 可以设置具体值
          background-size: 400px 400px;

      2. 可以设置 cover：  
         通过设置cover值后，可以让背景图片按照原来缩放比，将整个盒子沾满。
    
      3.  可以设置contain：
         通过设置contain值后，可以让背景图片按照原来的缩放比，将背景图片完整的显示到父容器中。

☞ background-origin属性：调整背景图片在盒子模型中开始显示的位置
      默认值：padding-box （代表背景图片从padding区域左上角开始显示）
            content-box （代表背景图片从内容区域开始显示）
             border-box   （代表背景图片从整个盒子左上角开始显示）
      
☞ background-clip属性： 设置背景图片在哪块区域中显示

     默认值： border-box (代表背景图片要在整个盒子范围内显示)
             content-box（代表背景图片只会在内容区域显示）
            padding-box（代表背景图片在内边距区域显示【包括内容区域】）

盒子模型边框

盒子在网页中就是用来实现显示内容[盒子就是网页布局]

盒子模型的组成 :

内容区域(content)
边框( border )
内边距(padding)
外边距(margin)

border-style：设置边框样式 solid 实现边框 dotted 点线边框 dashed 虚线边框

border: 0; // 去除未选中状态边框

outline: none; // 去除选中状态边框

盒子模型外边距

外边距: 改变当前戒子的位置

外边距的特点:

外边距不能改变盒子的大小
垂直外边距塌陷【当给子元素设置上边距的时候，如果父元素也随之改变位置，给父元素设置边框，给父元素设置 overflow：hidden ---触发了浏览器中的bfc[格式化上下文】
【垂直外边距合并】：最大外边距设置的值为准。

边框圆角

border-radius: 水平半径/垂直半径(如果只设置一个值得话代表水平和垂直)

注意:

如果垂直半径和水平半径相等那么垂直半径可以不用设置
border-radius: 50% （圆）

盒子阴影

box-shadow: 设置阴影水平方向的偏移量设置垂直方向的偏移量模糊度阴影颜色

box-shadow： 10px 10px 10px red;

水平偏移和垂直偏移都可以设置正负数，正数在水平方向代表向右移动，在垂直方向代表向下移动

负数在水平方向代表向左移动，在垂直方向代表向上移动

模糊度不能设置为负数

可以给一个盒子同时设置多个阴影，使用逗号隔开就好

box-sizing: border-box 设置该属性后，浏览器中盒子的实际大小就是我们设置的宽度和高度大小

box-sizing: content-box 设置该属性后，浏览器中盒子实际大小 = 内容区域大小 + 内边距 + 边框

行高居中 line-height

line-height只对文字有影响

一般在网页中实现文字垂直方向居中设置line-height = 当前容器的高度即可

如果一个标签没有设置高度，那么该标签中的文字行高可以把标签撑开

行高 = 文字大小 + 上间距 + 下间距

默认行高 18px = 默认文字大小 16px + 1px + 1px

文字有四条线: 顶线、中线、基线、底线

伪元素 : 假的html 标签【万能的元素】

::before(在...之前) 和 ::after (在....之后)

使用 ::before 和 ::after 的时候必须添加content(内容) 属性

伪元素默认就是按照行内元素显示

伪元素在使用上没有任何区别，只有在 html 结构中有区别，::before 代表的就是第一个开始的子元素, ::after 表示最后一盒子元素

伪元素中不能继续嵌套伪元素

代码 : clearfix 类名

.clearfix:before，.clearfix:after {

content： ""；

display： block；

clear：both；

}

.clearfix {

zoom： 1；}

浮动 float: left 左浮动 float:right 有浮动

特点:

当我们在网页布局中如果希望块级元素在一行上显示的时候，就给这些块级元素设置浮动
浮动可以实现让元素脱标不占位置
浮动可以实现模式转换的效果

浮动的使用:

网页布局中【画盒子】的时候，块级元素在一行显示使用浮动
在网页中，导航要使用浮动配合列表实现
如果只是用给行内元素设置宽度或者高度，不推荐使用浮动，还是使用模式转换

清除浮动( 清除浮动元素对后面元素的影响 )

清除浮动的方法:

使用 clear 属性清除浮动

clear: left(左) | right(右) | both(两者都)

在浮动的元素后边直接添加一个空标签 [必须是块级元素]

选中还空标签使用 clear:both

例子:

<div class="clearfix"></div> // 添加的标签

.clearfix { // 设置的属性

/*清除浮动*/

clear: both;

}

使用伪元素清除浮动:

.clearfix::after {

content: "";

display: block;

clear: both;

height: 0px;

line-height: 0px;

/*将该元素隐藏*/

visibility: hidden;

}

.clearfix {

/*兼容IE*/

zoom: 1;

}

以上清除浮动的代码要让浮动元素的父元素去调用

不要设置完浮动后就清除浮动，要满足一下两个条件

如果父元素没有设置高度
该父元素中所有子元素都设置了浮动

给父元素设置 overflow: hidden; overflow: hidden;可以将超出父元素的部分进行隐藏 // 不推荐使用

元素的隐藏/显示

隐藏/显示元素

display: none // 隐藏元素隐藏元素不占位置

display: block // 显示元素

visibility: hidden // 隐藏元素隐藏元素后占位置

overflow: hidden // 只能将超出父元素的部分进行隐藏

overflow 的默认值是visible

　　visible 默认值. 内容不会被修剪, 会呈现在元素框外

　　hidden 内容会被修剪, 并且其余内容是不可见的

　　scroll 内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容

　　auto 如果内容被修改, 则浏览器会显示滚动条以便查看其余的内容, 内容不超出不会添加滚动条

　　inherit 规定应该从父元素 overflow 属性的值

定位

静态定位

position: static 无法通过静态定位的方式改变元素的位置

由于在页面渲染过程中, 浏览器会将静态定位的元素按照标准流元素默认的方式去显示[静态定位的元素属于标准流元素]

　页面里显示的顺序和代码里的顺序一致就是符合标准流的

　　若是给上面的标签加上浮动或定为属性，就可能脱离标准流

绝对定位

position: absolute

①绝对定位的元素可以改变元素的位置可以通过 left right top bottom 来改变元素的位置

②一个绝对定位的元素首先会参照其父元素进行位置改变, 如果其父元素没有设置定位[出静态定位], 那么该绝对定位的元素会参照浏览器左上角[body]进行位置改变

③决定定位的元素是一个脱标不占位置的元素

④绝对定位可以实现模式转换的效果

相对定位

position: relative

①相对定位可以改变元素的位置通过 left right top bottom 来改变元素的位置

②相对定位的元素只会相对元素自己原来的位置进行定位[与父元素是否是定位元素无关]

③相对定位的元素没有脱标, 占位置

④相对定位的使用: 只要子元素设置了绝对定位, 那么就要给其父元素设置相对定位[ 子绝父相 ]

固定定位

position: fixed

①固定定位可以改变元素的位置通过 left right top bottom 来改变元素的位置

②固定定位的元素时钟是以 body 标签左上角来定位[浏览器可视区域左上角] {与父元素是否有定位无关}

定位层级关系

①z-index 属性就是用来改变元素的层级关系的

②只要定位(出静态定位)的元素才有层级关系, z-index 属性只能和定位元素配合使用

③如果一个元素是定位元素（除去静态定位），那么该元素的默认z-index的值是auto[认为auto=0]

④ 如果z-index值相同，那么最后的定位元素会压着前面的定位元素【后来居上】

⑤ 通过设置z-index值，改变元素之间的层级关系，z-index值越大层级越高。

⑥ 如果父元素中共存在定位层级关系，那么只会看父元素中z-index值的大小。

结构伪类选择器

一、 :first-child { } 选中父元素中第一个子元素 　　

#app:first-child {} // 选中父元素的第一个子元素
#app:first-child span {}  // 选中父元素中的第一个子元素是 span 的标签

二、:last-child{}

#app:last-child {} // 选中父元素的最后子元素
#app:last-child span {}  // 选中父元素中的最后子元素是 span 的标签

三、:nth-child()

:nth-child(n) {} // 选中第n个元素
ul:nth-child(n) li{} // 选中ul里的第n个li
#app:nth-child(odd) {}  // 选中父元素中奇数
#app:nth-child(odd) {}  // 选中父元素中偶数
 如果在结构伪类中给n设置值的时候，n可以是一个具体数字n也可以是一个表达式： an+b

选择器	例子	例子描述	CSS
.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
*element*	p	选择所有 <p> 元素。	1
**element,element**	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
**element element**	div p	选择 <div> 元素内部的所有 <p> 元素。	1
**element>element**	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
**element+element**	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2
*[attribute]*	[target]	选择带有 target 属性所有元素。	2
*[attribute=value]*	[target=_blank]	选择 target="_blank" 的所有元素。	2
*[attribute~=value]*	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
*[attribute\|=value]*	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个 <p> 元素的首字母。	1
:first-line	p:first-line	选择每个 <p> 元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。	2
:before	p:before	在每个 <p> 元素的内容之前插入内容。	2
:after	p:after	在每个 <p> 元素的内容之后插入内容。	2
*:lang(language)*	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
**element1~element2**	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。	3
*[attribute^=value]*	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
*[attribute$=value]*	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
*[attribute*=value]*	*a[src="abc"]**	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 <input> 元素。	3
:disabled	input:disabled	选择每个禁用的 <input> 元素	3
:checked	input:checked	选择每个被选中的 <input> 元素。	3
*:not(selector)*	:not(p)	选择非 <p> 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

伸缩布局

Flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

flex-direction 设置主轴方向

flex-wrap 是否换行显示

flex-flow

justify-content 主轴对齐方式

align-items 定义项目在交叉轴上如何对齐

align-content 侧轴对齐方式

☞ 伸缩盒子设置：

1. 如果要实现伸缩盒子布局，那么先将父元素设置为伸缩盒子

2. 给父元素设置：display: flex;

3. 在伸缩盒子中，具备两条轴。一条是主轴（默认是水平显示）。，另外一条是侧轴（始终要垂直于主轴）

4. 由于在伸缩盒子中，所有的元素都是按照主轴方向显示的，所以在伸缩盒子中，所有的子元素默认都是在一行上显示。

设置主轴方向（flex-direction）

flex-direction属性决定主轴的方向（即项目的排列方向）。

row（水平显示） | column （垂直显示）

/* 设置主轴的方向 */

flex-direction: row;

flex-direction: column;

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

☞ 主轴方向对齐方式（justify-content）

justify-content属性定义了项目在主轴上的对齐方式。

/* 设置元素在主轴的对齐方式 */

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

/* 两端对齐，中间居中自适应 */

justify-content: space-between;

/* 元素周围以空白环绕显示 */

justify-content: space-around;

lex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

☞ 侧轴方向对齐方式（align-items）

align-items属性定义项目在交叉轴上如何对齐

/* 设置元素在侧轴的对齐方式 */

align-items: stretch; 默认值

align-items: flex-start;

align-items: flex-end;

align-items: center;

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

☞ align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

☞ 是否换行显示（flex-wrap）

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

注意：

在伸缩盒子中，盒子默认是一行显示

/* 控制子元素是否换行显示 */

flex-wrap: nowrap; 不换行显示

flex-wrap: wrap; 换行第一行在上方

flxe-wrap:wrap-revese; 换行第一行在下方

☞ 伸缩比

flex: 值；

总结：

1. 先将flex设置的值相加，得到的结果就是将整个父元素平分的结果。

2. 每一个子元素设置的flex的值，就是对应的所占比例值。

3. 该属性是给子元素设置的。

一个盒子要想水平垂直居中就要给 html,body 设置高度(height)100% 在把主轴和侧轴设置成center

过渡

过渡：属于动画的一种。【补间动画】

帧动画

补间动画

:hvoer

☞ 属性介绍：transition

1.transition-property: 设置属性以动画效果执行。 all | 具体的属性

2.transition-duration: 设置动画执行时间例如： 2s 3s。。。。

3.transition-delay: 设置动画延时执行的时间

4.transition-timing-function：设置动画速度类型 ease | linear | ease-in | ease-out | ease-in-out

☞ 总结：

1. 在动画效果中，开始状态中的属性一定要与结束状态中的属性一一对应。

2. transition 的合写方式：

例如： transition: all 2s linear 5s;

或者分步执行动画效果：

transition: width 1s linear,

height 1s linear 1s,

background-color 1s linear 2s;

transition 可以放到开始状态中也可以放到结束状态中。

渐变

渐变使用的属性就是 background-image。

线性渐变

.line {

height: 100px;

/*线性渐变语法*/

background-image: linear-gradient(

/*渐变的方向： to + 方位名称（left| right| top| bottom）*/

to right,

/*设置渐变的开始颜色*/

red,

/*设置渐变的结束颜色*/

blue

);

}

如果想从左上角或者其他方向可以使用角度(deg角度单位)

如果不想要渐变的混合色给颜色加百分比

.right {
  background-image: linear-gradient(red, red 33.33%,blue 33.33%,blue 66.66%, pink 66.66%, pink);
}

径向渐变

background-image: radial-gradient(

/*100px代表半径

center 代表圆心点位置*/

100px at center,

red,

blue

);

重复径向渐变

background: repeating-radial-gradient(red, yellow 10%, green 15%);

2D转换

1. 位移【让元素移动位置】 transform: translate(值);

2. 缩放【放大缩小】 transform:scale(值)

3. 旋转【转圈】 transform: rotate(角度的单位值)

倾斜 transform:skew(角度的单位值

transform-origin: bottom(底部) 旋转元素的基点

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

3D转换

☞ 位移

1. transfrom: translateX(值); 正数代表向右移动，负数代表向左移动

2. transform:translateY(值); 正数代表向下移动，负数代表向上移动

3. transform:transalteZ(值)；正数代表朝向我们自己移动，负数代表背向移动

☞ 旋转

1. transform: rotateX(值deg)；

2. transform: rotateY(值deg);

3. transform: rotateZ(值deg);

左手法则

☞ 缩放

1. transform: scaleX(2)

2. transform: scaleY(2)

注意:参数是倍数

☞ 转换为立体效果：

transform-style: preserve-3d;

动画

☞ 与过度的区别：

1. 过度动画行为需要有用户的操作过程（鼠标悬停，点击按钮动作【js】。。。。）

2. 今天的动画animation不需要用户的操作

☞ 语法：

1. @keyframes 自定义动画名称 {

from {

}

to {

}

2. 通过动画名称调用动画集

animation-name：动画集名称。

3. 属性介绍：

/* 1. 通过动画集名称调用动画 */

animation-name: box_move;

/* 2.设置动画执行时间 */

animation-duration: 1s;

/* 3. 动画默认执行次数是1次, infinite: 无限次 */

animation-iteration-count: infinite;

/* 4. 设置动画的速度类型: ease ; */

animation-timing-function: linear;

/* 5. 设置延时执行时间 */

animation-delay: 2s;

/* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 normal*/

animation-direction: alternate;

/* 7. 设置动画执行完后的一个状态: 让动画停在结束时候的状态 */

animation-fill-mode: forwards;

/* 8。动画播放状态设置： running | paused暂停 */

animation-play-state: paused;

4. animation复合写法：

例如： animation: box_move 1s linear 2s alternate forwards;

注意：

1. 一个元素可以同时调用多个动画集，使用逗号隔开。

例如：

animation: box_move 1s,

one 1s linear 1s,

three 2s ease 5s alternate;

2. 可以将一个完整的动画分割成若干个阶段执行

@keyframes one {

0% {}

10% {}

20% {}

...

100%{}

}

注意：

百分比是相对整个动画执行时间而设置的。

HTML提升语义化标签

header 头部 (顶部)

nav 导航 ( 就是导航条)

section 主体

aside 侧边栏（写在主体里边的）

article 内容区域（写在主体里边的）

footer 底部(页脚)

1. 以上语义标签与div标签的用法一模一样

2. 区别就是以上语义标签在描述网页布局（结构）上所描述的语义性更加明确

3. 语义标签的兼容性不是特别好尤其是对pc端浏览器【通过js动态创建元素的方式可以解决】

以上标签在IE9 以下就有兼容问题，解决方法使用一个插件 html5shiv.js

html5shiv.js 用法

// 条件注释 就是用户浏览器版本过低 给用户提示
<!--[if lt IE 9]>
　　<script src="html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
　　<h1>您的浏览器版本过低，请及时升级！！！</h1>
<![endif]-->

条件注释的意思是当满足条件的时候注释内容才会去执行

lte 的意思是小于等于 gte大于等于 lt小于 gt 大于

HTML5提升 --- 表单元素属性

当 input 中有name属性时，浏览器会自动记录你之前提交过的东西

当你再次输入的时候，会自动掏出提示自动填充如果不想要自动填充的话给 input 添加 autocomplete=“off”属性就可以了

autocomplete 设置是否使用自动填充如果设置在form上针对的是整个表单 | 设置在input上那么只针对这个元素

required 必填属性加上后 input必须输入内容

novalidate 是否进行整个表单的效验

视差滚动: 是元素以不同的速度滚动，形成的视觉上的层次感

插件 jquery.stellar.js 实现视差滚动

background-attachment: fixed; // 固定背景图实现视觉差

navigator.userAgent获取系统和浏览器的相关信息

target="_blank"

表单控件

<input type="number" step="5" pattern="">： 该控件只能用来输入数字
属性： step="值"； 设置当前控件累加的值或减少的值。
pattern="正则表达式" 通过正则表达式可以实现灵活的控制输入框中能输入哪些数据类型
  <input type="url">： 只能输入合法的网址
  <input type="email">: 设置用户只能输入合法的邮箱地址
  <input type="date">： 在网页中显示日期控件
  <input type="week" name=""> 显示一年中的第几周
  <input type="time"> 显示24小时内的时间
  <input type="month" name=""> 显示第几个月
  <input type="range"> ： 通过用户拖动控件实现选中值的大小
属性：
min: 规定允许的最小值
max: 规定允许的最大值
value: 规定默认值
step: 每多拽一次滑块，里面值要累加多少或者减少多少

<datalist></datalist>
使用：
<input type="text" name="" list="myList">
<datalist id="myList">
  <option value="IT程序入门" label="大约有20个空位"></option>
  <option value="挖掘机入门" label="大约有2台机器"></option>
  <option value="美容美发入门" label="大约每有假头"></option>
</datalist>

表单属性

☞ required：      实现让表单空键的值不能为空【必须填】
   例如：<input type="text" name="" placeholder="请输入用户名" required>
☞ autocomplete： 将用户提交过的数据进行缓存
   注意：
      1. 该属性可以给form标签设置
      2. 浏览器中该属性的默认值： on | off

     <form action="1.php" autocomplete="on">
        <input type="text" name="um" placeholder="请输入用户名" required>
        <input type="submit" name="">
    </form>
     
☞ novalidate： 取消验证
    注意：
         1. 该属性要给form标签设置
         <form action="1.php" autocomplete="on" novalidate>
            <input type="email" name="">  ---加上novalidate属性后，该邮箱地址不会进行是否合法验证
            <input type="submit" name="">
         </form>
☞ placeholder： 占位符 【输入框的提示信息】
☞ autofocus： 自动获取焦点

属性选择器

属性选择器： 根据标签的属性选中对应的标签

☞ 写法：
    [属性] { 属性:值; ...  }
        
    1. 
       /*将页面中所有标签具有class属性的标签选中*/
        [class] {
             200px;
            height: 200px;
            background-color: red;
        }

    2. 
       /*将页面中标签既具有class属性并且class属性的值是one的标签选中*/
        [class="one"] {
             200px;
            height: 200px;
            background-color: pink;
        }

    3. 
       /*将页面中具有class属性且class属性中的值包含o的标签选中*/
        [class*="o"] {
              200px;
            height: 200px;
            background-color: red;
        }

     4. 
       /*将页面中标签具有class属性且class属性值以o开始的标签选中*/
       [class^="o"] {
            200px;
           height: 200px;
           background-color: red;
       }

      5. 
        /*将页面中标签具有class属性且class属性值以o结束的标签选中*/
         [class$="o"] {
             200px;
            height: 200px;
            background-color: red;
         }

目标伪类选择器

写法: 
    :target { 属性: 值}
例如
 当使用锚链接指向该标签的时候设置样式
      p:target {
             color: red;
      }
 总结：
      1. 目标伪类选择器要和锚链接配合使用。

::selection选择器

::selection 实现鼠标选中段落文字时候的样式。

/*设置当鼠标选中p标签中的文字时候改变样式*/
        p::selection {
            color: red;
            background-color: pink;
        }
    注意：
       在该选择器中只能设置与颜色相关的属性。

多媒体标签

<video></video> 在网页中来展示视频的

属性	值	描述
autoplay	autoplay	如果出现该属性, 则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	*pixels(像素)*	设置视频播放器的高度
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
src	url	要播放的视频的 URL。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
width	*pixels(像素)*	设置视频播放器的宽度

<audio></audio> 在网页中展示音频

属性	值	描述
autoplay	autoplay	如果出现该属性, 则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	*pixels(像素)*	设置音频播放器的高度
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定音频的音频输出应该被静音。
poster	URL	规定音频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
src	url	要播放的音频的 URL。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
width	*pixels(像素)*	设置音频播放器的宽度

文字阴影

text-shadow

值	描述	位置
h-shadow	水平阴影的位置。允许负值	第一个参数
v-shadow	垂直阴影的位置。允许负值。	第二个参数
blur	模糊的距离	第三个参数
color	阴影的颜色	第四个参数

字体图标库

https://www.iconfont.cn/ 阿里巴巴矢量图标库

相关阅读:
HTML表格和列表笔记&练习<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于表格的一些练习</title> </head> <body> <p>一个普通基本的表格</p> <table border="5&
HTML中的CSS类型
 html关于图片和链接的笔记
 实现窗体背景透明
 HTML控件篇 -- input
AngularJs的$http使用随笔
 Win7启动修复（Ubuntu删除后进入grub rescue的情况）
2013年9月30日我的博客园开通啦
 将excel表格导入到DataGridView
c#中，点击一个菜单项后调用exe文件
原文地址：https://www.cnblogs.com/maxiag/p/10318471.html