HTML
<meta>
标签
<video>
标签
自定义列表
<dl>
(description list)
<dt>
名词1</dt>
(description term)
<dd>
名词1解释1</dd>
(description description)
<dd>
名词1解释2</dd>
<dt>
名词2</dt>
<dd>
名词2解释1</dd>
<dd>
名词2解释2</dd>
</dl>
HTML5新个性
(不反对 ie8 及 ie8 以下版本的浏览器)
- 语义标签
- 增强型表单
- 视频和音频
- Canvas绘图
- SVG绘图
- 天文定位
- 拖放API
- WebWorker
- WebStorage
- WebSocket
锚点跳转
以后页面a.html: <a href="b.html#aaa">
跳转到b页面aaa处</a>
另一页面b.html: <a name="aaa" id="aaa">aaa</a>
CSS
选择器品种
相邻选择器(h1 + p)、子选择器(ul > li)、后辈选择器(li a)
选择器优先级
!important > 内联 > id选择器 ( #id{}) > class类选择器 (.class{}) = 属性选择器(a[href="xxx"]{}
) = 伪类选择器 (:xxx{}) > 伪元素选择器(::before{}) = 标签选择器(span{}) > 通配符选择器(*{}) > 继承父元素 > 浏览器默认
款式继承
- 可继承的款式: font-size font-family color, UL LI DL DD DT;
-
不可继承的款式: width height 、margin border padding ;
将超出的文本内容替换成省略号
graph TD 设置宽度 width --> 设置文本不换行 white-space:nowrap-->暗藏溢出内容 overflow:hidden-->省略溢出内容 text-overflow:ellipsis
CSS3 新个性
- 色彩:新增 RGBA、HSLA
- 文字暗影 text-shadow
- 边框圆角 border-radius、边框暗影 box-shadow
- 盒子模型 box-sizing
- 背景 background-size
- 设置背景图片尺寸 background-origin
- 设置背景图片原点 background-clip
- 设置背景图片裁剪区域,以“,”分隔能够设置多背景,用于自适应布局
- 突变:linear-gradient、radial-gradient
- 过渡:transition可实现动画
- 自定义动画
- 在CSS3中惟一引入的伪元素是::selection
- 多媒体查问、多栏布局
- border-image
- 2D、3D转换
display: none
、visibility: hidden
和opacity: 0
display: none; |
visibility: hidden; |
opacity: 0; |
|
---|---|---|---|
是否存在 | × | √ | |
是否重绘 | √ | × | |
是否重排 | √ | × | |
是否复原子元素 | × | √ | × |
是否反对transition | × | √ | |
是否触发本身绑定事件 | × | √ | |
是否影响被遮挡元素触发事件 | × | √ |
布局
在网页中应用偶数的字体
偶数字号绝对更容易和 web 设计的其余局部形成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稠密
三栏布局
- 相对定位
- 左右浮动
- table-cell
- 圣杯布局
- 双飞翼布局
- Flex布局
-
Grid布局
革除浮动
-
在最初一个浮动标签后新增一个标签(不举荐)
毛病:增加无意义标签,语义化差clear:both;
-
暗藏父元素溢出内容(不举荐)
毛病:内容增多的时候容易造成不会主动换行导致内容被暗藏掉,无奈显示要溢出的元素overflow:hidden/auto; // 父元素 *zoom: 1; // IE6 中须要触发 hasLayout,只有IE6-IE7执行
- 应用:after伪元素革除浮动(举荐)
.父元素:after {
content: "";
display: block;
clear: both;
}
.父元素 {
*zoom: 1;
}
- 应用before和after双伪元素(最举荐)
.父元素:before,
.父元素:after {
content: "";
display: table;
}
.父元素:after {
clear: both;
}
.父元素 {
*zoom: 1;
}
程度垂直居中
-
块级元素
margin: 0 auto;
-
行内元素
text-align: center;
-
单行
line-height = height;
-
多行
display:table-cell; vertical-align: middle;
-
应用 flex 布局
display:flex; justify-content: center; align-items: center;
-
应用相对定位
position:absolute;
-
(1)
left:50%; top:50%; transform:translateX(-50%); transform:translateY(-50%);
-
(2)
margin:auto; top:0; right:0; bottom:0; left:0;
(遇到记得不太分明的概念大家也能够上菜鸟查查~)