选择器

class(类选择器)和id(选择器)

class:类选择器，类名自己指定，多个元素可拥有同一个类名，类选择器是以英文句号（.）开头的

id:选择器，设置元素的id属性为该元素的定制id,每个id在文档中必须唯一，ID选择器是以#开头的

举例:
p标签同时具有class属性和id属性


id 属性值 principal必须在文档中是唯一的；
但文档中的其他标签可以有和p相同的 class 属性值key.

在css样式表中，下面的规则使所有属性class=key的元素文字为绿色

.key{
color:green;
}

下面的规则使id = principal的文字变为粗体

#principal {
  font-weight: bolder;
}

css规定具有更高确定度的选择器优先级更高。
确定度：id选择器>类选择器>tag selector(标签选择器)
如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高

伪类选择器

CSS伪类pseudo-class加在选择器后面的用来指定元素状态的关键字

:hover
：鼠标悬停在选中元素上时应用样式
:visited
：是否访问过

基于关系的选择

选择器	选择的元素
A E	元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E	元素A的任一子元素E(也就是直系后代)
E:first-child	任一是其父母结点的第一个子节点的元素E
B + E	元素B的任一下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E

语法技巧

注释以/* */结束
选取器组，可以过个选取器使用同一个样式
如：

h1,h2,h3 {color:navy;}

浏览器支持的所有颜色

内容

CSS可以在元素的前后插入文本：在选择器的后面加上::before
或者 ::after
，在声明中，指定 content
属性，并设置文本内容。
举例：
在所有雷鸣包含ref的元素前面加上Reference:

.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference: ";

盒模型

即元素，内边距，边框，外边距

border：边框

样式包括

solid
dotted
dashed
double
inset
outset
ridge
groove

文本布局：
text-align:内容对其。left，right，center，justify

position
属性:

relative
通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
fixed
为元素指定相对于窗口的确切位置。即使文档的其它元素出现滚动，元素位置仍然不变。
absolute
为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
static
默认值。当明确要关闭位置属性时使用。

和 position 属性(除了 static)一起使用的, 有下列属性: top, right, bottom, left, width, height 通过设置它们来指定元素的位置或大小。

举例：
比如，我们想要两个元素叠加，具有层级关系，css没有z轴的概念，但是我们可以设置一个父容器postion:releative,然后两个子容器都为position:absolute，这样两个子容器都会存在相对于父容器的指定位置，比如magin:0px,top:0px,left:0px后者覆盖前者。

display属性

block：块级元素

div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。
inline：行内元素
span 是一个标准的行内元素。一个行内元素可以在段落中像这样包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none:不删除元素的情况下影藏或显示元素

举例：

#main {
  width: 600px;
  margin: 0 auto; 
}
/**

设置块级元素width,防止撑满容器，然后外边距auto，可以让其居中显示，然后剩余的宽度会一分为二成为左右外边距。
有时候用max-width替代width在移动设备更好
**/

box-sizing

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

float属性可实现文字环绕图片

img {
  float: right;
  margin: 0 0 1em 1em;
}

flexbox

在css中要使用flexbox的元素，需要指定

display : flex

或者

display : inline-flex

方向(Direction)：
flex-flow是flex-direction和flex-wrap属性的缩写，决定弹性项目如何排布
行(Line)：
根据flex-wrap,弹性项目可以排布在多行或者单行
尺寸(Dimension):
min-height与 min-width 属性初始值将为 0。
flex
属性是 flex-grow
、flex-shrink
和 flex-basis
属性的简写，描述弹性项目的整体的伸缩性。

css笔记1：基础属性

选择器