CSS笔记03

CSS复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

并集选择器

并集选择器是各个选择器通过逗号链接而成的，只要逗号隔开的，所有选择器都会执行后面样式

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

CSS书写规范

空格规范

1. 选择器与{之间必须包含空格–>.selector{}
2. 属性名与之后的 : 之间不允许包含空格，：与属性值之间必须包含空格
   例：font-size： 12px；

选择器规范

【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

属性规范

属性定义必须另起一行

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

标签显示模式

块级元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，
其中<span>标签最典型的行内元素。

块级元素和行内元素区别

块级元素的特点：

1. 总是从新行开始
2. 高度，行高、外边距以及内边距都可以控制。
3. 宽度默认是容器的100%
4. 可以容纳内联元素和其他块元素。

行内元素的特点：

1. 和相邻行内元素在一行上。
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
3. 默认宽度就是它本身内容的宽度。
4. 行内元素只能容纳文本或则其他行内元素。

行内块元素

常见元素inline-block
行内快元素的特点：

1. 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
2. 默认宽度就是它本身内容的宽度。
3. 高度，行高、外边距以及内边距都可以控制。

标题转换display

块转行内：display：inline
行内转块：display：block
块，行内转行内块：display：inline-block