自己整理的HTML笔记 有点乱

字符型转换成数值型函数：
pareslnt（numberstring，radix） radix为进制 ，不写时
使用0打头的整数是八进制整数 使用0x后0x打头的整数是十六进制整数 undefined变量创建后未赋值

例题：document.write(" " 010 " 转换后为： “+pareslnt（numberstring，radix)+” ");

js 引号（同类型的引号，单引号和双引号是不同类型）是成双对的，在读第一个引号时开始，读到第二个结束，遇到第三个又开始，第四个又结束。。。；
不同类型引号之间可以嵌套，最多2层（当然通过转义可以继续往下套，但是因为可读性太差，不要这样做）
拖动 draggable=“true” 内容可以拖动
outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时（outline-style），这个宽度才会起作用。
如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。
a:hover 悬停时的样 a:active 鼠标点击瞬间的样式 a:visited 被点过后的样式 a:link 未被点之前的样式 顺序： link visited hover active
去掉超链接下面的下划线text-decoration:none;
lable标签扩大表单可点区域 ：包裹、for=“” alt=“加载失败时的替换信息”; title=“图片可见时鼠标放在上面显示的文本” 相对于你所保存网页路径的位置的图片的位置 （…/意思为返回上一级）.

display:block;变成块级 可定义宽高。
多个列在同一行显示加浮动。 让某些元素在一行 这些元素都得浮动。
浮动特点：脱离文档流，浮在普通流的上面 会影响当前的或后面的盒子，不会影响前面的标准流
Relative： 如果没有定位偏移量，对元素本身无影响 不使元素脱离文档 不影响其他元素布局
left、top、right bottom 是相对于当前元素自身位置进行偏移的（当前指的是没有定义位置时的默认位置）
absolute：使元素完全脱离文档（没有了可以参照的父元素，那么margin：0 auto；居中不起作用。） 不占位置 别的盒子会占用他的位置 可以使内联元素支持宽高（具备内联的特性） 使块元素默认宽根据内容决定
如果父类元素有定位（absolute\relative\fix）则相对于祖先元素发生偏移，没有则相对与整个文档偏移
fixed:;相对于窗口的位置
子绝父相 由于子元素不占据位置，用绝对定位 父元素占据位置，用相对定位
例子：方向箭头在图片上方，用绝对。如果父元素绝对，则后面的盒子不能正常显示
设置relative后，其他元素不会占据该元素的位置
定位的副作用： 宽度靠子元素撑起 margin：0 auto 居中失效 居中方法：left：50%； margin-left/2 （无论浏览器被如何拉伸，始终保持居中）
position：absolute；

相对定位不脱标，是标准流

固定定位fixed：只认浏览器的可视窗口 bottom:0; right:0;可视窗口的右下脚底部，但不是真正的底部
不占位置，位置跟父级元素的定位没有关系，不受父级元素影响
不随滚动条滚动

为什么清除浮动
清除浮动可以让父级自动检测高度
清除浮动的方法：可以给高度（最好不要给高度） 父不设高，靠子撑，子浮动，撑不起来，需清除浮动
很多情况下父盒子不方便给高度，而是根据内容撑开：
父亲有高的话，浮动不影响布局
子盒子浮动 脱标 不占有位置 一般父盒子无高度 则不会撑开父盒子 而且下面的盒子会到上面被子盒子盖住
1.在结尾处添加空div标签clear：both；
缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不爽

2.为父级元素添加overflow：hidden属性：
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏，无法显示溢出的元素

3. 使用after伪元素清除浮动 after相当于添加了一个新标签放在元素后面，但是结构不可见
   缺点：由于ie6，7不支持，使用zoom：1；触发haslayout。

.类名：after{
Content:””;
display:block;
Visibility:hidden;
Clear:both;
}
.类名{*zoom:1;}

4.使用双伪元素清除浮动
之前之后都插入盒子，但结构不可见
.类名:before,.类名：after{
Content:””;
display:table;
}
.类名：after
{Clear:both;}

.类名{*zoom:1;}

clear: left, 左侧抗浮动，右侧沦陷
clear: right, 右侧抗浮动，左侧沦陷
clear: left; float: left, 垂直环绕布局
clear: right; float: right, 垂直环绕布局

为什么clear:right不起作用
尽管第二个div有clear:right代码，但是它的右侧还是出现了浮动元素。这主要代码是顺序执行的，当执行到第二个div要清除右浮动的时候，第三个div并没有被加载，所以它的清除效果也就无效了，于是第三个div依然会紧跟着第二个div。

可以给一个元素定义多个类名，类名之间用空格隔开
例题div p{color:#C3F}为div所包裹的所有p标签定义样式 div h3 p{color:blue}为div所包裹的h3标签内所有p标签定义样式
更复杂 仔细的话儿空格在写 div>p{color:orange}对div标签的直接（子）标签定义 父与子之间没有其他标签 紧挨着 亲儿子
去掉列表标签前面的符号：list-style：none；
padding：0 0 0 130px;右边填充130 repeat-x水平方向上重复
float：left 靠左浮动 可以使他们水平一行显示 改变随窗口变化问题 不折行：
外层加个div 全部设成百分比
white-space:nowrap;当内容够多的时候，[文本]不会换行，[文本]会在在同一行上继续，直到遇到
标签为止。
clear：left；清除左浮动

引入外部css样式：
<script src=“my.js>”

下拉导航栏 里面给a标签设置大小 因为那一区域都是连接可点的
垂直居中：给的line-height的值等于父高建上下边框大小和
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素实际宽度（盒子的高度）=上边界+上边框+上填充+内容高度+下填充+下边框+下边界。
盒子实际大小：内容宽度和高度+内边距+边框
Padding会撑开盒子大小
如果盒子没有指定宽度或高度，则不会撑开盒子
竖着 水平
ul{visible：hidden/}

a： hover鼠标经过的时候的效果

.toe li:hover span{background:#C9F;}
<li><a href=""><span>工作介绍</span></a></li>

display:inline通过将块级元素设置为内联元素来达到水平排列的目的
display:inline-block则是在达到水平排列目的同时又设置为块级元素

input中size属性：可以显示多少内容 readonly value=“学生”只读无法改变学生二字

Dreamweaver：f12快速保存

line-height:文本行高指的是上下总共间距

疑问：

（等比例缩放问题：疑问
外部引入css不会乱排，但是不能等比例缩放
直接写css样式不会乱排，能等比例缩放 why）

table中为什么一定义宽和高，cellpacing就会不起作用？
反而在{}中写border-spacing：2px； 就会起作用？
表格外边框的显示与隐藏，是可以用frame参数来控制的。
表格内部分隔线的属性
起作用的是rules这个参数

单选框的name值必须相同，不然和多选没区别。

链接标签(a标签)有个属性target
_blank 在新窗口中袭打开被链接文档。百
_self 默认。在相同的框架中打开被度链接文档。
_parent 在父知框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

例题
模板1，意思就是将a1.htm这个页面在name值是index的框架中打开，

JavaScript 注释：双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

JS: （语句按顺序执行，上一句报错 下句将无法执行； 分号分隔js语句 Javascript语句太长时： 语句折行的最佳位置是运算符或逗号之后.）

变量：用于存储数据值（严格区分大小写、不能以数字开头、不能是关键字保留字、变量名必须有意义、遵循驼峰命名法：首字母大写后面单词的首字母小写，或者相反、）
方法一： 1.var age; 声明一个age的变量 2.age = 18; 赋值 3.console.log(age);输出结果

方法二：变量初始化 var age = 18; console.log(age); 数字可不带引号

更新变量
var age = 18;
age = 91; 最后结果就是91

同时声名多个变量
var age = , name = . sex = ; 多个变量之间用逗号隔开 最后一个变量以分号结束

只申明不赋值 则会显示undefined 不申明不赋值会显示报错 不申明只赋值 可以显示出来
（如果上个代码出错 下面的代码将无法执行）
变量交换: 把值寄存于temp中

JS
innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 和 。

document.write改变的是整个HTML页面（文档），document.getElementById(“demo”).innerHTML= 改变的是局部属性。
document.getElementById(‘’)根据指定的 id 属性值得到对象，获取对象
var a=document.getElementById(‘wb’); 指定的 id 属性值得到对象。将其存在一个临时变量中 。获得ID值=id的所有属性和方法
a.style.fontSize=‘30px’;通过这个临时变量得到其相应的属性或者值，如果要直接得到某些值，比如文本标签中的值，需要加上.value();
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出 （仅用于测试 在HTML文档完全加载后使用 document.write() 将删除所有已有的 HTML ：）
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台（通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。）
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素

function displayDate() {
document.getElementById(“demo”).innerHTML = Date();

点击按钮后，在label和div标签中就可以添加进内容，如果标签之前存在内容，innerHTML会替换掉对应的内容。如果想追加内容，可以通过innerText先获取之前的内容，拼接上新的内容后，再innerHTML。
function add()
{
var lab1 = document.getElementById(‘lab1’);
lab1.innerHTML=lab1.innerText+‘this is a label’;
var div1 = document.getElementById(‘div1’);

div1.innerHTML=div1.innerText+'this is a div'；

或者
document.getElementById(‘div1’).innerHTML=div1.innerText+‘this is a div’;

}

例子
var domObj = document.getElementById(“aa”); //获得DOM对象 获取id=aa的元素
console.log(domObj.innerHTML);

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id).innerHTML = ; 解释：id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

例子：

p标签必须在

这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”：
实例 document.getElementById(“demo”).innerHTML = “Hello Kitty.”;

JavaScript 代码块：{代码1;代码2;} 作用是定义一同执行的语句

实例：function myFunction() {
					document.getElementById("demo").innerHTML = "Hello Kitty.";
			 	document.getElementById("myDIV").innerHTML = "How are you?";
			   }

表单：

enctype post安全 get直接追加到地址栏里面不安全

cheecked表示预选中，每组单选按钮的name值必须相同，而value属性必须不同
value：指定显示在按钮上的文字，默认是提交/重置
多行文输入框：
文本
rows：指定输入的行数 cols：指定输入得列数

// //这是一个输入框
// prompt(‘请输入你的姓名’);
// //alert 弹出警示框 展示给用户的
// alert(‘姓名错误’);
// //console 控制台输出 给程序员测试用的 按f12
// console.log(‘我是程序员能看到的’);
// // 变量 存储数据以供使用
// var age = “18”;//数字可以不加引号 其余的单双引号都可以
// console.log(age);
// //用户输入姓名 存储到mynamen中
// var myname = prompt(‘请输入您的名字’);
// alert(myname);
函数
Function 函数名
声明函数
function 1.声明函数的关键字全部小写，2.函数名一般用动词 3.函数不调用，自己不执行
function getSum(num1,num2){ /函数名为getSum/
var sum=0;
for(var i = num1;i <= num2;i++){
sum+=i;
}
console.log(sum);
调用函数
函数名（）； 在函数外面写 接受返回值或者被返回值取代
例子var myVar = myFunction(5);函数会返回值5 myFunction（）所返回的值赋给的值给变量myVar
Document.getElementById(‘demo’).innerHTML=函数名（）；

line-height:行高等于盒子高度，单行文本垂直居中 行高=上边距+下边距+文字高度
text-align:文本 行内 行内块元素水平居中
背景图片后面的地址 url不要加引号 背景图片必须加url

2. 我们可以利用函数的参数实现函数重复不同的代码
   function 函数名（形参1，形参2……）{ 形参类似于变量，形参接受实参，实参传递给形参
   console.log（）；
   .如果实参个数和形参个数一致，正常输出
   } 如果实参个数大于形参个数，按形参个数输出
   函数名（实参1，实参2……） 如果实参个数小于形参个数 多余的形参定义为unde 最终结果是NaN，
   形参相当于不用声明的变量 num2没有接受值，结果就是undefined 会报错

函数内部不应该有输出语句

函数求最值问题
用于条件判断的运算符叫条件运算符
三元条件运算符：表达式1?表达式2：表达式3 注释：冒号是否则的意思
列子：return num1 > num2 ? num1 : num2 ； 注释：num1大于num2吗? 如果大于返回num1， 否则返回num2
3. 函数的返回值 如果没有返回值，则返回undefined
1.return具有终止作用 2. 只能返回一个值，返回的是return后面的最后一个值；
function getresult(aru){
return aru;
}
console.log(getresult(“内容”));
2. 只能返回一个值，返回的是return后面的最后一个值；return num1,num2; 返回的是num2. 只能返回一个结果
改变的方法：数组可以当成一个结果，数组里面可以写很多。
function getresult(num1，num2){
return [num1 + num2,num1 - num2,num1 * num2,num1 / num2];
}
getresult(1,2);
var a =getresult(1,2);
console.log(a);

列子
//求数组[5，2，99，101，67，77]中的最大值
function getarr(arr){//接受一个数组
var max=arr[0];
for (var i=1;i<=arr.length;i++){
if(arr[i]>max){
max = arr[i];
}
}

		return max;
}
	//getarr([5,2,99,101,67,77]);//实参是一个数组， 这句函数只是把结果得到并没有输出  d得到结果是因为调用了函数
var result = getarr([5,2,99,101,67,77]);声明一个变量来接受返回的结果
console.log(result);

背景：
图片填充父级容器，自适应容器大小
设置图片height：100%; width：100%；
设置背景不填充padding部分
background-origin:content-box;

方位名词顺序不影响结果
background-position：top left;左上角

background-position：center center;水平居中 垂直居中

background-position：top；顶部对齐 水平居中

background-position：10px 20px； 第一个永远是x轴
background-position：10px； background-position：10px center; x轴方向10px； y轴垂直居中
如果出现精确单位，第一个精确单位一定是x轴上的。

Background-attachment:scroll/fixed; 背景附着解释背景是滚动还是固定的。
背景固定时，背景上的文字等内容滚动，背景不动。
background-size:auto;/* 默认值，不改变背景图片的高度和宽度 /
2 background-size:100px 50px;/ 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 /
3 background-size:10%;/ 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 /
4 background-size:cover;/ 将背景图片等比缩放填满整个容器 /
5 background-size:contain;/ 将背景图片等比缩放至某一边紧贴容器边缘 */

背景简写：顺序可以无要求
Background:背景颜色 背景图片地址 背景平铺 背景滚动条 背景位置

Font简写有强制标准（复合属性）
Font: style variant weigth size/line-height family

文本行内居中：text-align只对行内元素和行内块（inline-block）元素起作用，对于行内span里面的内容不起作用
块级元素居中：margin：0 auto；
Left：50%；margin-left：-1/2；本身的一半

盒子里文本居中：text-align：； 也可让行内元素和行内块居中
插入图片与背景图片的区别：

1. 插入图片：更改位置：margin或者padding 更改大小：width height
   一般用于产品展示

2.背景图片：更改位置：background-position 更改大小：只能用background-size
一般用于小图标背景或者超高大背景图片
清除元素默认的内外边距：给所有元素设置*{padding:0; margin:0;}

常用的CSS命名规则
头：header 尾：footer导航：nav 内容：content/container 侧栏：sidebar
栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center
登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot
新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu
搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll
内容：content 标签：tags 文章列表：list 提示信息：msg 小技巧：tips
栏目标题：title 加入：joinus 指南：guide 服务：service
注册：regsiter 状态：status 投票：vote 合作伙伴：partner
id的命名:
1)页面结构
容器: container 页头：header 内容：content/container 页面主体：main
页尾：footer 导航：nav 侧栏： sidebar 栏目：column
页面外围控制整体佈局宽度：wrapper 左右中：left right center

行内标签：包含a、span、em、strong、b、i、u、label、br；
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！
a标签：主要用来链接一个其他的网页；
span标签：主要用来对行内的文字进行一些样式以及其他的操作；
em标签：一般用来对文字进行强调，使用斜体体现出来；
strong标签：一般用来对文字进行强调，使用加粗字体体现出来；
img标签：图片引用标签，其中 src属性中写入图片的地址；
var标签：JavaScript中命名变量的标签。

块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
p标签：段落标签，段落文字使用，默认格式：段尾进行换行；
div标签：划分块的主要使用标签；
ul标签：无序列表的主标签，后面的标号为圆点（黑色）；
ol标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5…；
li标签：列表中的主体使用标签
dl标签：自定义标签的主标签；
dt标签：自定义标签的表头；
dd标签：自定义标签的表头的解释（描述）信息；
h1~h6：6级标题标签、字体的大小依次变小。
Hgroup：对网页或区段section的标题元素进行组合
Figure：图像与图像描述的组合
Figcaption：定义figure元素的标题不是必须的，位置figure元素的第一个或最后子元素位置上
顺序：figure→p→img→figcaption
行内块标签：img,input,textarea
Details与summary： details开关交控式控件，两者配合使用

里面可有open details的标题 details的详细内容 input 中新增加的type类型 type="email" 请输入邮箱地址 type="url" 请输入网址 type="range" 滑块 type="number" 请输入数字 type="search" 搜索表单 type="color" 生成颜色表单

    作为了解
		type=“time”      限制用户必须输入时间类型
	   	type=“month”        限制用户必须输入月类型
	   	type=“week”        限制用户必须输入周类型
	   	type=“datetime-local”        选取本地时间
	   	type=”date”		年月日
	   	
	新增加的表单属性:
		required	检测是否为空(必填字段)
		step		步长,确定一个值-4 0 4 8
		min			限定最小值
		max			限定最大值
		autoplete="是否自动关联提示信息"
		        	on	默认值 关联
		        	off	不关联
		placeholder="文本框的提示信息"
		autofocus	自动聚焦,光标的初始位置,一个页面只有一个
		pattern="正则表达式" 可以自己指定合法的格式
		  novalidate="取消验证"	
		multiple	多选
		list	结合 datalist标签的id属性才有效

Box-shadow:
H-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
过渡transition属性：
transition-timing-functionease ：慢速开始，中间变快，慢速结束；相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。
liner：匀速运动；相当于 cubic-bezier(0, 0, 1, 1)。
ease-in：慢速开始；相当于 cubic-bezier(0.42, 0, 1, 1)。
ease-out：慢速结束；相当于 cubic-bezier(0, 0, 0.58, 1)
ease-in-out：慢速开始，慢速结束；相当于 cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n, n, n, n)：在 bezier 函数中自定义 0 ~ 1 之间的数值。
transition-duration：完成过渡效果需要的时间（单位为 s 或 ms）
transition-delay：规定过渡效果的延迟时间，
复合属性：属性指定多个值时，逗号隔开 子属性之间用空格分隔
Mark：高亮标记
#grad { background-image: linear-gradient(red, yellow, blue); }线性渐变
各种标签之间的转换
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

            各个标签之间的区别

块标签：独自占领一行、可以进行宽高的数值的设定；
行标签：在一行内显示、不可以进行宽高的数值设定；
行内块标签：能和其他元素待在一行，能设置宽高；

                嵌套规则 

块标签可以套行标签，行标签不可以套块标签。
P标签不要套块属性标签，可以套a，span，文本。。。
嵌套的时候注意代码的缩进。

可定义文档中的分区或节(division/section)。

js中的$()的用法

三种具体用法：
1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。
比如：$(“a”)构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的这个标签。如： $("a").click(function()...)就是在点击页面上的任何一个链接时的触发事件。确切地说，就是jQuery用<a/>这个标签构建了一个对象$(“a”)，函数 click()是这个jQuery对象的一个（事件）方法。
2、$()可以是$(element)，即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码： $(document).find(“div>p”).html());
$()中的document是一个DOM元素，即在全文寻找带<p>的<div>元素，并显示<p>中的内容。3、$()可以是$(function)，即一个函数，它是$(document).ready()的一个速记方式。如常见的形式是这样的：
$(document).ready(function(){
alert(“Hello world!”);
});
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$(“[href]”) 选取所有带有 href 属性的元素。
$(“[href=‘#’]”) 选取所有带有 href 值等于 “#” 的元素。
$(“[href!=‘#’]”) 选取所有带有 href 值不等于 “#” 的元素。
$("[href$=‘.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$(“p”).css(“background-color”,“red”);

$(this) 当前 HTML 元素
$(“p”) 所有

元素
$(“p.intro”) 所有 class=“intro” 的

元素
$(“.intro”) 所有 class=“intro” 的元素
$(“#intro”) id=“intro” 的元素
$(“ul li:first”) 每个

• 的第一个
• 元素
  $("[href$=‘.jpg’]") 所有带有以 “.jpg” 结尾的属性值的 href 属性
  $(“div#intro .head”) id=“intro” 的
  元素中的所有 class=“head” 的元素

Js的引入
JS：内嵌式js 写在script里面
行内式js;直接写到元素的内部
外部js： script src引入
Js的变量数据类型根据等号右边的值来确定的，无需写出它的类型

Transform :2d 3d 转换 旋转 缩放 移动 倾斜

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换。 //向右和下移动
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scale(x,y) 定义 2D 缩放转换。 角度的单位deg
Rotate（deg) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,deg) 定义 3D 旋转。 angle 表示旋转的角度 xyz表示的是矢量距离 列如（1,1,0，angel） 则旋转方式是原点到（x，y）的连线
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 20deg，30deg 单位deg
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
这些属性只能写在共有的transform后面
Transition应该在正常情况下先设置，不应该在hover 等里面写 应该在普通里面写
Transition： 用于过渡
• transition-property： 规定设置过渡效果的css属性名称
• transition-duration： 规定完成过渡需要多少秒
• transition-timing-function：规定速度效果的速度曲线
• transition-delay： 定义过渡效果何时开始
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
Transform与transition配合使用

菜单下拉列表怎么实现慢慢出现效果

能过渡的属性：（想要谁过渡，就在谁原始身上加，不要在变换后加，不能在写hover时加）大小，颜色，透明度，背景图片（有点特殊，是原来图片变淡，另一个图片出来，类似透明度，一般不使用）

不能过渡的属性：display

想要hover后，元素慢慢显示，

如果仅仅是visibility+transition,那么开始和display一样是立即显示，但是和display不一样的是，display在鼠标撤离元素没hover时立即消失，而visibility会过段时间消失

visibility:hidden和display:none的区别

display:none是完全消失，页面hover不到，并且造成其他属性没有效果

visibility:hidden也是消失，但是存在于页面上，也hover不到，并不会影响别的属性。一般配合opacity和position使用，即要从消失到可以慢慢显现，必须用visibility而不是display
点击显示与隐藏不需要考虑这个情况

隐藏与显示
display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
visibility 可见性
设置或检索是否显示对象。
visible : 　对象可视
hidden : 　对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 　不剪切内容也不添加滚动条。
auto : 　 超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

web前端——css写隐藏滚动条但可以有滚动的效果【最简单有效办法~】
在滚动区域外面写一个容器，宽度比滚动区域小17px（滚动条的宽度）
外容器overflow:hidden；内容器：overflow-y:scroll;即可~

用关于display和visibility隐藏问题：
写二级导航栏菜单，当时用display来实现二级菜单的显示与隐藏时，结果发现在第一次访问或者刷新后第一次访问，鼠标移动到一级菜单时二级子菜单感觉就想刷新不出来一样，用visibility实现则不会出现像这样的问题。
input:checked ~ label ：相邻同胞选择器，选择被选中的input标签后 所有的label标签［input 和 label标签有共同的父元素］；
input:checked ＋ label ：相邻同胞选择器，选择被选中的input标签后 第一个label标签［input 和 label标签有共同的父元素］；
方式1：
CSS的方式实现
1：设置样式：visibility: hidden/visible;隐藏和显示，
2：设置样式：display:none/(inline/block)隐藏和(内联元素显示/块级元素显示)，
两者之间的区别：‘visibility 隐藏之后会占布局空间，而display则不会占布局空间。

方式2：
JS的方式来操作，有的时候可以根据点击事件来实现隐藏和显示
1：
document.getElementById(“id”).style.visibility=“visibe”;
document.getElementById(“id”).style.visibility=“hidden”;
2.
document.getElementById(“id”).style.display=“none”;
document.getElementById(“id”).style.display=“inline”;
方式3：
JQuery的方式实现
$(function(){
$(“btn”).click(function(){
$(“div”).hide();/隐藏/
});
});

$(function(){
$(“btn”).click(function(){
$(“div”).show();/显示/
});
});
前提：因为JQuery就是JS基础之上封装的一个工具，所以使用前得引入 jquery.js
如：

点击

内容

第一张 第二张

input 被checked时和label配合的妙用

Label标签设置for属性与input的id相绑定 点击label 即等于点击input
1：作为文字隐藏与否的开关；
如下代码：对div里面所包含的文字较多，一开始只展示小部分，当用户点击按钮时，进行全部内容的展示（按钮是以向下隐藏箭头的图片）
html代码如下

内容

<!-- <input type="checkbox" id="A1" > -->
<label for="A1">
    <img src="向下箭头按钮.jpg" alt=" 图片加载不出来显示的信息">
</label>

css代码如下：
div{
width: 500px;
height: 100px;
margin: auto;
border: 1px solid red;
overflow: hidden;
}

input{
display: none;
}
// 当input被选中的时候，img 按钮转180，向上

                              input:checked~label>img{
                                     transform: rotate(180deg);
                             }

// 当input被选中的时候，div内容显示（选择器；只能是兄弟，而不能是弟兄，也就是说可以选中前面的标签+后面的标签；不能选择后面的标签+前面的标签）
input:checked+div{
height: auto;
}

2：点击效果展示，当一个图片被点击后，图片就被换掉（以此来提醒用户点击成功，增加用户体验）
HTML代码如下（p元素用来插入背景图片，作为用户点击的按钮）：

CSS代码如下：
p{
margin: 0;
padding:0;
width: 52px;
height: 52px;
background-image: url(“点击前图片按钮.jpg”)
}

#B2:checked+label>p{
background-image: url(“点击后图片按钮.jpg”)
}

1.4内联元素的盒子模型（在文档流中）：

内容区：不能设置宽高(width，height设置无效)，宽高由内容撑开
内边距：支持水平方向的padding，垂直方向的padding也支持，但是不会影响布局
边框：支持四个方向边框，但是垂直的边框不会影响布局
外边距：支持水平方向外边距，不支持垂直方向的

overflow 设置元素如何处理溢出内容，常用属性值如下：
visible：默认值，不会处理溢出的内容，在父元素以外的地方显示
hidden：溢出的内容会被隐藏不会显示
scroll：在父元素中同时添加水平和垂直方向的滚动条，不内容是否溢出都会添加滚动条
auto：根据需要自动生成滚动条
2.1display 设置元素的显示类型，常用属性值如下：
block：元素会作为块元素显示
inline：元素会作为内联元素显示
inline-block：元素会作为行内块元素显示（1.不独占一行 2.宽高被内容撑开 3.可以设置宽高 ）
none：元素不会在页面中显示，并且不会占据页面的位置

2.2visibility 设置元素是否在页面中显示，常用属性值如下：
visible：默认值，元素在页面中正常显示
hidden：元素不在页面中显示，但是依然在页面中占据位

原生JS10种常见的网页编程

1、后退 前进

2、返回

3、查看源码
<input type=“button” name=“view” value=“查看源码” onClick=“window.location=“view-source:” +window.location.href”>

4、禁止查看源码

5、刷新按钮一

刷新按钮二

6、回首页按钮

7、弹出警告框

8、状态栏信息

9、背景色变换

10、打开新窗口

三种方法解决纯css下拉菜单鼠标移入菜单内容时菜单隐藏消失的问题
解决方案一：margin-top:0
在 css 中，为充当菜单内容的元素添加 margin-top:0。
解决方案二：菜单内容改成其它种类元素
在 html 中，将充当菜单内容的元素改成另一种，比如

。
解决方案三（通常不推荐）：去除 position: absolute
在 css 中，为充当菜单内容的元素（class为 .dropdown-content ）删去 position:absolute。这会导致当下拉菜单向下弹出时，页面中从此开始的后续内容也就跟着往下移。

Table表格
Caption定义表格的标题
Cellpadding：内容与单元边距
Cellpacing：单元格间的空白 无需加单位
Table标签直接写align对齐方式不管用，

Cellpadding与Cellpacing在HTML5中早已是废弃的属性了，cellpacing还可以用
应该合并表格边框，然后用th，td的padding设置内容和边框之间的空隙。
Draggable（拖动与否）属性在标签里写，

CSS 表格中的单元格边框重叠属性 border-collapse
语法：border-collapse : separate | collapse
取值：
separate :　 默认值。边框独立(标准HTML)
collapse :　 相邻边被合并

如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）

利用css的border属性实现三角形的原理：css盒模型
.div4{ width:200px; height:200px; border-width:144px; border-style:solid ; border-color:#FF9600 #3366ff #12ad2a #f0eb7a;

设置宽和高为0时，中间空白会消失。

css3 的background 背景渐变

1. background-image: linear-gradient(0deg, #fff 0%,#000 100%);

清除内外边距
*{margin:0; padding:0;}

盒子大小： 宽=2*边框大小+width

1.获取ID的函数
封装获取ID的函数。一般在实际操作中，会经常用到提取某个元素的ID，如果每条都列，想必非常麻烦。一般如果有很多ID需要提取的情况基本都用提取ID的函数

外边距合并问题

嵌套块元素外边距塌陷（垂直外边距合并）
对于两个嵌套关系的父子元素，父子元素均有上下外边距，此时会塌陷较大的外边距 塌陷是指一起移动等。
.end-1{margin-top:20px;}
.end-2{margin-top:10px;} 子元素位置没有改变 父元素改变
解决方案：1.为父元素定义上 边框
2.为父元素定义上 内边距
3.为父元素添加 overflow：hidden；

相邻块元素垂直外边距合并
解决方案：尽量只给一个盒子添加margin
.end-1{margin-top:20px;}
.end-2{margin-top:10px;} 此时的两个盒子之间的距离为最大的那一个

块级 行内 行内块标签
块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
行内标签：包含a、span、em、strong、b、i、u、label、br；
行内块标签：img,input,textarea 不能设置margin
内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;
.Right>div{}大于号指的是亲儿子，不是div里面的子元素div1

.div1,.div2{}相同样式 逗号隔开
Input里面的内容超过maxlength将不显示
设置范围必须用maxlength才会限制住

并集选择器 .类名1,
.类名2{}

复合属性的顺序问题：
Link visited hover active
font : font-style font-variant font-weight font-size line-height font-family;
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角

图片在盒子里居中

.imgbox{
position: relative;
width: 240px;
height: 240px;
}
.imgbox img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
outline: 1px solid #000;
}

.imgbox{
font-size: 0;
width: 240px;
height: 240px;
line-height: 240px;
text-align: center;
}
.imgbox img{
max-height: 100%;
max-width: 100%;
vertical-align: middle;
outline: 1px solid #000;
}

vertical-align：用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 比如说top就是垂直对齐文本的顶部 。

清除元素默认的内外边距：*{ padding:0; margin:0;} 橙色部分都是外边距

导航栏里面子元素的大小给a不是给li

行内元素在设置浮动后可以设置高宽

浮动元素与兄弟盒子的关系
浮动特点：脱离文档流，浮在普通流的上面 会影响当前的或后面的盒子，不会影响前面的标准流

为什么要清除浮动
因为父级盒子很多情况下不方便给高度，但是子盒子浮动不占有位置，最后父级盒子高度为0，就影响了下面的标准盒子

position: fixed; /给想要居中的元素设置/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 auto;|margin:auto
这个目的是为了将它变成一个自由的元素，这时元素的宽高在未设置时默认是父元素的宽高，再使用margin: auto;就能使它在浏览器窗口居中了，否则，添加了fixed的元素使用margin: auto;是无效的。

left:0;right:0;top:0;bottom:0;再加上margin：auto，会使div1居中，如果div1,没有宽高，则会继承父集的宽高。适合body 内的遮罩，

宽度等为百分比时，设置某些属性撑开盒子的问题
设置CSS的box-sizing属性值为“border-box”，这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!
box-sizing: border-box; border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的

.column{
width: 16%;
margin: 2% 2%;
float: left;
background:#03a8d2;
border: 2px solid black;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

div中的内容水平垂直居中

1. div高度自适应的情况
   div在不设置高度的时候，会被里面的内容撑开，内容自动填充在div中，无论是一行内容还是多行内容，此时不需要设置垂直居中，内容自动在中间的，
   想要看的更直观些，只需要加上padding元素，内容四周便会留下空白，实现水平垂直居中的效果
   2.div设置具体高度
   （1）内容只有一行
   设置div的line-height和div的高度一样即可，这个大家都知道哒
   （2）内容不确定有几行
   这时候需要在div中再加一层结构，用p标签或者div都可以
   方法一：
   css代码如下：
   .demo{
   position: absolute;
   width: 200px;
   height: 200px;
   border: 1px solid red;
   }
   p{
   position: absolute;
   width: 150px;
   top: 50%;
   left:50%;
   transform: translate(-50%,-50%);
   border: 1px solid black;
   }
   HTML代码如下：

this is a test of margin this is a test of margin this is a test of margin this is a test of margin

方法二：若是不想用position：absolute这样的脱离文档流的样式，那就可以尝试模拟表格的方法 设置父元素display：table，设置子元素display：table-cell，并设置vertical-align：middle即可 css代码如下： .demo{ width: 200px; height: 200px; display: table; border: 1px solid red; } p{ display: table-cell; vertical-align: middle; text-align: center; border: 1px solid black; } HTML代码如下：

this is a test of margin this is a test of margin this is a test of margin this is a test of margin

方法三： 使用css3新增的flex布局完成。 设置父元素display:box; box-pack:center; box-orient:vertical;即可，记得要在前面加上浏览器前缀哦 css代码如下： .box{ width: 200px; height: 200px; border: 1px solid red; display: box; box-pack:center; box-orient:vertical; display: -webkit-box; -webkit-box-pack:center; -webkit-box-orient:vertical; } HTML代码如下：

this is a test this is a test this is a test

this is another test for the second div

本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中 水平居中方法 1.行内元素水平居中方法，在父级块元素中设置 text-align:center; • 1 2.块级元素水平居中方法 margin:0 auto; • 1 3.弹性布局，给父元素设置 display:flex; justify-content:center; • 1 • 2 垂直居中方法 1.弹性布局 父元素设置 display:flex; align-items:center; • 2 2.固定高度的话可以用line-height,将line-height和height值相等就行 height:20px; line-height:20px; 2. 多行文本垂直居中 3. 给父元素设置（垂直水平居中） 1. justify-content: center; /*子元素水平居中*/ 2. align-items: center; /*子元素垂直居中*/ 3. display: -webkit-flex; 4. 5. • 2.1父级元素高度不固定 • text-align: center; /*设置文本水平居中*/ • padding: 50px 20px;/*通过内边距将盒子撑大实现居中*/ • 2.2父级元素高度固定 • 父级：display: table; • 子级：display:table-cell;和vertical-align:middle; • 注意：虽然display：table解决了避免使用表格的问题，但有几个需要注意的： • （1）display: table时padding会失效 • （2）display: table-row时margin、padding同时失效 • （3）display: table-cell时margin会失效 • 2.3利用line-height和vertical-align： • 关键样式： • ① 父元素（这里是div）设置和高度一致的 line-height （这里是200px）--- 由后面的vertical-align定义看，这是为了设置div的基线 • ② 子元素 (这里是span) 设置合适的line-height，并设置display:inline-block、vertical-align: middle; --- inline水平的元素无法设置line-height，所以这里要设置inline-block。 • 有以下几点需要注意： • ① vertical-align属性应该设置到 行内元素上（行内块元素也可） • ② 如果文字的总高度超出了 容器（这里是div）的高度，那么垂直居中会失效。 • ③ ie7以下 span结束标签和内部内容不能有间隔空白，也就是说span的结束标签和内部内容要连在一起。 • • 1 1、图片的垂直居中 vertical-algin:控制行内快和文字的对齐方式 给图片添加vertical-align:middle; • 2 水平垂直居中方法 1.弹性布局 给父元素设置 display:flex; justify-content:center; align-items:center;

div盒子水平垂直居中的方法
给父元素设置
justify-content: center; /子元素水平居中/
align-items: center; /子元素垂直居中/
display: -webkit-flex;

parent {
display: flex;
display: -webkit-flex;
}
.child{
margin:auto;
}

3.（绝对定位，未知子元素宽高）：

.parent {
position:relative
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%); //IE9
-webkit-transform: translate(-50%, -50%); //Google、Safari
}
方法4（绝对定位，已知子元素宽高）：
• .parent {
• position:relative
• }
• .child {
• width: 50px;
• height: 10px;
• position: absolute;
• left: 0;
• top: 0;
• right: 0;
• bottom: 0;
• margin: auto;
• }
方法5（绝对定位，已知子元素宽高）：
•
• .parent { border:solid red;
• width:500px; height:500px;
• position:relative;
• }
• .child {
• width: 100px;
• height:100px;
• position: absolute;
• left: 50%;
• top: 50%;
• margin-top:-50px;
• margin-left:-50px;
• background-color:#000;
• }
•
3.模拟表格法
父元素设置
display:table;
• 1
子元素设置
display:table-cell;
vertical-align:middle;

锚点
在需要快捷地方加入 回复
.在目的地附近加入

Ul>li:hover>div