css相关
标签嵌套问题
一般是a标签嵌套button标签
常见块级、行内元素
块级元素:div、p、(dl、dd、dt) 、form、h1~h6、hr、(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的情况:
- 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
垂直对齐的方式
- vertival-align:设置元素对齐(前提:只能用于内联元素&displa:table-cell)
- 弹性布局:align-items:center
- 父元素相对定位,子元素绝对定位
<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
获得焦点问题
- a标签没有href属性不能获得焦点!
- 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
- color
- 6个关于时间日期:date(年/月/日)、datetime(UTC时间)、datetime-local(年/月/日 时:分,无时区)、week(年:周)、month、time(时:分)
- email(在提交表单时,会自动验证 email 域的值是否合法有效)
- number
- range(类似于滑动条)
- search(类似站点搜索或者Google搜索)
- tel
- url(在提交表单时,会自动验证 url 域的值)
html5新的表单元素
原有:label、(fieldset>legend(标题))、(select>optgroup>option)、button(type:button|submit|reset)、form、input、textarea
新的
- datalist
- keygen:私钥(private key)存储于客户端,公钥(public key)则被发送到服务器
- 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)