《CSS权威指南》笔记
《CSS权威指南》笔记
第二章 选择器
- 分组选择器。不同选择器中采用逗号分开，没有顺序区分。
<html> <h2>我是标题，我是灰色的</h2> <p>我是段落，我也是灰色的</p> </html> <!-- 假设想要h2元素和p元素的文字是灰色的，可以使用--> <style> h2, p { color: gray } </style>
- 多类选择器。不采用任何元素分隔，没有顺序区分。
<html> <div> <p class="gray">我是灰色段落</p> <p>我不是灰色段落</p> </div> </html> <!-- 只想class为"gray"的p元素的文字是灰色的，可以采用 --> <style> p .gray { color: gray } </style> - 后代选择器。不同选择器之间采用空格分开，注意有顺序，顺序意思是下一个选择器代表的元素是上一个选择器应用元素的后代。注意这里的后代包括了任何后代，包括子、孙等。
<html> <div> <span>我是子后代，我是灰色的片段</span> <p><span>我是孙后代，我也是灰色的</span></p> </div> </html> <!-- 想要div元素里面的所有span元素的文字是灰色的,可以采用 --> <style> div span { color: gray } </style> - 子元素选择器。通过 大于号>分开，注意有顺序，顺序意思是下一个选择器代表元素是上一个选择器应用元素的子后代，仅仅是子后代。
<html> <div> <span>我是灰色的片段</span> <p><span>因为我不是子后代，而是孙后代，所以我不是灰色的</span></p> </div> </html> <!-- 想要div里面子后代为span的元素的文字是灰色，可以应用 --> <style> div > span { color: gray } </style> - 相邻兄弟选择器<。通过 +号分开。注意有顺序，顺序意思是下一个选择器代表元素是是上一个选择器应用元素的上下相邻的两个元素，注意仅仅是2个元素。
<html> <span>我不是灰色的</span> <span>我是上面，我是灰色的</span> <div我是中心 ，在我上面和下面的元素是灰色的</div> <span>我是下面，我是灰色的</span> <span>我不是灰色的</span> </html> <!-- 例如想要div上面第一个span和下面第一个的span元素文字是灰色的那么，可以使用--> <style> div + span { color: gray } </style>
第三章 结构和层叠
- 选择器层叠规则。选择器中有层叠优先级，优先级分为四个参数，初始值为0,0,0,0。其中第一位的优先级比第二位的高，以此类推，最后一位的优先级最低。
- 内联样式的优先级为最高：1,0,0,0.
- 对于选择器中给定的各个ID属性，加0,1,0,0。
- 对于选择器中给定的类属性值、属性选择、伪类，加0,0,1,0
- 对于选择器中的元素，加0,0,0,1
<!-- 下面是具体例子 --> h1{} 0,0,0,1 p em{} 0,0,2 .grape{} 0,0,1,0 p.bright em.dark{} 0,0,2,2 #id123{} 0,1,0,0 其中#id123{} 0,1,0,0优先级最高..
第四章 值与单位
- em单位。em单位会随着设置的元素字体大小改变而改变。如果元素的font-size 设置为14px，那么1em 为14px。
第六章 文本属性
- 水平居中。可以使用text-align属性。text-align属性应用于块级元素。
- 垂直居中-line-height。可以使用line-height属性,line-height属性应用于所有元素，line-height属性影响了了元素框的高度增多或者减少。line-height值主要影响着行间距，line-height值-字体高度就是行间距。如果line-height值大于字体高度，那么文本会自动垂直居中，注意，这里说是文本。
- 行内垂直居中。使用verical-align属性，verical-align属性应用于行内元素，以行内元素为参考（所以行高对verical-align影响很大）。
<!-- 例子1 --> <style> p { height: 200px } img { vertical-algin } </style> <p><img/></p>
第七章 基本视觉格式化
- 元素框的实际宽度是 = 内容区宽度+内边距+边框。
- 水平auto值。元素框三个水平参数可以设置为auto,元素框width和左右边距。如果其中一个设置为auto，其他设置为固定宽度，那么设置auto的参数将会填充剩余的空间。如果元素框的witdh设置为auto，那么默认会填充整个父元素的宽度，如果把左右边距都设置为auto，那么元素框会自动居中。内容框的auto属性优先级高于左右边距的auto属性。
- 垂直auto值。元素框的三个垂直参数可以设置为auto，元素框height和上下边距，但是不同于水平参数，如果将元素框height设置为auto，那么height将会等于内容高度，如果设置上下边距为auto，那么上下边距为0。
- 如果改变替换元素的height,或者width其中一个，那么另外一个会根据替换元素固有的长宽比例而改变。除非height和width都设置了固定值。
- 相邻外边距合并，垂直相邻的两个元素框外边距会合并。
- display属性。display属性可以更改元素的属性，设置为block可以将行内元素的显示属性更改为块级元素的属性，设置为inline，可以将块级元素的显示属性更改为行内元素的显示属性。设置为inline-block，可以将元素显示属性更改为有块级属性的行内元素，也就是该元素可以拥有width和height属性,但是不会有换行等块内元素的特征。
第十章 浮动和定位
-
浮动有三个元素可以设置，left,right,none,
-
浮动元素会从文档的正常流中删除。
-
浮动元素的外边距不会合并，浮动元素会生成一个块级框
-
浮动规则：
- 浮动元素的左(右)外边界不能超出其包含块的左(右)内边界,这种情况限制了浮动元素的左右边界。
- 浮动元素的左(右)外边界必须是文档中之前出现的左(右)浮动元素的左(右)外边界，除非后出现的浮动元素之前出现浮动元素的底部，这种情况是是为了同一个方向的浮动元素重叠，
- 左浮动元素的右边界不会在其右浮动元素的左外边界的右边，右浮动元素的左外边界不会在其左边任何左浮动元素的有外边界的左边，这种情况是为了防止不同方向的浮动元素重叠。
- 一个浮动元素的顶端不能比其父元素的内顶端更高，且浮动元素的顶端不能比之前的浮动元素或者块级元素的顶端更高，这种情况限制了浮动元素的顶部边界。
-
定位可以准确的定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素，另一个元素甚至浏览器位置。
-
定位有5个值:static ,relative,absolute,fixed,inhert.其中static为默认值,relative为相对定位，absolute为绝对定位，fixed为固定定位。
-
relative：元素框偏移某个位置，元素仍保持其未定位前的形状，它原本所占的空间保留。absolute:从文档流中被删除，并相对于其包含块定位。在文档流中删除并且生成一个包含其内容的块级框。fixed，与绝对定位类似，不过其包含块是视窗本身，同样在文档流中删除并生成一个包含其内容的块级框。
-
fixed：元素框表现类似于position设置为absolute,不过其包含块是视窗本身。
-
包含块定义:
- “根元素”包含块由用户代理建立，初始包含看是body或者html。
- 非根元素，如果其position值是relative或者static，那么包含块则是最近的块级框、表单元格、或者行内祖先框的内容边界构成。
- 非根元素，如果其position值是absolute，如果其祖先元素是块级元素，那么该祖先元素则是该元素的内边距边界。
- fixed的包含块是视窗本身。
-
定位采用了top,left,right,bottom来偏移其相对于包含块的位置。top和bottom相对于包含块的高度，left,right相对于包含块的宽度。
-
如果设置了absolute，四个偏移值同时可以设置该元素的宽高，例如设置了left和right，那么元素的宽度就是right-left.如果设置了top和bottom,那么元素的高度就是bottom-top。
-
由于默认的包含块定位值是static,所以该包含块不是设置了absolute的实际包含块，所以如果想要设置为absolute的包含块的话，那么该包含块需要设置为非static值.
-
可以通过visibility控制元素的可见性。有三个值，visible、hidden、collapse。其中hidden将使该元素不可见，但是该元素还是存在于文档流中并保持位置。
-
元素覆盖顺序。可以通过z-index更改定位元素之间的覆盖顺序，注意这里需要设置了relative、fixed,absolute定位才可使用z-index属性。有较高z-index属性值的元素会覆盖掉该值较低元素。
