web作业

元素显示模式：块元素、行内元素（<span>）、行内块元素 
表格标签：
表单标签：
<form action="#" >
input  type="" value="" (单选框、多选框必须有)  name
select     option
</form> 
默认选中 checked（多选框）    selected
h5标签
css：层叠样式表
基本样式：
选择器{
属性名：属性值；
}
引入方式
外部样式    <link>
内部样式     style
行内样式     style="color:pink;"
选择器：
基本选择器：标签选择器、类选择器(.box1)、id选择器(#box2)、通配符选择器
div class="box1" id="box2"
包含选择器:子代选择器（>    亲生儿子）、后代选择器（   后代所有）
font-size       font-weight       font-style        
逗号选择器：div，
                    p，
                    span{}
属性选择器：
                    input[type="password"]
             ^     $          *
 /* :hover   鼠标悬停 */
cursor  鼠标样式
结构伪类选择器：
父元素    子元素:nth-child(n)    :父元素第n个子元素
even：偶数
odd：奇数
盒子模型  
包括：边框，外边距，内边距和实际内容
内边框
用padding设置内边距
padding-left
padding-right
padding-bottom
padding-top
padding的复合写法
一个值：上下左右
两个值:上下  左右
三个值:上 左右 下
四个值:上 右 下 左  顺时针

外边框
用margin设置外边距
margin-left
margin-right
margin-bottom
margin-top
margin的复合写法(同padding)
外边距margin注意事项:
1、子元素的margin是参考父元索的padding计算的
2、上左margin影响自身的位置，下右影响兄弟元素的位置
3、行内元素上下margin设置后无效果
4、margin-left:auto距离左边能多远多远 块级元素:左右margin设置auto则块级元素水平居中
5、margin可以为负值

margin塌陷问题:父元素里，给第一个子元素设置margin-top值，给最后一个子元素设置margin-botom值，都会被父元素抢走
解决方法:
1.给父元素加边框
2.给父元素加padding
3.overflow: hidden 溢出之后隐藏-------偏方
 
margin合并问题:存在于上下外边距之间
尽量规避，解决的副作用太大

文本溢出解决方法：加上overflow: auto;

解决patting/border影响盒子大小问题
加上box-sizing: border-box;

元素浮动后的特点
脱离文档流
无论元素类型，只要浮动，就按照浮动规则来:默认宽高都是被内容撑开的(尽可能小)，而且可以设置宽高
和其他元素共用一行 (一个天上，一个地上)
不存在外边距塌陷
没有行内块元素的空白问题

浮动后的影响:
父亲的高度塌陷(脱离文档流)
父亲的兄弟，顶上去
子元素有浮动，其后边兄弟有影响，对其前边的兄弟没有影响对兄弟元素的影响: 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟无影响。对父元素的影响:不能撑起父元案的高度，导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。

解决影响:
1、给父亲加height     未解决对兄弟元素的影响
2、直接让父亲也浮动      问题更加严重
3、父亲的兄弟直接文字环绕overflow: hidden  问题更大，子元素兄弟直接连数字直接丢失
4、接近完美:clear: left==========消除左浮动影响 :不能为行内元索自身不能浮动

开启3d空间:给父元素添加transform-style:preserve-3d
perspective:;不能给负数  有透视效果-------近大远小景深  景深默认值为none

透视点的位置
设置透视点位置:观察者的位置
perspective-origin:100px200px;人蹲下200px，然后向右边移动100px般情况下不需要更改