css部分内容个人知识区汇总

css超链接状态：
HTML：

<div align="center" >
	<a href="http:\\jwc.cuit.edu.cn">chengdu university of information technology</a>
</div>

css：

a:link{color: cadetblue}
		a:visited{color: aqua;}
		a:hover{color: darkslateblue;}
		a:active{color: #483D8B;}

伪类，所谓的伪类即被选中的元素处于某种状态的时候
超链状态有4种
1、link - 初始状态，从未被访问过（也就是你第一看到的颜色）
2、visited - 已访问过
3、hover - 鼠标悬停于超链的上方
4、active - 鼠标左键点击下去，但是尚未弹起的时候

一般默认超链接的字样下有一横线，去除可采用 text-decoration: none（文本样式） 写入.css文件中

隐藏元素有两种方式（依我现在基本不怎么用）
display:none;
visibility:hidden;

css的优先级：

1、在html文件中的style样式标签和css里的修饰内容重复时 会依据最后的修饰为最终显示（一般都是HTML文件中的style样式）
2、和第一种情况类似，也是分HTML里的和css里的，不同的是html文件中的标签里早有style标签修饰 那么.css文件就不能显示 会依据标签里的
3、如果样式上增加了!important，则优先级最高，甚至高于style属性（也就是第二种情况标签里已有style属性）

关于css的提升内容——布局：

1、属性：position
值： absolute
设置了绝对定位的元素，相当于该元素被从原文档中删除了，也就是一列的标签通过类选择器实现，但是按照网页中标签的显示顺序会按照标签的内容一个个显示，意味着其中一个使用了绝对定位原有的位置空出来，但是绝对定位不会 相比相对定位会空出
为使在一列中使用相对定位 也可排除空位 可对下一个标签进行绝对定位即可

2、div也可以进行绝对定位，也可以配合div放入，在div中进行绝对定位

3、z-index：
通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。
重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用
z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。（z-index的值可以 是1或者0或者其他 满足大小）

4、浮动：
float:left;向左浮动直到遇到障碍物停下
这个可以联想成池塘漂浮物一个道理
float就是浮动属性
运用：默认的div排列是会换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果

5、
display:none 隐藏
display:block 块级
display:inline 内联
display:inline-block 内联-块级
display可使块级元素显示为内联元素效果 同理内联元素也是如此

内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行

有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block 盒子排列一行

6、左侧固定，右边自动占满（也可以左右固定）

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
 
<div class="left">左边固定宽度</div>
 
<div class="right">右边自动填满</div>

可以理解为填充

7、line-height方式 实现div中垂直居中
table方式：
首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 line-height就不能对图片居中。

8、
div的嵌套：

<div id="div1">
    <div id="div2"> 无论第一个高度如何变化，第二个都会贴在下面
    </div>
</div>

即便第一个是相对定位 第二个是绝对定位

9、如果多个span连续编写，像这样：

<span>连续的span</span><span>连续的span</span>

是不会有空格的
但是真正开发代码的时候，一般不会连续书写span,而是不同的span之间有回车换行，比如这样：

<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>

而这样编写代码，就会导致<span>之间出现空格

解决办法：
使用float来解决。
float使用完毕之后，记得在下面加上

用于使得后续的元素，不会和这些span重复在一起

<style>
div.nocontinue span{
  float:left;
}
</style>
  
<div class="nocontinue">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
 
<div style="clear:both"></div>
 
<div>后续的内容</div>