块级:p\hr\ol\ul\dl\dt\dd\li\div\h1-h6
行内:span\strong\i\b\a\em
行内块级:img\input\select\textarea
table:
border-collapse:collapse
tr行 td 标准单元格 th表头单元格
colspan rowspan
from:
action 提交地址
method 提交方式 get/post
input:text/password/radio/checkbox/file/submit/button/hidden/image/reset
select option
textarea
checked="checked"
selected="selected"
disabled="disabled"
css:
选择器:* tagName .class #id sel1,sel2,sel3 sel1sel2 sel1 sel2 sel1>sel2 a:hover
属性:
文字: font-size font-style font-weight font-family line-height font-variant
text-align text-decoration text-indent
背景:background-color background-image background-repeat
background-position:left/center/right top/center/bottom; 100px 200px;
盒模型:
内容 width height
内填充 padding 100px 四个方向 100px 200px 上下 左右
100px 200px 300px 上 左右 下 100px 200px 300px 400px 顺时针
边框 border:1px solid #333; border-top-width border-top-style border-top-color border:none;border:0;
外边距 margin margin-top的传递问题
解决:给父元素设置边框或padding 给父元素设置overflow:hidden
overflow : hidden/auto/scroll/visible
display:block/inline/inline-block;
float:
left; 从左到右,脱离文档流
right 从右往左,脱离文档流
none; 取消浮动
清除浮动:解决浮动的元素无法撑开父级高度的问题
1、给父级设置height
2、给父级设置overflow:hidden
3、在浮动的元素之后添加一个文档流内的元素,给其添加clear:both;
.clear:after{
content:'';
display:block;
clear:both
}
.clear{
*zoom:1;
}
postion:
relative;相对定位
参照物:元素本身的位置
不脱离文档流
absolute;绝对定位
参照物:离当前定位元素最近的一个带有position属性的祖先元素,如果没有就是body
脱离文档流
fixed;固定定位
参照物:浏览器可视窗口
脱离文档流
z-index:默认值是0,数值越大层级越高
top\left\bottom\right:四个值同时设置 left、top生效
脱离文档流的元素:不区分块级和行内,宽度由内容撑开,可以设置宽
高及盒模型属性
h5新增表单元素
placeholder: 表单元素的提示文字
pattern: 给表单元素添加正则验证
form: 规定表单元素属于哪个表单
required: 规定表单元素为必填项
formaction:给按钮规定表单数据提交的位置
圆角和阴影
box-shadow: 水平阴影位置 垂直阴影的位置 阴影的模糊半径
阴影的宽度 阴影的颜色 是否内阴影
transform:(和transition一起用)
位移 translate(x,y) translateX(100px) translateY(100px)
旋转 rotate(deg)
倾斜 skew()
缩放 scale() scaleX()
动画
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。