【HTML】笔记

a:hover{
		color:red;
		font-size:20px;
	}

链接字体颜色大小

<marquee></marquee>滚动字条

<hr> 分割线

&nbsp; 空格

<img src=""> 插入图片

<embed src=""> 插入视频

float:left;
padding-right:0.5px;

图片悬浮 与文字间距

title：显示图片名称alt
设置背景颜色，transparent表示透明：{background-color:transparent|color}
插入背景图片：background-image: url(84039d9d4c68de1dab34f6f5c4_560.jpg)
背景图片重复：background-repeat：repeat水平和竖直方向都平铺
                       repeat-x水平平铺    repeat-y竖直平铺  no-repeat不重复平铺
背景图片显示：background-attachment:fixed固定在页面的可见区域里
                       scroll随页面一起滚动
背景图片位置：background-position legth设置图片与边距水平和垂直方向的距离
                       percentage以页面元素框的宽度或者长度的百分比放置图片
                      top,center,bottom,left,right
背景图片大小：background-size:length percentage，cover，contain
边框样式：    border-style:dashed破折线 dotted点线 solid直线 double双线 groove              槽线式 Ridge脊线式 inset内嵌 outset突起效果
                    border-width线宽

超级链接伪类：a:link未被访问时的样式
                         a:hover鼠标悬停时的样式
                         a:active激活时的样式
                         a:visited被访问过的样式

鼠标样式：auto自动   crosshair精确定位十字   default默认鼠标指针
                   hand手形   move移动       help帮助     wait 等待   text文本
                 n-resize箭头朝上双向        s-resize箭头朝下双向
                 w-resize箭头朝左双向        e-resize箭头朝右双向
                 ne-resize右上    se-resize右下     nw-resize左上   sw-resize左下
                 pointer指示  url自定义

*父元素只设置了宽，没有设置高，子元素浮动，使父元素包住子元素的方法：

1.父级元素设为inline-block，缺点是margin:0 auto;失效,用text-align：center居中

2.父级元素也浮动，缺点是margin：0 auto失效

3.父级元素设置高

4.设置br标签 <br clear="all"/> 不推荐使用

5.clear:both;父元素后面加<p style="clear:both"></p> 不符合标准

6:父元素：after{content:"";display:block;clear:both;}

*定位的三种特性

相对定位 relative

1.不影响本身特性

2.不使元素脱离文档流

3.提升层级

4.无法触发bfc

5.针对自己本身进行定位

绝对定位 absolute

1.会是元素完全脱离文档流

2.内容撑开宽度和高度

3.使元素支持所有CSS样式

4.提升层级

z-index：数值 定位层级设置 数字越大层级越高

5.绝对定位要和相对定位配合使用

6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移

7.如果绝对定位的子级有浮动，可以省略清除浮动

固定定位 fixed

1.不兼容IE6

2.针对窗口定位

*兼容性

1.在IE下大部分兼容性都是因为haslayout属性触发的问题，尽量触发haslayout属性 zoom:1;可以触发， 在IE下父级有边框时，子元素margin会失效，需要触发父级haslayout属性。

2.盒子模型数据要精准

3.IE6下双边距的bug：块元素有浮动，横向margin值会扩大二倍，解决方法：display：inline

4.margin-left 一行中左侧第一个元素有双边距  display：inline

5.在IE6,7下，li本身没有浮动，li里面内容有浮动，li下会产生一个间隙。解决：给li加浮动。或者加vertical-align：top

6.当一行子集元素之和与父级的宽度相差3px，或者子级元素不满行的情况，最后一行子级元素的margin-bottom会失效。

7.文字溢出bug：子元素的宽度和父级的宽度如果相差小于3px的时候，两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多。解决：用div把注释或内联元素包起来。

8.在IE6下，当浮动元素和绝对定位元素是兄弟元素时，绝对定位会失效。解决：不让浮动元素和绝对定位元素是兄弟关系，用div或其他标签把绝对定位元素包起来。

9.在IE6,7下，子级元素有相对定位，父级元素overflow包不住子级元素。解决：给父级也添加相对定位

10.在IE6下，如果绝对定位的父级宽高是奇数时，子级元素的right和bottom值会有1px偏差

11.透明度：filter：alpha（opacity=50）

12.在IE6,7下，输入型的表单标签上下会有1px间隙，解决：给input加浮动

13.<!--[if ie 6]>我是IE6<[!endif]-->在IE6下显示“我是IE6”

14._background或*background ie6支持， +background ie7支持，  \9 ：ie10之前的IE解析

*表格

1.清除默认样式table{border-collapse:collapse;} td,th{padding:0;}

2.特性：单元格默认平分，th默认加粗，水平垂直居中；td默认不加粗，垂直居中；td,th宽度大于table不管用；如果th,td没有设宽度，表格同一列继承最大宽度（行同理）；display：table

3.合并单元格：colspan="数值"(横向) rowspan="数值"(纵向) 数值代表合并数量，被合并的单元格必须删掉

*表单

<form action="提交地址" method="提交方式" target="">

<input type="text/password/submit/radio(单选)/checkbox(多选)/file/bottom/hidden/reset" name="一定要设置"/>

</form>

get::在地址栏做内容的拼接，用户看得到

post：把表单元里面的内容做拼接，并且打包传送到action的地址，用户看不到

target：_blank新窗口打开 -self当前窗口

lable嵌套实现点击文字也可以选中选项<lable><input/></lable>或<lable for="id"></lable><input id="id"/>

<select name="" id=""><option value="河北">河北</select>

<textarea name="" id="" cols="" rows="">中国不是、、</textarea>

清除默认样式：input{margin:0;padding:0;}

option{padding:0;}

textarea{padding:0;resize:none;outline:none;}

*背景图尺寸background-size

1.具体数值

2.百分比

3.cover

4.contain

背景裁切：background-clip:（需要rgba配合-透明度）

1.border-box:从边框开始显示背景

2.padding-box：从padding区域开始显示背景

3.content-box：从内容区域开始显示背景

4.text:从文本区域显示背景

线性渐变IE9以下不支持，加内核前缀

linear-gradient（90deg角度，颜色，颜色.....);颜色后面可以加宽度确定区域

制作光斑：

linear-gradient(

rgba(255,255,255,0) 100px,

rgba(255,255,255,1) 120px,

rgba(255,255,255,1) 140px,

rgba(255,255,255,0) 160px,

rgba(255,255,255,0) )

角度：模糊的值或具体的数值（to right,to left,to  top,to bottom）角度指水平线与渐变线之间的角度，逆时针方向

非标准下（有内核前缀）90-x=y;x标准角度，y非标准角度

径向渐变

1.radial-gradient（circle at center,red,yellow,blue）从圆心开始渐变

括号里的第一个值：圆心位置或者圆的形状circle(默认为椭圆)，可以是模糊的值，也可以是具体的数值

模糊的值：at center/left/rigth/top/bottom

具体的数值：x偏移量 y偏移量

颜色可以通过具体的数值规定渐变的范围，具体数值可以是100px或者百分比

标准下加 circle at

标准之前没有设置（即有内核前缀）

2.重复的渐变repeating-linear-gradient

盒阴影

box-shadow：inset（内阴影）10px右边阴影宽 10px下边阴影 30px阴影程度 red颜色(可以不断增加)

文字阴影

text-shadow 

蒙版

目前只有-webkit-内核支持，需要PNG的透明度遮罩，

-webkit-mask：url()；

和背景设置一样，可以设置多个PNG为模板

倒影

只有-webkit-内核支持

-webkit-box-reflect:left/right/below/above

第二个值：倒影与本体之间的距离

第三个值：渐变，可以是透明度的渐变，也可以是PNG透明的图片链接

*媒体查询

当屏幕发生变化，根据设置的最大宽度或最小宽度时，读取大括号中的代码

@media screen and( 当屏幕发生变化,最大宽度到达某个值的时候，如max-width:960px ){执行以下代码}

viewport布局百分比<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxmum-scale=1.0,user-scalable=no">

width:控制viewport的大小，可以制定一个数值或一个特殊值，device-width就是设备的宽度

initial-scale：初始缩放，页面开始缩放的程度

maxnum-scale，minimum-scale：最大最小缩放倍数

user-scalable=no：是否允许用户调整页面，若为No，maxnum-scale，minimum-scale会失效

子选择器：div>span

作用范围：div下的span享受样式，p中的span不享受样式

<div>
<p>
	<span>我是第一个</span>
</p>
	<span>woshi</span>
    <span>srt</span>
    <span>ertert</span>
</div>

相邻兄弟选择器：p+span

作用范围：可以选择相邻的两个元素，且有同一个父级，+后面的享受样式
同级元素通用选择器：p~span

作用范围：p之后的同级span享受样式

属性选择器：选择带有某种属性的所有元素，选择带有某种属性值，并规定属性值的元素

<a href=""></a>与<a></a>a[属性名]{}   input[属性名="属性值"]{}

p:nth-child(1){样式}选择父级下第一个元素,第一个必须是p

p:nth-of-type(1){}一定会匹配P,若值为n,n可以计算，2n表示偶数，2n-1表示奇数

p:first-child{},p:last-child{},p:first-of-type{},P:last-of-type{}

*字体与盒模型

@font-face{

font-family:"自定义字体名称";

src:url("字体图片的路径地址"),

      url("字体图片的路径地址"),

      url("字体图片的路径地址"),

      url("字体图片的路径地址")；

font-weight:;

font-style:;

}

找字体的网站 下载  修改字体图片格式的线上工具 上传，使用里面的CSS文件

字体图片格式：.ttf .otf .woff .eot .svg 

如果想搭建盒模型，首先在父级建立盒模型空间

方法：display:-webkit-box;display:-moz-box;

排列方式有两种：水平，垂直

-webkit-box-orient:vertical;垂直

-webkit-box-orient:horizontal;水平

子级排列位置可以由-webkit-box-pack:center/end/start(左边)/justify(均分);设置

子级具体份数由-webkit-box-flex:几份;设置

<style>
.test{border:1px solid #666;
display:-webkit-box;/*使左浮动*/
-webkit-box-pack:center;/*使居中*/
/*-webkit-box-pack:end;右浮动*/
/*-webkit-box-pack:justify;均分*/
-webkit-box-orient:horizontal;/*竖着*/
}
.test div{
	height:100px;
	width:100px;
	background:red;
	text-align:center;
	line-height:100px;
	border:1px solid #FFF;
	}
.test div:nth-of-type(1){
	-webkit-box-flex:1;
	}
.test div:nth-of-type(2){
	-webkit-box-flex:2;
	}
.test div:nth-of-type(3){
	-webkit-box-flex:3;
	}
</style>
</head>
<body>
<div class="test">
	<div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>

分栏

column-count：3；分几栏

column-gap:100px;分栏之间的间隙

column-rule：5px solid 颜色 设置分栏之间的分割线

IE9以下不支持，火狐加前缀

配合媒体查询使用@media scree and(max-width:){}

过渡

transition:1s 1s all ease;

第一个值：过度的总时间

第二个值：延迟过渡的时间

第三个值：需要过渡的样式

第四个值：过渡的方式linear匀速 ease慢速开始然后慢慢变快

ease-in慢速开始ease-out慢速结束ease-in-out开始和结束都慢cubic-bezier(1,0,1,0)贝瑟尔曲线

2D变换

transform：translate(x,y)位移 rotate(xdeg)旋转 scale缩放 skew(旋转角度)斜切

变换原点transform-orgin：left、top、right、bottom、center(默认值)

3D变换

首先需要给需要进行3d变换的元素的父级添加3d环境和景深

方法：translate-style：preserve-3d;添加3d环境

perspective：数值

rotatX, rotatY, rotatZ,translateX,translateY,translateZ,

animation：

首先定义一套关键帧

方法：@keyframes 动画名称 {

0%{相应样式}

10%{相应样式}

20%{相应样式}

100%{相应样式}

}

然后调用动画名称：

方法：animation：1s 1s 动画名称 运动方式 执行次数

第一个值：运动总时间

第二个值：延迟运动时间

第三个值：动画名称

第四个值：运动方式

linear匀速   ease慢速开始然后慢慢变快

ease-in慢速开始  ease-out慢速结束  ease-in-out开始和结束都慢  cubic-bezier(1,0,1,0)贝瑟尔曲线

第五个个值：运动次数 具体数值或无限次infinite