选择器：9种
元素选择器：p {~~~}
id选择器: # myid {~~~~~}
类选择器: .class_name {~~~}
属性选择器: a[href] {~~~~~~}
后代选择器:p a {~~~}
子元素选择器: p > span {~~~~}
兄弟选择器：li + li {~~~~~}
伪类选择器: p:first-child {~~~~~~}
伪元素选择器:::first-line{~~~~~~}
层叠和特殊性
层叠（方法）：CSS通过一个称为层叠的过程处理样式冲突。（可以通俗理解为：把网页内容想象90年代的黑白电视机那会儿，精神世界又需要有彩色画面来满足，有几个层面来满足这种诉求：1、网页作者把内容直接一步到位做彩色2、网站用户自己贴彩色膜3、浏览器厂家出厂做的默认样式，这几个里面有优先级排序之分，优先级高的覆盖优先级低的，对外呈现效果）
特殊性（手段）：通过给选择器分配权重打分来确定每条规则的优先级 分为4个等级：a、b、c、d
行内样式 a=1
b等于id选择器的总数
c等于类、伪类、属性选择器的数量
d等于类型选择器和伪元素选择器的数量
来源：《精通CSS 高级web标准解决方案》p27
设计CSS代码结构
1、一般性样式
主体样式
reset样式
链接
标题
其他元素
2、辅助样式
表单
通知和错误
一致的条目
3、页面结构
标题、页脚、导航
布局
其他页面结构
4、页面组件
各个页面
使用一种风格统一的大注释块分隔每个部分
/* @group general style
--------------------------------------------
盒模型
1、页面上的每个元素被看做一个矩形框，这个元素框由内容、内边距、边框、外边距组成。初始化：使用通配符*或者全局reset把内边距和外边距显式的设置为零。（推荐后者！）
2、背景颜色会应用在内容和内边距区域。边框式是一种线。外边距是透明的，控制元素与元素间的间隔，可以为负值，外边距还会发生叠加现象。
3、只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会发生叠加。
定位
1、可视化格式模型
块框概念：p、h1、div 常常称为块级元素，显示为一块内容，即“块框”。
行内框概念：strong、span 称为行内元素，因为他们的内容显示在行中，即“行内框”。
可以改变生成框的类型的紧箍咒是：display 属性
a、值：block 行内元素像块级元素一样
b、值：none 让元素根本没有框，这个框及所有内容就不在显示，不占用文档空间。
2、CSS中有3中基本的定位机制：普通流、浮动、绝对定位。除非专门指定，默认在普通流中定位，位置由元素在html中位置 决定。
3、块级框从上到下一个接一个的垂直排列，框之间的垂直距离由框的垂直外边距计算出来。
4、修改行内框尺寸的唯一方法是修改行高或者水平边框、内边距或者外边距（水平边框、水平内边距、水平外边距）。
5、匿名块框/匿名行框的定义。由于匿名框没有与任何元素相关联（官方说法：没有文本显示定义元素，写在这儿的用途是便于揣摩显示定义四字意思。），因为无法直接对其应用样式，除非使用不常用的:first-line伪元素。只能从父元素继承那些可以继承的属性，不能继承的属性使用默认值（可以用color、border来验证测试。前者可继承，后者不可继承。）。
6、行内框：在一行中水平排列。可使用水平内边距、边框、外边距来调整它们的水平间距，但垂直内边距、边框、外边距都不影响行内框的高度，在行内框上设置显式的高度或者宽度也是没有用的。
从下面2个图，第六点表述中，
高度、宽度、垂直外边距没有起作用，但是垂直内边距和边框好像起作用了，原因是？
相对定位
1、相对定位是“相对于”元素在文档流中的初始位置。
绝对定位
1、绝对定位是“相对于”距离它最近的已定位祖先元素，如果不存在已定位的祖先元素，那么相对于初始包含块。
引入三个概念：初始包含块、画布、html元素
网友评论