第一章
-
拆分类 让代码更加“组件化” 简化代码 避免大量添加类
-
div 实现区域分割,添加结构;对块级元素分组。
(应该使用div根据条目的意义或功能,而不是边线方式或布局,对相关条目进行分组) -
span 对行内元素进行分组或者标识
-
微格式 ??
-
DOCTYPE声明 有效性验证;浏览器模式(标准模式、混乱模式);切换;
第二章
-
伪类:链接伪类 动态伪类
链接伪类: :link :visited(锚元素)
动态伪类: :hover :active :focus (鼠标悬停效果) -
通用选择器 *
-
高级选择器
子选择器:父元素下的一层级的子元素 例子:div>span (和后代选择器有区别) ;
属性选择器:可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 -
层叠规则
*重要度次序:1.标有!important的用户样式
2.标有!important的作者样式
3.作者样式
4.用户样式
5.浏览器/用户代理应用的样式
*特殊性
截图1 -
在body上增加类和ID,之后在主体元素上增加类名,覆盖样式。
-
使用类标识页面类型,使用ID标识特定页面。
-
继承
-
代码的结构
一 一般性样式- body样式
2.reset样式(重置默认样式??)
3.链接 a
4.标题 title
5.其他元素
二 辅助样式
1.表单
2.通知和错误
3.一致的条目
三 页面结构
1.标题、页脚和导航
2.布局
3.其他页面结构元素
四 页面组件
各个页面
五 覆盖
- body样式
第三章
-
盒模型 如何显示和如何交互
-
外边距叠加 只有普通文档流发生后,行内框、浮动框或绝对定位框之间的外边距不会叠加
-
可视化格式模型
规定了用户端在媒介中如何处理文档树(document tree) -
布局影响因素:box的尺寸和类型;定位体系(常规流,浮动,absolute);document tree中,元素之间的关系;外部信息(窗口,图片的故有尺寸,会影响行内替换元素的尺寸)
-
视口
即可视窗口。当可视窗口的尺寸大小改变时,浏览器应该改变文档的布局。比如,有些值是依赖于可视窗口的大小的,DIV width的auto值,等等。
当可视窗口的尺寸小于文档渲染的画布(也就是页面)的大小时,浏览器应该提供滚动机制。每个画布最多有一个可视窗口。但是,浏览器可以同时渲染多个画布。也就是说,浏览器可以打开多个页面,但是每个页面最多只有一个可视窗口。 -
匿名块框
-
相对定位:相对于起点移动;仍然占据原来的空间!;可以看作普通流定位模型的一部分。
-
绝对定位:与普通流定位无关,空间消失;相对于距离它最近的已经定位的祖先元素决定,如果没有祖先元素,则相对于初始包含块。可以覆盖其他元素,与z-index有关,值越高,位置就越高;需要固定尺寸,避免重叠。
-
固定定位
-
浮动:脱离文档流,不影响不浮动的元素,但是文本行框会围绕浮动框
浮动元素脱离了文档流,所以包围图片和文本的div不占据空间。可以在其中添加一个空元素并且清除浮动。