精通CSS-高级web标准解决方案(第2版)--读书笔记02

2.3 高级选择器(接读书笔记01)

1、层叠

层叠给每个规则分配一个重要度,重要次序如下:

  • 标有!important的用户样式
  • 标有!important的作者样式
  • 作者样式
  • 用户样式
  • 浏览器/用户代理应用的样式
2、特殊性

规则的特殊性由选择器的数字值之和计算。总结如下:

  • 用style属性编写的规则总是>>>>其他规则
  • 具有ID选择器的规则>>>>无ID选择器的规则
  • 具有类选择器的规则>>>>只有类选择器的规则
  • 若两个规则特殊性相同,后定义的规则>>>>前定义的规则

tips:

  • 若遇到没有起作用的CSS规则,可尝试在选择器中添加一个父元素的ID,提高其特殊性。
  • 尽量保持一般性样式非常一般,特殊性样式尽可能特殊。
  • 可在主体标签上使用类标识页面类型,ID标识特定页面。
3、继承

应用样式元素的后代会继承样式的某些属性,比如颜色和字号。
直接应用于元素的任何样式会覆盖继承的样式,继承而来的样式的特殊性为空。


2.4规划、组织和维护样式表

1、对文档应用样式

对外部样式表附加到网页上有两种方法:1、链接它们 。 2、导入它们:

/* 两种方法都放在html的<head>中 */
/* 1.链接 */  
<link href="/css/basic.css" rel="stylesheet" type="text/css"/>

/* 2.导入 */
<style type="text/css">
-- 
@import url("/css/advanced.css"); /*通过@import引用css的样式内容 */
-->
style>

从另一个样式表导入样式表:从HTML页面链接基本样式表,然后将复杂的样式表导入这个样式表。

@import url(/css/layout.css);

注意:

  • 导入样式表比链接样式表慢
  • 使用结构良好的单一CSS文件可以显著提高下载速度
  • 当CSS文件非常长时,可以在每个样式的注释头添加特定的标志,便于搜索样式

设计代码结构
为了便于维护,最好将样式表分为几大块,使用风格统一的大注释块分隔每个部分。文档结构次序如下:

/* @group general styles */
  • 一般性样式
    • 主体样式
    • reset样式
    • 链接
    • 标题
    • 其他元素
/* @group helper styles */
  • 辅助样式
    • 表单
    • 通知和错误
    • 一致的条目
 /* @group page structure */
  • 页面结构
    • 标题、页脚和导航
    • 布局
    • 其他页面结构元素
/* @group page components */
  • 页面组件
    • 各个页面
/* @group overrides */
  • 覆盖

tips: 代码分隔越细致、越合理、越容易理解与搜索。

自我提示
复杂的大型项目中,在CSS文件中添加临时注释,例如颜色表。
关键字可用来区分重要的注释:

  • @todo:某些东西需要在以后修改、复查
  • @bugfix:代码或特定浏览器遇到的问题
  • @workaound:不完善的权宜之计

删除注释和优化样式表
注释会使CSS文件显著加大。减小文件大小可通过:

  • “搜索并替换”删除注释
  • CSS优化器
  • 启用服务器压缩(最好方式)

第三章 可视化格式模型

3.1 盒模型概述

盒模型由元素的内容(width,height),内边距(padding),边框(border),外边距(margin)组成。

外边距叠加
当两个或多个垂直外边距相遇时,它们将形成一个外边距,高度为较大者。
tips:只有普通文档流中快框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

3.2 定位概述

1、可视化格式模型

行内框
行内框在一行中水平排列。
水平各边距可以调整水平间距,垂直边距不起作用。
修改行内框尺寸的唯一方法是修改行高或水平边框、内边距或外边距。

块级框
从上到下一个个垂直排列,框之间的垂直距离由框的垂直外边距计算。

display属性

  • display:inline-block: 让元素像行内元素一样水平依次排列,框的内容仍符合块级框。
  • display:none:这个框及其所有内容不再显示。
2、相对定位

相反移动,占据空间
通过设置垂直或水平位置,让这个元素“相对于”它的起点移动。它原本的空间仍保留,移动元素会覆盖其他框。
例如:将top设置为20像素,框出现在原位置顶部下面20像素的地方。

3、绝对定位

位置相对于已定位的祖先或初始包含快,不占空间
绝对定位的元素与文档流无关,不影响普通流中的框。若扩大绝对定位的框,周围的框不会重新定位,会发生重叠。

固定定位
固定元素的包含块是视口(viewport),能够创建总是出现在窗口中相同位置的浮动元素。使元素在页面滚动时一直出现在屏幕上的固定位置。

4、浮动

不占空间

  • 浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。
  • 浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
  • 若包含块太窄,无法容纳水平排列的浮动元素,则其他浮动块会下移,直到有够的空间的地方。
  • 若浮动元素高度不同,则下移时可能会被卡住,如下图:
    精通CSS-高级web标准解决方案(第2版)--读书笔记02_第1张图片

行框
浮动元素后面有一个文档流中的元素时,元素框的文本内容受到浮动框的影响,形成:行框围绕浮动框,实际中可创建浮动框使文本可以围绕图像。

清理
clear
若要阻止行框围绕在浮动框外边,需要对包含这些行框的元素应用clear属性。
clear属性的值可以是left,right,both或none,表示框的哪些边不应该挨着浮动框。
可用于容器包围浮动元素:添加一个进行清理的空元素。clear:both。常常有现成的元素可以应用clear。

overflow
定义在包含的内容对于指定的尺寸太大的情况下元素应怎样,默认会溢出进入相邻空间。
应用值:hidden或auto
作用:自动清理包含的任何浮动元素。

你可能感兴趣的:(CSS)