CSS

一·css样式表优先级

内联样式优先级大于内部样式和外联样式

内部样式和外联样式同时引用，谁的代码在下面谁的优先级就高

--------------------------------

<link rel="stylesheet" type="text/css" href="./test.css" />
<style>
#pp{
color: green;
}
</style>

---------------------------------

两个外联样式同样是谁在下面谁生效

----------------------------------

<style>
@import './test1.css'
</style>
<link rel="stylesheet" type="text/css" href="./test.css" />

-----------------------------------

二·css常用选择器

1，层次选择器：相邻兄弟选择器，子选择器，后代选择器

2，基本选择器：id选择器，类选择器，元素选择器

3，伪类选择器（通常跟一个“：”号）

4，伪元素选择器（通常跟一个“::”号)

三·盒模型

 

 

 四，三栏布局

1.浮动方法

首先html部分：注意center必须写在下面，否则float会换行

---------------------------------------

<div id="container">
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="center" class="column"></div>
</div>

--------------------------------------

css部分：-----------------------

.left{
float: left;
width: 300px;
height: 100px;
}
.right{
float: right;
width: 300px;
height: 100px;
}
.center{
margin-left: 300px;
margin-right: 300px;
}

------------------------------------

2，定位方法

.left{
position: absolute;
left: 0;
width: 300px;
}
.center{
position: absolute;
left: 300px;
right: 300px;
}
.right{
position: absolute;
right: 0;
width: 300px;
}

记住要给父元素添加相对定位 position:relative

3、弹性(flex)布局:
.main {
display: flex;
}
.left{
width: 300px;
}
.center{
//flex:1的意思是平分元素
flex:1;
.right{
width: 300px;
}

五·雪碧图

雪碧图也叫CSS精灵， 是一CSS图像合成技术。（许多小图标集成在一张图片上）

background-position: 0px -24px（0：起点  -24px：图片位置）

可以减少图片字节，和网页http请求，从而提升网页速度

六·css3新增特性

新增各种CSS伪类选择器（:not(.input) 所有class不是“input”的节点）
·圆角（border-radius: 8px;）
·多列布局（multi-columnlayout）
·阴影和反射（Shadow/Reflect）
·文字特效(text-shadow)
·文字渲染(Text-decoration)
·线性渐变(gradient)
·旋转(transform)
·缩放，定位，倾斜，动画，多背景

七，css选择器优先级最高到最低顺序为：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.子选择器（ul < li）

5.后代选择器（li a）

6.伪类选择（a:hover,li:nth-child）

最后，需要注意的是：　　

• !important的优先级是最高的，但出现冲突时则需比较”四位数“;
  优先级相同时，则采用就近原则，选择最后出现的样式;
  继承得来的属性，其优先级最低。

八·position

static（默认）：按照正常文档流进行排列；不能进行top, bottom, left, right 定位；
relative（相对定位）：不脱离文档流，参考自身静态位置，通过 top, bottom, left, right 定位；但是只是在视觉上有偏差，元素仍保持其未定位前的形状，它原本所占空间仍保留。
absolute(绝对定位)：脱离文档流，参考距其最近一个不为static的父级元素，通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
sticky（粘性定位）：relative 与fixed的结合。设置top，盒子未达到top位置时，随滚动条滚动，达到那个位置，则为fixed固定。（参考微博点进某个人主页的界面，header导航栏就是这种定位。）

九·BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的布局规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.属于同一个BFC的两个相邻Box的margin会发生重叠。
3.每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.计算BFC的高度时，浮动元素也参与计算。

如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用
1.利用BFC避免margin重叠。
根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC.
2.自适应两栏布局

3.清除浮动。
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。比如说父节点设置overflow: hidden;

 

overflow:hidden;给一个元素设置，如果该元素的内容超出了给定的宽度和高度，多出点部分会被隐藏，不占位，主要用于清除浮动和解决外边距塌陷

display:none;元素不显示而且空间不保留

visibility:hidden;元素不显示但空间保留