1.Html5 有哪些新特性
画布canvas video 和 audio 元素 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除 语义化更好的内容元素,比如 article 、footer、header、nav、section 表单控件 calendar 、 date 、 time 、 email 、 url 、 search 新的技术 webworker 、 websocket 、 Geolocation 拖拽释放(Drap and drop) API ondrop
2.CSS3新特性
1、颜色: 新增 RGBA , HSLA 模式 2、文字阴影(text-shadow) 3、边框: 圆角(border-radius) 边框阴影 : box-shadow 4、盒子模型: box-sizing 5、背景:background-size background-origin background-clip 6、渐变: linear-gradient , radial-gradient 7、过渡 : transition 可实现动画 8、自定义动画 animate @keyfrom 9、媒体查询 多栏布局 @media screen and (width:800px) {…} 10、border-image 11、2D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y) 12、3D 转换 13、字体图标 font-face 14、弹性布局 flex
3.清除浮动的方式
父级 div 定义 height 结尾处加空 div 标签 clear:both 父级 div 定义伪类 :after 和 zoom 父级 div 定义 overflow:hidden 父级 div 也浮动,需要定义宽度 结尾处加 br 标签 clear:both
4.CSS3 新增伪类 - 伪元素
p:first-of-type 选择属于其父元素的首个p元素 p:last-of-type 选择属于其父元素的最后p元素 p:only-of-type 选择属于其父元素唯一的p元素 p:only-child 选择属于其父元素的唯一子元素的p元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的p元素。 :enabled 已启用的表单元素。 :disabled 已禁用的表单元素。 :checked 单选框或复选框被选中。 ::before 在元素之前添加内容。 ::after 在元素之后添加内容,也可以用来做清除浮动。 ::first-line 添加一行特殊样式到首行。 ::first-letter 添加一个特殊的样式到文本的首字母。
5.水平居中的方法
元素为行内元素,设置父元素 text-align:center 如果元素宽度固定,可以设置左右 margin 为 auto ; 如果元素为绝对定位,设置父元素 position 为 relative ,元素设left:0;right:0;margin:auto; 使用 flex-box 布局,指定 justify-content 属性为center display 设置为 tabel-ceil
6.垂直居中的方法
将显示方式设置为表格, display:table-cell ,同时设置 vertial-align:middle 使用 flex 布局,设置为 align-items:center 绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto 绝对定位中固定高度时设置 top:50%,margin-top 值为高度一半的负值 文本垂直居中设置 line-height 为 height 值
7.em和rem
em和rem是相对长度单位 em是相对于父元素的font-size rem是相对于html根元素的font-size(root em)
8.BFC详解
BFC block formatting context 块级格式化上下文 为一个元素开启一个BFC后会形成一个独立的布局环境
-
解决外边距折叠问题 在同一个BFC中的元素的外边距会被折叠
例如此处的两个盒子 上边距+下边距共为70px 但是实际外边距只有50px 这是因为外边距最终是由BFC去解析的 同一个BFC中相邻两个元素的外边距会进行折叠(collapse) 可以为其中一个盒子外边包裹一个容器 然后为容器开启一个BFC 使两个div处于不同的BFC中 外边距就不会被折叠 例如
此时可以看到两个div之间的距离明显变大 外边距不再被折叠
-
解决浮动高度塌陷问题 解决浮动引起的高度塌陷需要满足两个条件: 1.浮动元素的父元素触发BFC 形成独立的块级格式化上下文 2.浮动元素的父元素的高度是auto
此时由于子元素开启浮动 脱离文档流 父元素的高度塌陷 看不到背景色 可以对父元素触发BFC来清除浮动
此时可以看到父元素的背景色 说明已经清除浮动