HTML+CSS篇笔记

HTML篇

ctrl+F按照关键字查找需要的内容

网页的组成：

结构（HTML）、样式(CSS)、行为(js)

HTML:超文本标记语言

ECMA:管JS

W3C:管HTML,CSS

xhtml:扩展超文本标记语言

HTML5:HTML的第五代

建立站点：

• 规划所有的资源和代码
• 整合资源

主要标签

<标签 属性=“值”>
双标签，也叫常规标签
<标签 属性=“值”/>
单标签，也叫空标签

单双引号是成对出现的

常用标签：

标题标签：
h1~h6，默认加粗变大，独占一行，依次变小

倾斜标签：
i/em:在一行内显示，默认倾斜
i是视觉效果上的倾斜，em是倾斜体（强调作用）



加粗标签：
b/strong:加粗标签，默认文本加粗，在一行显示，strong强调 作用



下划线标签：
u,在一行内显示



功能标签：
br换行，hr水平线



上下标：
sup:上标；sub:下标


段落标签:
单独占据一行，里面不能嵌套块元素，div,p,a,h

转义字符：

 :空格
>:>
<:<
© ©

路径：

目录文件夹：
普通的项目文件夹
根目录：
打开文件夹的第一层
绝对路径：
从盘符开始往下
相对路径：
图片相对于HTML的位置。

./强调在这一级；…/返回上一级

列表：

1. 无序列表：
   独占一行，默认显示实心圆点修饰符
   
   
   设置修饰符type="circle/square/disc"
   
   
   取消修饰符style="list-style:none;"
   
   一般用来做导航或列表
2. 有序列表：
   独占一行，默认阿拉伯数字修饰单元格

start="起始序号"；
type="a/A/i/I/1"		//修改修饰符
style="list-style:none";	//删除修饰符

一般用来做导航或列表

3. 自定义列表：
   单独占据一行，一个dl包含一个dt和多个dd
   一般用于做双导航
   
   
   

超链接：

目标：实现应用之间的跳转

a>
target = "_new"在新页面刷（很久没点击会打开新页面而不是在新页
				面刷新）
		="_self"当前页面刷新
		="_blank"打开新页面
title="鼠标悬停提示文本"

图片标签：

图片常见格式：png,jpg,gif

文件夹的命名：
数字字母下划线美元符号中划线，第一个不能是数字

div

盒子标签：单独占据一行，结合CSS搭建页面结构

表格：

table>tr>td
属性：

border:边框
bordercolor：边框颜色
BgColor:背景颜色
width：
height：
cellspacing：单元格间隙
cellpadding:边框与内容之间的间距
align：center,left,right对齐方式（写在表格上是表格相对于窗口的位置）
valign:top/bottom/middle垂直对齐方式
colspan:跨行对齐
rowspan:水平对齐

th:
加粗居中的td

建议不要省略tbody

表单标签：

<form action="提交地址">
<input type=""	name="" value=""/>
type属性值：text,password,button,submit,reset
value的属性值：值
name = "名字"  提交的数据的名字
form>

注意事项：

1. input写在form里面
2. List item
3. 按钮属性value
4. 需要提交的写上name
   
   
   
   POST和GET的区别：
   POST非明文提交，不在地址栏输出，没有长度限制，不会丢失数据，数据安全，但速度慢
   GET铭文提交，有长度限制，可能会造成数据丢失，数据不安全，一般提交数据较短，提交速度快

CSS篇：

span标签：容器标签，没功能***包裹文本，给文本添加样式***。



样式分类：外部样式，内部样式，行内样式

外部样式：

创建方式：

1. 生成独立的CSS文件，第一行写：

@charset "utf-8";

2. 在head标签中加入
3. 在外部样式表中选中对应的元素添加样式

开发中不建议使用@import的引入方式

@import和link的区别：

1. link是标签，后者是CSS自带的一种写法
2. 同时加载结构代码和link，后者是先加载结构再加载CSS（加载顺序）
3. JS能控制link，但是不能控制后者
4. link不存在兼容性，后者老版本不支持

内联样式（行内样式）：

写在标签内

内部样式：

写在style标签里面

三种样式的权重：

1. 内联》内部》外部
2. 作用范围越大，权重越小
3. 同一样式与书写顺序有关
4. 内部样式和外部样式和书写顺序有关，后写优先级高
   
   
   
   
   

选择器：

1. 类选择器（class选择器）：

.类名 {
     
	键：值
}

2. ID选择器：

#id {
     
键值对；
}

4. 标签选择器：

div {
     
	height:80px;
}

5. 通用选择器：

* {
     
margin:0;
padding:0;
} 

6. 伪类选择器：
   :link
   :visited
   :hover
   :active

a:link {
     
	background:red;
}

谁靠后改变谁，谁加上选择器移入谁
7. 群组选择器：

选择器1，选择器2，选择器3 {
     
	各算各的，用到那个就算哪个的权重
}

9. 包含选择器（后代选择器）;

选择器 选择器  选择器 {
     
	键值对；
}

11. ！ important写在属性值后面，这样写优先级最高
    
    
    

选择器的权重

1. 行内样式》ID选择器》类选择器》标签选择器》通用选择器
2. 同种选择器看加载顺序
3. 样式冲突是看权重：通用（0）；标签（1）；ID（100）；行内样式（1000），和选择范围有关
   
   
   

CSS文本属性：

文字分为四条线：顶线，中线，基线，底线


两行文字之间的距离：上一行底线和下一行顶线之间也有间隙，测量元素高度（第一行文字顶部到第二行文字顶部，也称为行高）

颜色：color

值：颜色单词；16进制；rgb();rgba() ,a的范围0~1

字体类型：font-family

多个字体逗号隔开，单个单词不需要引号，多个单词或汉字需要引号，优先加载第一个字体，后面为备用字体。

字体大小：font-size

px:具体像素值
%：跟随父元素的大小
em:跟随父元素的大小，成倍数关系
rem:跟随根元素，与根元素大小成倍数关系
默认16px,最小限制12px
middle：16px

字体加粗：font-weight

bolder/bold/normal/100-900{取整百}

字体样式:font-style

italic/oblique/normal
italic是指斜体字，oblique是斜体效果（没有斜体字用这个）

行高：line-height

单位：px
行高小于高度值：偏上
行高大于高度值 ：偏下
不带单位和带%：需要乘以字体大小，从而得到行高为px
不能为负数

综合写法：

font：倾斜 加粗 文本大小/行高 字体类型；（文本大小之后的顺序不可调）

注意：
font-size：20px；
font:16px/16px arial;
显示为16px,但是font-size的值依旧是20px

首行缩进：text-indent

可以取负值
只对第一行起作用
2em代表缩进两个字符

水平对齐方式：text-align

注意：有四个值：left，center，right，justify（两端对齐）

文本修饰方式：text-decoretion

none：去掉修饰
underline：下划线
overline：上划线
line-through：中划线

字间距，词间距

letter-spacing：字符间距（汉字与汉字之间，英文字母之间拆开）
word-spacing：词间距（只对英文单词有效）

可以为负数：字间距，词间距，首行缩进

列表属性：

list-style：修饰符的形状
disc:circle,square
list-style-image:url(“图片地址”);//修饰符替代为图片
list-style-position：outside（默认），inside（都是相对于li来说的）
list-style-type：none等价于list-style:none

边框

border：大小 形态 颜色（没顺序）
border-left
border-left-style/width/color

利用边框写三角形：

先写个容器：宽高为0
border：20px solid transparent(或者rgba(0,0,0,0));
然后：border-left-style:red

背景属性：

background-color：背景颜色
background-image：背景图片
background-position：背景图片位置
关键字写法：left , center,right,top,bottom(水平和垂直都是center可以省略），具体像素（可以为负值）



background-size:背景定位（CSS3）
单位：px或者%（只写一个代表宽度，等比例缩放）
auto：不改变宽高
cover：等比例缩放填满整个容器，不会变形，某些部分可能无法显示
contain：缩放至某一边贴紧容器边缘



background-repeat:背景图是否重复
no-repeat，repeat-x，repeat-y,repeat

background-attachment:背景关联
scroll(滚动，默认)/fixed（固定）

背景的综合写法：

background:color image repeat position/size attachment;
position和size的顺序不能错误

常见错误：
background:url(),url()
前面一个不要设置颜色，不然报错

如何实现垂直居中

line-height：60px；
height：60px;

浮动：

float（浮动）：
值：left，right,none
作用：在一行显示
元素默认文档流：从上至下，从左至右
浮动影响：
脱离文档流，浮动元素会挨着父元素的边缘，浮动影响后写的元素，不影响先写的元素
相同方向：先浮动的显示在前面
不同方向：左浮找左浮，右浮找右浮

浮动的先后是取决于在文档流中的位置，和CSS样式的顺序无关

贴靠现象：浮动最后一个元素超过父元素剩下的宽度，会找上一个元素贴上去，还不够的继续找上一个，宽度超过父元素直接在最下面

浮动是不遮挡文字的

登高不等宽，等宽不等高的两个div可形成图文结合

CSS的属性继承：

不可继承的：

• display, margin,padding,border,background,height,min-height,min-width,max-width,max-height,overflow,position,right,top,bottom,z-index,float,clear,table-layout,vertical-align

所有元素可以继承：

• visibility和cursor

内联元素可以继承;

• letter-sapcing,word-spacing,line-height,color,font,font-family,font-size,font-style,font-vertical,font-weight,text-decoration,text-transform

块级元素可继承：

• text-align和text-indent

列表元素可继承：

• list-style及其子属性（type，position，image）

表格可继承：

• border-collapse
  注：a标签的颜色不可以通过父元素来修改继承

盒模型

标准盒模型:

• 内容区（content），填充（padding），外边距（margin），边框（border）
  怪异盒模型：
  特点：

• padding和border都在元素的宽高内部，不会把盒子撑大
  组成：
  内容区域;width,height,padding
  边框：border
  外边距：margin
  触发条件：

1. 条件1：

• 丢失,对于IE6,7,8

2. 条件2：

• box-sizing:是否为怪异盒模型
• content-box：标准盒模型
• border-box:怪异盒模型

触发怪异盒模型之后，在给元素添加border或者padding就不会把盒子撑大，也不需要去做减法了

也就是说占位高height+margin*2：

内边距

padding
padding-left:左内边距
padding-right:右内边距
paddingt-top
padding-bottom

综合写法;
padding:上下左右
padding:上下 左右
padding;上 左右 下
padding：上 右 下 左
特点：

1. • 顺时针方向
2. • 不能为负值
3. • 没有auto
4. • 会撑大父元素
     
     

外边距：

margin

综合写法与padding一致

• 顺时针方向；可以为负值；有auto，表示水平自适应让元素水平居中；不会撑大父元素
  
  到此可以为负数的：字间距，词间距，背景定位，首行缩进，外边距

盒子模型占位大小计算：

width= 左右内边距+左右边框+左右外边距
Height = 上下内边距+上下边框+上下外边距

垂直方向外边距相遇重叠（重点）：

加字符或者hr可以隔开，但是带来新的问题

并列关系：

只写一个方向的边距（不要写一个top,一个bottom，外边距集中在一个上）

嵌套关系：

可以通过父元素的内边距或者加边框阻隔（padding或border隔开）


水平方向是不会重叠的

也可以给父元素的第一格子元素加上浮动

overflow：hidden

文本溢出：

overflow:

值：

• visible显示
• hidden隐藏
• scroll滚动查看
• auto超出滚动
• inherit继承父元素overflow属性

overflow可以解决外边距溢出问题（子元素外边距设置大了超出），但是子元素超出部分被隐藏

给父元素加上hidden，可以解决外边距重叠，但是超出部分隐藏

div里面的数字和字母没有空格是不会换行的，被解析成一个单词

white-spacing 空白空间

• normal：默认值
• nowarp:强制不换行（遇到br还是得换行）
• pre：原格式输出（换行和缩进保留，在一行溢出也不换行）
• pre-line：原格式同时换行（换行是缩进的）
• pre-warp：原格式不缩进换行
  主要就是wrap和nowrap

text-overflow：文本超出

clip;裁减超出部分
ellipse：省略号(一般用这个)

省略号实现的三个步骤（记住）：

white-spacing：nowrap
overflow:hidden
text-overflow:ellipse
必须是单行文本才能设置文本溢出（多行文本可自行百度）

元素类型

分块级元素，内联元素，内联块元素（CSS2.1增加）

块级元素

block，如div，form，table，ul，li,dl等
特征：

• 单独占据一行
• 能设置宽高
• 能设置正常内外边距
• 矩形显示

内联元素

inline，如：span，a,i,em,textarea,select

特征：

• 在一行显示
• 不能设置宽高
• 能设置左右内外边距，不能正常设置上下内外边距
• 不是矩形显示

（上下外边距无效，上下内边距会遮挡文本或被文本遮挡）

内联块元素

inline-block，也属于内联（可以说只分两种，块级，内联）
img,input
特征：

• 在一行显示
• 能正常设置宽高
• 能正常设置内外边距
• 矩形显示

多个空格和换行解析成一个空格,想要实现多个可以借助之前说的转义字符和
标签

display的值

• block：块，还有是显示的意思
• inline：行内
• inline-block：行内块元素
• none：隐藏
• list-item:列表属性
• table，table-cell
• inherit

这里的隐藏是不占位置的

• 大部分的块级元素默认block，其中li为list-item
• 大部分内联元素为inline，其中input，img默认为inline-block

vertical-align

行内块和行内元素的对齐方式（并列关系，垂直对齐）
top/middle/bottom
作用：改变两个元素的垂直对齐方式

下面是最常用的情况：

• 父元素加上text-align：center
• 给当前元素转为行内块元素，再加上vertical-align:center
• 给同级加上span（需要inline-block属性），设置：

vertical-align:middle;
width:0;
height:0;
display:inline-block;

置换元素，非置换元素

置换元素：浏览器根据元素的属性和标签，来决定具体显示的内容
img依靠src,input依靠type决定（记住这两个就行了）

非置换元素：不是置换元素的元素

基线：英文字母的基线正好是小写字母x的·正下方

三种定位机制

普通流，浮动流，定位流

定位作用：改变元素的位置

position：static（默认），absolute，relative，fixed

• static：写不写无所谓
  
  
  absolute:绝对定位
• 脱离文档流（不占位）
• 会遮挡文字（和浮动的区别）
• 默认参考有定位的父元素，没有满足条件的父级元素就会参考浏览器窗口
• 可以为负值
• 元素大小有内容撑起来
  不设置坐标等同浮动效果（但会产生扑克牌堆叠效果）

参考点默认是浏览器的窗口




relative：相对定位

• 可以遮挡其他元素
• 占据文档流
• 设置坐标参考自身的初始位置（设置left，top实际效果为right，bottom）
• 不会破坏布局
• 设置left，bottom是参考自身的左下角
  
  
  
  sticky：黏性定位
• 结合了相对定位和绝对定位，平时在文档流中，滚动条滚动时（下拉一定程度），会粘在窗口上，一般看到的是导航栏
  left和top有效

二级导航：
ul>li里的li设置为相对定位，，包含ul>li，ul设置相对定位
鼠标划过去会display:none
尽量少用定位

包含块（父相子绝）

包含块就是为定位元素提供坐标，偏移和显示范围的参照物，最大为HTML
元素嵌套：
子用relative，父用absolute

定位元素层级关系：z-index

有定位元素才可以使用，值越大优先级越高，默认0/auto,可为负值

元素在浏览器居中的方法;

div{
     
	width:200px;
	height:200px;
	background:#f00;
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
}

	width：200px;
	height:200px;
	background:#f00;
	position:fixed;
	left:50%;
	top:50%;
	margin:-100px  0 0 -100px;

锚点链接

"#box1">
"box1">跳转位置

href里面装id选择器

宽高自适应

使网页更加灵活，适应不用窗口大小和设备等。

外边距最好不要自适应

要写百分比必须加上这个
html,body{
     
height:100%;
}

宽度自适应：html,body{width:100%}或者不写

高度自适应：自适应元素高度:height:auto或者不写（靠内容撑起来）

子元素浮动可以加高度

子元素高度为百分比，那么父元素必须设置高度

定位时的坐标可以是百分比

实战技巧：
有的背景观察像素发现像素间颜色不一致（为图片），可以纵向切宽一像素 作为图片，然后repeat-x即可。

最小高，最小宽，最大高，最大宽

写版心时候用

最小高：

min-height:IE6不识别,height:在IE6识别成最小高

最小宽：

min-width：加在嵌套在最外层的div（body下最大的div，缩小到一定程度不缩小）
#### 最大宽度，最大高度： max-height，max-width

如何解决IE6不识别最小高的问题：

方法一：

min-height:60px;//IE6不识别
height:auto ! important;//IE6不识别
height:60px://IE6解析成最小高

方法2;

min-height:100px;
height:auto;//IE6不识别
_height:100px;//IE6识别成最小高

方法3：

min-height:100px;
height:100px;

显示隐藏：visibility

值：visible显示；hidden隐藏


和display的区别：
都是显示隐藏
前者占据文档流，后者不占据

伪对象选择器：

通过CSS设置对应的元素


单双引号都可以的

指定元素后面添加内容：

div ::after {
     
content:"添加的内容";
}

指定元素前面添加内容：

div：：before {
     
content:"添加的内容";
}

content是必须的，后面可以跟空字符串表示不写内容
注意：下面只是用于块元素

设置第一行文本样式：

选择器：：first-line{}

设置第一个文字的样式：

选择器：：first_letter{}

::before {
	content:""
}
::after {
	content:""
}
div:first-line{
	必须是块元素
}
div:first-letter {
	必须是块元素
}

高度塌陷

原因：
子元素浮动，父元素没有设置高度

解决：

• 1. 给父元素加上高度（不灵活）
  
  
• 2. 父元素加上overflow:hidden（触发BFC,但是超出部分隐藏）
  
  
• 3. 给父元素最后加上一个空div，设置clear:both/left/right(代码冗余，解析网页变慢)
  
  
• 4. 万能清除法（重点）：

clear::after {
     //伪对象选择器
	content:".";//里面是有内容的
	display:"block";
	clear:both;//前三行效果就出来的
	width:0;//可以不写
	height:0;
	visibility:hidden;
	overflow:hidden;(超出宽0高0部分隐藏)
}

5.父元素也跟着浮动（不准使用，因为父元素产生了新的高度塌陷问题）

基础public.css模板：

目的：引入这个模板可以省事，可被多个页面同时使用，比一个页面写一次要好

@charset "utf-8";
html,body,,ol,ul,lih1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
     margin:0;padding:0;}//去除这些元素自带的内外边距，不用星号因为*的范围大，有无效功
body{
     font-size:16px; font-family: '微软雅黑';}
ul,ol,li{
      list-style:none;}
h1,h2,h3,h4,h5,h6{
     font-size:16px; font-weight: normal;}
b,strong{
      font-weight: normal;}
i,em{
     font-style: normal;}
a,u{
      text-decoration: none;}
img{
     border:0;display:block;//去除下边3px的像素}
input,fieldset{
      outline: none;//去除框框的蓝色模糊光条border:0;}
.clear_fix:after{
     //清除浮动
    content:'.';
    clear:both;
height:0;
width:0;
    overflow:hidden;
    display:block;
    visibility: hidden;
}
.clear_fix{
     //兼容IE浏览器zoom:1;}
.fs12 {
     font-size:12px}//一直到font-size20px
 .psa{
      position:absolute;}//绝对定位
.psr {
     position：relative}//相对定位
//背景色类,一般是网站主打色
.bgRed{
     background-color:red;}
.fw_b{
     font_weight:bold;}
.fw_n{
     font-weight:none;}
//用得最多的
.fl {
     float:left}
.fr {
     float:right}

注意：要写在所有的link最前面

关于表格的补充（全是重点）：

• tbody一定要写
• 将列分组 span：几列分为一组
• :标题单元格，文本内容默认水平居中
• 表格标题

表格属性

写在table里面：

• border-spacing：边框间距，不能为负数

• border-colspan:separate(默认)/collapse合并边框

• table-layout:单元格宽度是否固定（加快运行速度）

  auto（默认，自适应）；fixed（固定宽度）

• empty-cell：无内容单元格设置:show显示，hidden隐藏·

关于表单的补充

multiple：多选

单选按钮：

"radio" value="man" name="sex">男

注意：name值要一致，不然不能单选

checked  或者 checked = "checked“  表示默认选中（单选和多选）

复选按钮：

"checkbox" name="" value=""> 

name值不同，也存在checked

disabled="disabled"或者disabled表示禁用

下拉列表：

<select>//下拉列表
<option><option>//下拉列表项
<option><option>
<option><option>
select>

selected="selected"或者selected表示默认选中

name不是必须的

disabled有效

文本域

<textarea>textarea>

文本域属性：
resize:禁止拖拽，一般CSS设置宽高
cols:字符宽
rows：字符高
可以自由拖拽

文件上传

<input type="file">

字段集标签（重点）

<fieldset>
<legend>legend>
fieldset>

• 一个fieldset默认一个legend
  
  
• 可以用CSS修改这些属性的样式
  
  
• 也可以align="left/center/right/justify"改变legend样式
  
  
• 默认带边框，table默认不带边框
  
  
  
  
• label：提示信息标签
  
  

<form>
  <label for="male">Malelabel>		//for里面套id选择器
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Femalelabel>
  <input type="radio" name="sex" id="female" />
form>

行内块元素使用margin： 0 auto无效，对父元素使用text-align:center即可

auto是基于总宽度——已知固定宽度获取到的，inline-block元素水平方向的属性没有总宽度的限制，所以margin设置为auto时，不知道如何取值，所以默认为0，于是没有我们的居中效果

BFC

自己也搞不懂需要常看链接
BFC是一个独立的布局环境，其中的元素不受外界影响，并且在一个BFC中，块盒与行盒（行盒有一行中的所有内联元素组成），都会垂直的沿着其父元素的边框排列

BFC触发条件：

HTML根元素
添加了浮动的元素（除了none）
添加了定位的元素（absolute，fixed）
添加了display的元素（inline-block，table-cell，table-caption，flex，inline-flex）
元素添加了overflow：(visible除外)

BFC的布局规则

内部的Box在垂直方向，一个接一个的放置

BOX垂直方向的距离由margin决定。属于同一个两个相邻的BOX的margin会发生重叠

每个盒子（行盒与块盒）的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此


BFC的区域不会与float box重叠


BFC就是一个页面上隔绝的独立容器，容器里面的元素不会影响外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与了计算。

text-transform：capialize(首字母大写)/uppercase(全大写)/lowercase(全小写)

BFC的应用：

解决了margin叠加问题
解决了高度塌陷问题
解决了覆盖问题（两列布局）：浮动后面跟标准流，标准流变为BFC就可以和浮动元素分开

1、两列布局，三列布局
2、解决高度塌陷（解决高度塌陷的问题）
3、解决外边距溢出的问题

重置样式：就是之前的public.css

@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
     margin:0;padding:0;}//去除这些元素自带的内外边距，不用星号因为*的范围大，有无效功
body{
     
    font-size:16px;
    font-family: '微软雅黑';
}
ul,ol,li{
     
    list-style:none;
}
h1,h2,h3,h4,h5,h6{
     
    font-size:16px;
    font-weight: normal;
}
b,strong{
     
    font-weight: normal;
}
i,em{
     
    font-style: normal;
}
a,u{
     
    text-decoration: none;
}
img{
     
    border:0;
    display:block;//去除下边3px的像素
}
input,fieldset{
     
    outline: none;//去除框框的蓝色模糊光条
    border:0;
}
.clear_fix:after{
     //清除浮动
    content:'.';
    clear:both;
    height:0;
    overflow:hidden;
    display:block;
    visibility: hidden;
}
.clear_fix{
     //兼容IE浏览器
    zoom:1;
}

兼容前缀

不同浏览器去读取对应的css属性

• -ms- IE浏览器
• -moz- firefox浏览器
• -webkit- webkit内核的浏览器
• -o- 欧朋浏览器

CSS3

css3渐变（gardient）

渐变不是背景颜色，而是背景图

background-image也可以，但是background-color是错误的

让你在两个或多个指定的颜色之间平稳的过渡

线性渐变

background:linear-gardient(direction,color-step1,color-step2,…)

direction


默认to bottom 自上而下的变化

to right bottoim 自左上到右下

角度：水平线和渐变线逆时针之间的角度，0deg为自下而上，90deg为自左到右，可为负数

有的浏览器的标准旧的，0deg自左到右，90deg自下而上。

格式转换：90 -标准角度 = 非标准角度

stop：颜色分布位置，默认均匀分布，三个颜色默认每个33.3%。

background:-webkit-linear-gradient(left,red,green);
background:linear-gradient(to left,red,green);

不加to 需要兼容前缀，step可为像素或者百分比

径向渐变

由一点向四周渐变

background:radial-gradient(center,ellipse,closest-side,red,green);

第一个参数开始位置（可为单词或者两个百分比）
第二个参数形状（ellipse默认椭圆，circle默认圆形，容器为正方形时两者一样）
第三个参数：渐变到哪里停止，closest-side,farthest-side;closest-corner;farthest-corner
第四个参数：颜色

重复性渐变

重复性线性渐变

div{
     background:repeating-linear-gradient (red,yellow 10%,green 20%);}

重复性镜像渐变

div{
     background:repeating-radial-gradient(red,yellow 10%,green 20%);}

CSS3过渡：transition(IE10以后都支持)

一定的时间内平滑的过渡（如鼠标点击，获得焦点，被点击等对元素改变的触发）

简写：

transition：all/具体属性值	运动时间 s/ms  动画类型  延迟时间

linear(动画类型：线性)

CSS3属性：transform变形转换

CSS3:2D

坐标系：水平x轴（向右为正），垂直y轴（向下为正）

2D的功能函数：

translate():向指定的方向移动

• 水平移动：向右translate（tx,0）和向左translate（-tx，0）
• 垂直移动：向上移动translate（0，-ty）和向下移动（0，ty）
• 对角移动：两个都写

translate（100px）水平向右移动100px

缩放scale（）：

0.01~0.99缩小

• scale(1):默认第二个值和第一个值相等
• 第一个值为水平方向，第二个值为垂直方向
• scaleX():只在水平缩放
• scaleY():只在Y轴缩放
  负数会先缩小，再按照绝对值放大
  
  
  

2D旋转rotate()：

接收角度（单位deg），如果参数为正值围着原点中心顺时针旋转，为负值围着原点中心逆时针旋转

2D倾斜skew（）：

一个值时表示水平方向的倾斜角度
第一个值为水平方向的倾斜角度
第二个值为垂直方向的倾斜角度

变化原点：transform-origin

默认时元素的中心基点，transform进行的函数变换都是围绕着中心位置发生变化的

单位百分比或者像素

小总结

transform:
		translate()两个参数，只写一个默认变x轴
		rotate()默认第二个参数等于第一个参数，可以rotateX和rotateY
		skew()两个参数，第一个水平第二个垂直
		scale():一个参数：正值顺时针，负值原点逆时针
简记：
transform四特点：移缩斜转

井深：perspective元素距离

在父元素中：prespective:1200px;


在子元素中：
transform：perspective（1200px);


通常只设置父元素，数值在900px~1200px之间

perspective-origin：观察3D元素的（位置）角度

center center（中心）
left top
100% 100% 右下角

3D坐标

相对于2D多出来个z轴靠近屏幕为正，远离屏幕为负

实现3D场景：

transform-style属性：指定嵌套位置如何在3D空间中呈现

值：flat（默认，2D）和preserve-3d表示所有子元素在3D空间中展示

3D位移：

translateZ(t)和translate3D(tx,ty,tz)

3D旋转：

rotateX(a)
rotateY(a)
rotateZ(a)
rotate3d(x,y,z,a)

x,y,z为0~1之间的的数值，围绕各自轴旋转的矢量值
a是角度值，旨在3D空间中的旋转，正值代表正旋转，负值代表逆时针旋转

3D缩放：

scaleZ（）和scale3D()两个功能函数
scale3D中，x,y为1时，tz表示在Z轴上等比例缩放

注：单独使用是没有任何效果，需要配合其他的变形函数才能一起使用

CSS3D：动画

关键帧：
过渡动画只实现了第一帧到最后一帧这连个关键帧，而关键帧动画可以实现任意多关键帧，实现更复杂的动画效果

声明：

@keyframes  mymove{
     
from{
     初始状态值}
to{
     结束状态值}
}

或者：

@keyframes mymove {
     
0%{
     初始化状态值}
50%{
     可以添加几个类似的关键帧}
100%{
     结束状态属性}
}

animation和transition的区别：

相同点：随着时间改变的元素
不同点：transition需要触发一个事件；而animation在不需要任何事件触发的情况下也可以随时改变CSS样式

简写：

animation:  mymove east-in-out	2s	infinite	alternate;
动画名 过渡类型  持续时间		循环次数  是否反向

动画名需要配合keyframes使用
过渡类型：

linear线性		ease-in由慢到快
ease：平滑		ease-out:由快到慢
step-start:马上跳到动画每一帧结束的状态

infinite

无限循环/也可以为数字表示循环次数

是否往返：

normal正常
reverse;反方向
alternate：现正向再反向，交替持续
alternate-reverse：先反向再正向，交替持续

没写的：动画的状态running/paused(暂停鼠标移入动画时)

HTML5基础

文件名：
.html或者.htm

DOCTYPE不区分大小写

指定字符集编码

< meta charset=“UTF-8” >

不可以写结束标记的元素：（和平时一样）

br,col,embed,hr,img,input,link,meta

可以省略结束标记的语句：

li,dt,dd,p,option,colgroup,thead,tbody,tfooter,tr,td,th
基本和表单相关的元素（标签）

可以省略全部的标签元素：

html,body,head,colgrounp,tbody
也就是大框架可以省略，但是不要这么干，不然看不懂

属性值可以用单引号，可以用双引号（前端一向单双引号自由，不严谨）

	小总结：
		文件名
		doctype
		不可以写结束标记的标签
		可以写结束标记的标签
		可以省略全部的标签
		属性上面的引号自由

---

多媒体标签

<video src="">video>
<audio src="">audio>

属性：

• controls，出现该属性，向用户展示控件，如播放等控件
• autoplay：视频就绪后立马播放
• loop：重复播放
• muted：静音
• poster：规定视频正在下载时的图像，指导用户点击播放

<source>source>：写在媒体标签内部，后备资源供选择
type属性:
用于视频：video/ogg   video/mp4  video/webm
用于音频：audio/ogg  audio/mpeg

HTML5表单

新增的type值：

• email:限制输入的必须是email类型
• url：限制输入的必须是url类型
• range：产生一个滚动条表单
• number:用户必须输入数字
• search：搜索意义的表单
• color：生成一个颜色的表单
• time：必须是时间类型
• month：必须是月类型
• week：必须是周类型
• datetime-local:选取本地时间
• date：日期

新增的表单属性：(每个都很重要)

• required：检测是否为空
• min:最小
• max：最大
• step：步幅，写一个数字，确定步幅大小
• list：必须结合datalist标签，绑定datalist id名称
• autocomplete：是否自动提示信息（on,off）
• placeholder:文本框提示信息
• autofocus：自动聚焦，一个页面写一个，学号是哪个后光标默认聚焦在那
• pattern:后面的属性值是正则表达式
• multiple：选择多个上传

CSS3：CSS2的升级，完全向后兼容

下面也是面试题：什么是优雅降级，渐进增强

渐进增强：由小到大
优雅降级：针对低版本，
保证最近本的功能，
针对高版本浏览器进行新效果交互等进行改造达到最佳效果体验，由大到小

区别：降级意味着往前看，渐进意味着向后看

属性选择器：

a元素是讲了伪类选择器
双冒号（也可以单个）说了伪对象选择器

p.title {
     
background:red;
}

选中的是：

<p class="title">p>

同时满足多个属性选择器可以将中括号写在一起

e[attr]:是e元素，且具有att属性
e[attr="value"],e元素,并且attr="value"
e[attr~="value"]选取属性值中包含指定词汇的元素
e[attr^="value"]选取属性值是指定值开头的元素(类似正则的样子)
e[attr$="value"]选取属性值以指定值结尾的元素（类似正则的样子）
e[attr|="value"]选取必须带有指定值开头的属性值的元素，该值必须是整个单词
e[attr*="value"]:属性值包含指定值的某个元素

属性选择器简记
e[属性="value"]		//只有等于表示必须是value(精准匹配)
等于号前是：（模糊匹配）
	~	包含value这个单词
	^	必须value开头
	$	必须value结尾
	|	必须以value为整个单词开头
	* 	无论什么位置只要有这个单词就行

伪类选择器

下面选择器你知道长什么样子吗

• 伪对象选择器
• 伪类选择器
• 属性选择器
• 群组选择器
• 包含选择器（后代选择器）

结构性伪类选择器

：first-child{第一个子元素}//不是第一个就不选中

：last-child{最后一个子元素}//不是最后一个就不选中

：nth-child(n){指定位置的子元素}(**n从0开始**，可为2n,2n-1,odd(奇数),even(偶数))

：only-child{唯一子元素}//不是唯一子元素不选择

双冒号不可以(那就是伪对象了)

div：nth-last-child(n){倒数第n个不是就不选择}

所有同级同元素属性排序

first-of-type:当前类型的第一个元素
last-of-type：最后一个当前类型的元素
nth-of-type(n)当前类型的指定位置的子元素
only-of-type{}:当前类型的指定位置的子元素
only-of-type{}当前类型下唯一的子元素
nth-last-of-type{}当前类型下倒数指定位置的元素
：root{}根元素选择器，其实就是HTML
: empty{}选择内容为空的元素（不叫空元素选择器），如选择a:emnpty{}选中a内容为空的元素

学习补充：浮动元素大小被撑起来后可以设置宽高，拥有块级特性

目标伪类选择器：

UI状态伪类选择器

：enable{}可以输入的状态
：target{}点击关联元素的
：disabled{}禁用的状态
：checked{}选中的状态
：selection{}选中文字，修改背景颜色和文本颜色
：focus{}光标选中的状态

层级选择器(子元素选择器，相邻兄弟选择器，通用兄弟选择器)

子元素选择器：	
	e>a:			e的子元素a,最终选择的是a
区分后代选择器（子孙级别都选）


相邻兄弟选择器:
e+a	    			e元素最近的a，最终选择a
{因为只能选择一个，按照加载顺序自上而下，第一个不会被选中}


通用兄弟选择器：e~a   
e元素后面的所有a  最终选择a

CSS3属性：

文本阴影：

text-shadow：文本阴影  垂直阴影  模糊度  阴影颜色；
单位都是px

可以用逗号连接多个

文本换行

word-wrap：

normal：断字点换行（浏览器保持默认处理）
break-word：属性允许长单词或者URL地址换到下一行

word-break：

break-all：进行单词内断句
keep-all：文本不会换行，只会在半角空格或者连字符处换行

背景属性

background-origin:背景图起始位置

backfround-clip：背景图裁减（图片不一定完整）
border-box从边框开始
padding-box：从内边距区域开始
content-box：从内容区开始

background-size:背景图大小
数值，百分比，contain（不会超出但可能填不满），cover（超出可能显示不全）

多个背景图：backfround:url(),url();

颜色模式：
hsl(色调，饱和度，亮度)
hsla
h(0~360)
s(0~100%)
l(0~100%)
a(0~1)

图片边框：

border-image是复合写法

border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移(不加单位)。
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset	边框图像区域超出边框的量(值是一个倍数)

CSS圆角

border-radius:(左上) （右上）（右下） （左下）
border-radius:(左上) （右上左下）（右下）
border-radius:(左上右下) （右上左下）
border-radius:四个角
可以指定单个

字体图标

下载图标
在页面种引入iconfont.css
调用对应图标的类名

盒子阴影

box-shadow：水平阴影  垂直阴影 模糊度 阴影大小  阴影颜色 内外部阴影

默认outside（写了就错），inside（内部）

calc（）：计算宽高公式

calc（ 数值 - 数值 ）
一定要注意空格
有的时候需要加前缀
如width：calc（100% - 200px）;//连个元素浮动在一行

pointer-event:鼠标点击穿透

可以穿透div点中下面的div（没用过，看看知道就好）

flex布局

不推荐看下面的部分，推荐链接阮一峰flex布局

flex容器（父元素）：

第一步：设为弹性盒子

display：flex，inline-flex（类似行内，行内块）

• 子元素宽度超过父元素也不会换行

注：设置容器后子元素的float，clear，vertical-align都失效

• 元素默认在水平摆放；元素宽度由内容撑起来，高度和父元素一致

• 子元素为行内元素也可以设置宽高

特点：

1. 弹性盒子里面的离他最近的一层子元素都可以添加大小
2. 如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素加上margin：auto就可以了
3. 弹性盒子里面的子元素都是沿着主轴排列的
   “主轴”可能是X轴也可能是Y轴，如果X是主轴，Y就是侧轴

flex-direction：主轴方向

值	意思
row(默认)	水平主轴（从左到右）
row-reverse	反向水平主轴（从右到左）
column	垂直主轴（从上到下）
row-reverse	垂直反向主轴

flex-wrap：是否设置换行

值	意思
nowrap	不换行
wrap	换行
wrap-reverse	反向换行

综合写法：flex-flow：flex-direction flex-wrap

justify-content:设置项目在主轴上的对齐方式

• flex-start:起始位置

• flex-end:终点位置

• center：整体居中

• space-around：两端平分（像外边距）

• space-between:两端对齐（去除两端的外边距）

• space-evenly:两端对齐（空隙间距一致）（有的不支持）
  
  
  
  align-items：侧轴对齐方式

• flex-start：起始位置

• flex-end：终点位置

• center：整体居中

• baseline：文本底部对齐（容器对不对齐不参与）

• stretch:拉伸（默认值，主轴水平方向拉升的是高度，否则是宽度）
  
  
  
  align-content：侧轴多根轴向对齐方式（应该是换行之后产生多个交叉轴）
  将整个一行作为一个项目

• flex-start:起始位置

• flex-end：终点位置

• center：整体居中

• space-around：两端对齐

• space-between：两端对齐

• stretch：(没设高度时默认自适应高度）拉伸

flex项目（容器里面的子元素）

align-self

会覆盖align-item，对单个项目有效

• auto 默认值
• stretch 拉伸
• center 居中
• flex-start 起始位置
• flex-end 终点位置

order:项目排序

数值越小越靠前，可以为负值，默认是0
flex-grow:项目的放大比例
默认是0，即存在剩余空间也不放大

都为1就会等分剩余空间（剩余空间按照flex-grow的值按比例分配）

flex-shrink:项目的缩小比例

默认是1，不够时都等比缩小；若是有为0的，那么除了为0的都缩小

flex-basis：分配多由空间之前占据的空间（使用和height差不多）

默认值是auto，即项目本来大小

上面的总结起来就是flex属性(建议使用这个属性，不要拆开写，因为浏览器会推算相关值)
flex:flex-grow 		flex-shrink 		flex-basis			(默认值0 	1	auto)
快捷值：auto(1 1  auto)   			none(0  0  auto)

多列布局（看上去像报纸一样）

• column-count: 属性规定元素应该被分隔的列数
• column-gap：属性规定了列之间的大小间隔
• column-rule：属性的列与列之间的边框，复合属性
• column-rule-color：规定列之间规则的颜色
• colum-rule-style：规定列之间规则的样式
• column-rule-width：列之间规则的宽度
• column-fill：对象的所有列的高度是否统一
• auto：列的自适应内容
• balance：所有列的高度中以最高的一列统一
• column-span：对象元素是否横跨所有列
• none:不横跨
• all:横跨所有列
• column-width：设置检索对象每列的宽度
• columns:复合属性
• columns:width count;

媒体查询(适应不同设备的响应式)

用的少，看看就好

@media all and (min-width:320px) {
body { background-color:blue;}
}

and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

all支持所有类型，screen支持屏幕

移动端

在vscode里面自动创建的模板中包含一个mate标签（H5只允许它为单标签）

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

不要手写，容易出错

width:宽度等于当前设备的宽度
initial-scale：初始缩放比例（默认设置1.0）
minimum-scale：允许用户缩放最小比例
maxmum-scale：允许用户缩放最大比例
user-scalable：用户是否可以手动缩放（默认no）

什么是物理像素
出场时你屏幕就决定了你的物理像素

逻辑像素
UI给你的设计图测出来的像素就是逻辑像素

css像素
你最终写的像素

设备像素比
这里需要查询文档，我这里离可能不准确

设备像素	设备像素比（物理像素/逻辑像素）	css像素
750px	dpr = 2	375px
640px	dpr=2
1080px	dpr=3

常见单位

单位	表示什么
px	像素
em	父元素大小，和font-size成倍数关系
rem	根元素大小，和font-size成倍数关系
vw	跟浏览器窗口大小相关，1000vw=屏宽，随着浏览器宽度变化而变化
vh	同vw，是表示高度的
vmin	选择vm和vh中小的作为基准
vmax	选择vm和vh中大的作为基准

如果浏览器设置为1100px宽、700px高，1vmin会是较小的7px，而1vmax将是较大的11px。
然而，如果宽度设置为800px，高度设置为1080px，1vmin将会是较小的8px，而1vmax将会是较大的10.8px

移动端适配

动态设置font-size

• 通过js(自行上网查找代码)
• 通过vw

注：要给body重置一下font-size，不然行内元素空格特别大

布局模式（记一些专业名词，需要详细需要查看他人博客）

移动端布局：流式布局（文字流式，控件弹性，图片等比例缩放）

grid布局（很好能看到，作为知识扩展，未来有使用的趋势）

好处：横平竖直 ，对仗工整

容器（父元素）

display:grid/inline grid   网格布局
grid-template-columns:第一列  第二列 第三列（分列）；
px
,%
,fr,
auto:自动填充列宽
repeat(列数，列宽)
auto-fill：自动根据列宽填充多少列
minmax(最小宽，最大宽)
最小宽可以是px,百分比，不可是fr

grid-template-rows:分行，同上

项目（子元素）
grid-column-gap:列间距  grid-row-gap行间距  grid-gap:行间距  列间距；
新版本可省略grid前缀
grid-template-areas:”第一列  第二列 第三列 第四列”
”第一列  第二列 第三列 第四列”
”第一列  第二列 第三列 第四列”
”第一列  第二列 第三列 第四列”
注：需要结合项目属性grid-area：列名	使用；
区域连接后必须是矩形


grid-auto-flow:row/column//未指定区域的子项的排列顺序，按照行或列去填

justify-items:项目在	单个网格中的水平对齐方式
start，end，center，stretch
align-items：项目在当个网格中的垂直对齐方式
start，end，center，stretch
综合写法：
place-items：垂直对齐方式 水平对齐方式


justify-content:网格整体水平对齐方式
align-content：网格整体垂直对齐方式
综合写法：place-content：垂直 水平
start
end 
center
stretch
space-around
space-between
space-evenly

添加在项目上的：
grid-area：项目调用指定分区

grid-column-start起始列项
grid-column-end结束列项
grid-row-start起始行项
grid-row-end结束列项
综合写法：grid-column:起始/结束
grid-row:起始/结束

后续补充

浏览器兼容；
CSS bug（问题）:
css hack(解决办法):
filter(过滤器)：


IE常见bug：
常见问题：
bug1:
超链接里面的img，默认由蓝色边框
hack1:img{border:0/none;}

bug2:img下方自带3像素间距
hack2：img{display:block;}或img不换行（有的能解决）


bug3:浮动元素添加margin（在IE6下将解析双倍margin）
hack3：给元素添加display：inline；

bug4:默认高度，ie6-
hack4:font-size为0或overflow为hidden；


非IE BUG：

bug5：表单元素对齐不一致：
hack5：添加浮动

bug6：按钮元素大小不一致
hack6：统一大小或者用a标签模拟
使用其他的标签模拟大小，去掉input原有的边框
如果是图片按钮，那么就使用背景图，同时去掉input的背景色。

bug7： cursor：hand    指针  ie9-识别
hack9:	cursor:pointer;  所有的浏览器都识别


bug8:opacity：0.5  ；IE低版本不识别
hack8:fliter:alpha(opacity=50);


过滤器：
bug9:最小高度设置
hack9：min-geight”100px；ie低版本不识别
_height:100px;IE低版本识别

---

博文不是很完整，仅作为个人笔记，错误之处还请指正。