查漏补缺清单

6 篇文章 0 订阅
1 篇文章 0 订阅

 css相关

 

 标签嵌套问题

 一般是a标签嵌套button标签

 

 常见块级、行内元素

 块级元素divp、(dl、dd、dt) 、formh1~h6hr、(ul、ol、li)、(table、tbody、td、tfoot、th、thread、tr)(html5:header、nav、article、section、aside、footer、main、figure)、address 、caption 、fieldset、legend、pre、noframes、noscript

 行内元素

 行内块级元素:input 、img

 

块级元素与行内元素的区别

1)

  •   块级元素会独占一行,其宽度自动填满其父元素宽度
  •  行内元素不会独占一行,纸质下一行排不下才会换行,其宽度随元素的内容变化

2)

  •  块级元素可以嵌套任意元素;一些特殊的块级元素如:dl、dt、dd、h1-h6这些标题标签不推荐嵌套块级元素
  • 行内元素不能嵌套块级元素;

3)

  • 行内元素不能设置width/height/padding-top/pading-bottom/margin-top/margin-bottom;只能用magin左右、padding左右来改变宽度

 

 

块级元素与行内元素的转换

  •  display:inline-block
  •  display:inline
  •  display:block

 css3新增特性

 1. css3选择器

 2. css3边框

 3.  css3背景

 4.  css3渐变

 5.  css3文本效果

 6. css3字体(@font-face规则)

 7. css3转换和变形 1)2D转换方法 2)3D转换属性

 8. css3过渡(transition属性)

 9. css3动画 (@keyframes规则 animation属性)

 10. css3多列

 11. css3盒模型

 12.  css3伸缩布局盒模型(弹性盒子)(felxbox)

 13.  css3多媒体查询

 

 

BFC块级上下文

能够形成BFC的情况:

  1.    dispaly:inline-block

要点:BFC不与float元素重叠!!

 

 盒模型

块之间共享垂直外边距(margin),margin取其大

清除浮动

暂无

Width相关

ele.clientWidth=width+padding

ele.offsetWidth=width+padding+border

ele.scrollTop=被卷上去的上策距离

ele.scrollHeight=自身实际的高度(不加边框)

 

 锚伪类

用来表示链接不同状态的伪类!

love与hate:link->vistied->hover->acive

 

 垂直对齐的方式

  1. vertival-align:设置元素对齐(前提:只能用于内联元素&displa:table-cell
  2. 弹性布局:align-items:center
  3. 父元素相对定位,子元素绝对定位
<style>

parent{

position:relative;

}

child{

position:absolute;

top:50%; /*距父亲50%*/

transform:translateY(-50%);    /*自身向上移动自己高度的50%*/

}

</style>

 

 

 html相关

全局属性

所有的标签都可以用的属性!

常见:id、class、style、title、contextmenu、contenteditable、data-*、hidden、lang、draggable、

 html5新属性

暂无

 

 html5新语义元素

常见:header、nav、article、section、aside、footer、time、meter、mark、progress、figure、hgroup、figcaption、contextmenu+menu

 

获得焦点问题

  1.  a标签没有href属性不能获得焦点!
  2.  tabindex属性:  0|-1|x
  •  0: tab键可获取焦点
  •  -1:tab键不可获取焦点
  •  x:  x>0,x越小获取焦点优先级越高

 

 html5书写规范

 1. 使用button元素must指明type属性

 2. 可以省略结束标记的元素有:dd 、dt、 li p 、optgroup 、option、rt、rp、(thread、tfoot、tr、td、th

 

 video、audio的属性与方法

方法:load()、play()、pause()

事件:play()、playing()、pause()、seeked()、seeking()、abort()

 

 重绘重排问题

重排(reflow)一定重绘(repaint·),重绘不一定重排

display:none元素不显示出来,不占据空间,涉及到DOM结构,会产生reflow与repaint

visibility:hidden元素不可见但存在,保留空间,不影响结构,只产生repaint,不可触发绑定事件

opacity:0元素不可见但存在,保留空间,不影响结构,可触发绑定事件

 

html5新的input类型

原有:text、password、radio、checkbox、submit

  1. color
  2. 6个关于时间日期date(年/月/日)、datetime(UTC时间)、datetime-local(年/月/日 时:分,无时区)、week(年:周)、month、time(时:分)
  3. email(在提交表单时,会自动验证 email 域的值是否合法有效
  4. number
  5. range(类似于滑动条)
  6. search(类似站点搜索或者Google搜索)
  7. tel
  8. url(在提交表单时,会自动验证 url 域的值

 

 html5新的表单元素

原有:label、(fieldset>legend(标题))、(select>optgroup>option)、button(type:button|submit|reset)、forminput、textarea

新的

  1. datalist
  2. keygen:私钥(private key)存储于客户端,公钥(public key)则被发送到服务器
  3. output

 

 

javascript相关

json数据格式:

键值都需要加双引号""

var obj={

"name":"value",

"name":"value",

funcName:function(){

...
}

}//end 对象

 

 

bootstrap相关

 栅格选项

.col-xs- 超小屏幕 手机(<768px)

.col-sm- 小屏幕 平板(>=768px)

.co-md- 中等屏幕 桌面显示器(>=992px)

.col-lg- 大屏幕  大桌面显示器(>=1200px)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值