HTML和css(2+3)知识点汇总

HTML和css汇总

	第一天:html基础（语法，定义，标签，空标记，常规标记，HTML5文档结构，标签有哪些默认的属性），w3c标准。 
	第二天：css基础，CSS语法，概念。css样式表{语法，区别（优先级）},选择器。
	选择器：
		元素选择器/类型选择器  
		类选择器/class选择器 
		ID选择器 伪类选择器
		群组
		包含/后代
		子选择器
		通配符
		伪元素:after,:before,:first-line,:first-letter
	css3选择器：
		属性选择器 input[type]{}
		伪类选择：
			(结构性伪类，nth-child...,)
			(UI状态伪类:disabled,enadled,checked,)
			(动态伪类：:link :hover:visited:active:focus,）
			否定伪类：：not(){}
			目标伪类：：target{}
			语言伪类：：lang(){}
		伪元素::after,::before,::first-line,::first-letter,::selection(只能改文字颜色背景颜色)；
		层级选择器：  包含选择器，>子代选择器，+相邻兄弟选择器，~通用选择器  . 
	第三天:css属性
   文本的属性：font-family,font-size,color,line-height,text-align,text-indent,letter-spacing,word-spacing,text-transform,vertical-align,font-weight,font-style,text-decoration,font,text-shadow,word-break,word-wrap.white-space
   列表的属性：list-style:none,list-style-type,list-style-image,list-style-position
   背景的属性：background:background-color,background-image,background-posoition,background-repeat,background-attachment.background-size,background-clip,background-origin.多背景
   边框的属性：border:border-style,border-color,border-width,border-bottom,border-top,border-radius,border-image
   浮动的属性：float:left/right/none
   清除浮动：clear：left/right/none/both
	   
	 第四天盒模型：概念，组成（margin+padding+border+content）标准盒模型
	              IE盒子模型/怪异盒模型:box-sizing:border-box/content-box
	第五天溢出
		overflow:visible,hidden,scroll,auto,inherit,initial,unset,
		overflow-x.overflow-y
		width,white-space:nowrap,overflow:hidden,text-overflow:ellipsis;
	第六天元素类型
	    块元素:    div,dl,dt,dd,ul,ol,li,p,h1~h6,form,table,tr,td,hr,body,html,fieldset,thead,tbody,tfoot,th,header,footer,nav,section,main,figure,figcaption,aside,article,
	    内联元素:a,img,input,span,strong,i,em,b,sub,sup,del,s,u,br,mark,label,select,textarea,legend.
	  置换元素：img,input
	 元素类型转换：display:block,inline,inline-block,flex,inline-flex,list-item,table,none,table-row,table-cell,table-header-group,table-footer-group.
	 vertical-align:内联元素；同一行内的垂直对齐方式;
	第七天：定位
	position:relative,absolute,fixed,static,inherit,unset,initial,sticky
	偏移：top,right,left,bottom
	层叠：z-index:
	锚点链接，透明，flash,marquee
	补充 :可以继承的属性有：
		  块元素：text-align,text-indent
		 所有类型的元素：font-family,font-size,color,line-height,text-align,text-indent,letter-spacing,word-spacing,text-transform,font-weight,font-style,text-decoration,font,text-shadow,word-break,word-wrap.white-space
		 列表元素：list-style
		表格：border-collapse:collapse(合并相邻单元格边框)
	第八天：图片整合
	       优点：减少了对服务器的请求次数，咸小的图片的体积，提升的加载的速度。
	       background-position:
	第九天：宽高自适应
	       优点：有时候我们希望元素大小能够根据内容或父元素或窗口来自动调整，显示的更灵活，适应不同的设置，不同窗口，不同分辨率。
	       块元素的宽度不设置具体值的情况 ，他的宽度自动适应父元素的宽度，高度适应内容的高度
	      内联元素默认的宽度是内容的宽度，高度适应内容的高度；
	   自适应的情况：
	     父元素的高度的适应子元素高度，但子元素设置了浮动的属性后，脱离文档流，高度塌陷。
	     清除的方法：
	     1，overflow:hidden;
	     2.在浮动元素后加一个空的块元素，并设置 clear:both; height:0; overflow:hidden;


 3.万能清除
     	父元素：after{content:""; display:block; clear:both,height:0; visibility:hidden;}
     	父元素{zoom:1;}
	  浏览器的块元素的渲染规则（BFC）
	  规则：不与浮动重叠，独立的容器互相之间不受影响，可以计算浮动的元素高度
	 触发bfc条件：

float:left/right,overflow:非visible，display:inline-block,table-cell,flex,inline-flex,table-caption.position:absolute,fixed.
第二种适应的方式，元素的宽高，适应窗口宽高，html,body{height:100%;}
第三种适应：min-height,min-width,max-height,max-width
第十天：浏览器兼容，表格表单元素补充 ，css重置
ie6常出现的问题：图片间距，双倍浮向，默认高度，百分比，透明
透明：opacity:0~1;ie9以上
filter:alpha(opacity=0~100);ie9以下
颜色透明：rgba(255,255,255,0.5);
过渡器：_过滤器，!important过滤器，*+，/9,/0;

补充：th,caption,thead,tbody,tfoot,属性:border-collapse,table-layout.colgroup>col
radio,checkbox,select>option,textarea,hidden,image,file,
属性：checked,disabled,selected(option),enabled
第十一天
html5语义化标签
表单验证：
标签search,email,url,number,range,color,time,week,month,date,datetime-local,datetime,datalist>option
属性：placeholder,autofocus,required,novalidate,autocomplete,list,pattern,multiple,
第十二天css3新增属性：
box-shadow,text-shadow,border-radius,@fontface,background-clip,background-origin,background-size:100px,50%,vcover,contain.
第十二天：弹性盒
转换弹性盒display:flex,inline-flex;
主轴对齐方式：justify-content:flex-start,flex-end,center,space-around,space-between,
侧轴对齐方式：stretch,flex-start,flex-end,center,baseline
换行：flex-wrap:nowrap/wrap
行和行的对齐：align-content:stretch,flex-start,flex-end,center,space-around,space-between,
给子元素设置：
子元素的侧轴对齐方式：align-self:stretch,flex-start,flex-end,center,baseline
如何分配剩余空间的：flex:flex-shrink,flex-grow,flex-basis. flex:1(1,1,%);
控制子元素的排列顺序：order:5;值越大顺序越靠后
多列：
column-count:5;
column-width:100px;
column-gap:5px;
column-rule:2px solid #ff0;
column-span:all;
break-inside:avoid;
coluns:100px 5;
第十三天
响应式：特点（优点可以适应不同的设备，灵活；缺点：响应式是一个折中的设计方案，不能达到最佳效果，工作量大，代码累赘，浏览器要隐藏样式，加载速度变慢）；
媒体查询，meta标签设置
语法：@media screen and (min-width:400px){ div{font-size:14px;}}
meta:为了把布局视口转换为理想视口（移动端里的布局视口不等于可视视口）
移动端：
百分比布局：上下一条高度在设备里固定的，借助百分比+像素实现
等比缩放布局：rem布局 html设置成？？vw,里边子元素的除正文的文字和边框采用像素，其它用rem;
正文的文字用媒体查询的方式做适配，小于等于320用12px,大于320小于等于375px用14px,大小375用16px

百分比，px,em,rem,vw,vh,vmin,vmax
dpr设备像素比  物理像素 / css像素 

视口：可视视口，布局视口，理想视口

移动端里上中下可以采用弹性盒，定位（上中下都定位，上下定位，中高度100%padding,calc()）fixed,absolute，
第十四天：
渐变：线性-webkit-repeating-linear-gradient(to right,red 2%,blue 10%)，
径向-webkit-repeating-radial-gradient(center,shap size,red 2%,blue 10%)
css32d变形:

transform:
translate(tx,ty);translateX(),translateY()
rotate();rotateX(),rotateY()
scale(tx,ty);scaleX()scaleY()
skew(tx,ty); skewX()skewY()
transform-origin:left top;
css33d变形
translate(tx,ty);translateX(),translateY(),translateZ(),translate3d(tx,ty,tz)
rotate();rotateX(),rotateY(),rotateZ(),rotate3D(tx,ty,tz,deg)
scale(tx,ty);scaleX()scaleY(),scaleZ(),scale3D(tx,ty,tz)
transform-origin:left top;
transform-style:preserve-3d;
perspective();
transform:perspective();
perspective-origin();
动画：
过渡类型:transition:width 2s 2s linear;

逐帧动画
@keyframes name{
from{}
to{}
}
@keyframes name{
0%{}
100%{}
}
animation:name 10s 2s linear infinite alternate paused none forwards backwards both;

animation-iteration-count:2;

animation和transition:
都是随着时间改变元素的属性
transition触发事件才执行
animation自动执行
backface-visibility:visible,hidden;

一个子元素在div里水平垂直居中的方法有哪些（div是已知大小，考虑浏览器兼容）