html复习


块级: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    规定是否应该轮流反向播放动画。

猜你喜欢

转载自blog.csdn.net/SINGLEP/article/details/79988086