css样式

---

1、选择器

id选择器

一个页面的id是唯一的，通过 #id来选择元素设置样式

#id_name{
	....
}

类选择器

class不具备唯一性，可以有多个，通过.class来设置

.class_name{
	....
}

元素选择器

就是通过标签来选择

/*设置div的样式*/
div{
	...
}

子集选择器

父级>子级

/*选择div下的儿子元素span，设置样式，（儿子级别的，不包含孙子级别的）*/
div > span{
	....
}

后代选择器

父级 子级

/*选择div中所有的span元素，设置样式，包括孙子级别的元素*/
div span{
	...
}

伪类选择器

a标签

/*未访问的连接*/
 a:link{color: black;}
 /*访问过了的连接*/
 a:visited{color: #00FF00;}
 /*鼠标划过的连接*/
 a:hover{color: red;}
 /*已选中的连接*/
 a:active{color: yellow;}
 
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

查 https://www.runoob.com/css/css-pseudo-classes.html

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素.

<div>
	<h1>...</h1>
	<p>...</p>
</div>

设置紧接在h1标签后的p标签，且属于同一父级元素的p标签的上边距
h1 + p {
	margin-top: 50px;
}

属性选择器

/*选择带有属性href和title的a标签*/
a[href][title]{
    color: red;
}

选择器分组

h1, h2, h3 {
	color:gray;
}

---

2、定位

相对定位

生成相对定位的元素，相对于其正常位置进行定位。不脱离文档流
举例：

选择器{
	position: relative;
	left:10px;    箭头指向左边，根据上图确认移动的位置
	right:10px;   箭头指向右边
	top:10px;     箭头指向上边
	bottom:10px;  箭头指向下边
}

绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，脱离文档流
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

选择器{
	position: absolute;
	left:10px;    
	right:10px;   
	top:10px;     
	bottom:10px;  
}

固定定位

生成绝对定位的元素，相对于浏览器窗口进行定位。脱离文档流
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

选择器{
	position: fixed;
	left:10px;     距离浏览器左边10px
	right:10px;    距离浏览器右边10px
	top:10px;      距离浏览器上边10px
	bottom:10px;   距离浏览器下边10px
}

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

选择器{
	float: left | right;
}

清除浮动:

clear: both | left | right | top | bottom; 

使用浮动后，元素变为行内块级元素。

---

3、边框及字体

4、display

inline：设置宽高不生效，设置边距，只在水平方向生效。
inline-block：可以设置宽高，边距。