HTML+CSS篇笔记

admin管理员组

文章数量:1547451

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

转义字符：

&nbsp:空格
&gt:>
&lt:<
&copy ©

路径：

目录文件夹：
普通的项目文件夹
根目录：
打开文件夹的第一层
绝对路径：
从盘符开始往下
相对路径：
图片相对于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 href ="跳转地址"  target = "跳转方式"></a>
target = "_new"在新页面刷（很久没点击会打开新页面而不是在新页
				面刷新）
		="_self"当前页面刷新
		="_blank"打开新页面
title="鼠标悬停提示文本"

图片标签：

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

<img 
src="图片地址" 
alt="加载失败时显示，搜索引擎判断用，必须有" 
title="鼠标悬停文本" 
height/width="只写一个另一个等比例缩放"
>

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

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：

• 丢失<!doctype html>,对于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
特征：

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

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

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:100%;
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;

锚点链接

<a href="#box1"></a>
<div id="box1">跳转位置</div>

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一定要写
• <colspan span=“列数”> 将列分组 span：几列分为一组
• <th>:标题单元格，文本内容默认水平居中
• <caption>表格标题

表格属性

写在table里面：

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

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

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

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

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

关于表单的补充

multiple：多选

单选按钮：

<input：type="radio" value="man" name="sex">男

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

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

复选按钮：

<input type="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">Male</label>		//for里面套id选择器
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <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元素距离

在父元素中：perspective: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：分配多余空间之前占据的空间（使用和width差不多）

默认值是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;

菜鸟教程：CSS3多列

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

用的少，看看就好

@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	跟浏览器窗口大小相关，100vw=屏宽，随着浏览器宽度变化而变化
vh	同vw，是表示高度的
vmin	选择vm和vh中小的作为基准
vmax	选择vm和vh中大的作为基准

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

移动端适配

动态设置font-size

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

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

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

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

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

好处：横平竖直 ，对仗工整
补充链接: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：
常见问题：
1)图片有边框BUG
当图片加<a href=“#”></a>在IE上会出现边框
Hack:给图片加border:0;或者border:0    none;


2)图片间隙
div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将</div>与<img>写在一行上；
hack2:将<img>转为块状元素，给<img>添加声明：display:block;


3)  双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;


4)默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;


非IE BUG：

5)表单元素对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;


6)按钮元素默认大小不一

描述：各浏览器中按钮元素大小不一致
hack1： 统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。


8)鼠标指针bug
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:    如统一某元素鼠标指针形状为手型，
应添加声明：cursor:pointer


cursor:         ;
auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形



9)透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
	例：opacity:0.5;)
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)


过滤器：
  1.下划线属性过滤器
  当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
  
  语法：选择符{_属性：属性值；}
 

  2. !important关键字过滤器
  
  它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，
我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。

  语法：选择符{属性：属性值!important;}
 

  3. *属性过滤器

  当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属
性的作用。

 语法：选择符{*属性：属性值；}


  4.   \9  ：IE版本识别；其它浏览器都不识别
语法：选择符{属性：属性值\9;}

  5.   \0  :   IE8 及以上版本识别；其它浏览器都不识别

---

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

本文标签： 笔记htmlcss