CSS

1、css伪类参考地址：https://www.runoob.com/css/css-pseudo-classes.html

2、定位

　　相对定位：position:relative;

　　　　top/bottom  left/rright  文档位置不会被别的文件占据

　　绝对定位:position:absolute;

    0、position:absolute;会根据父级盒子绝对定位

    1、position:absolute盒子在下面不会占据position:relative;的空间

    2、position:absolute盒子在上面，position:relative;盒子会遮挡住上面盒子

    3、position:absolute盒子在上面，下面盒子无定位元素，盒子会占据上面盒子空间，但是不会遮挡上面盒子,可以用：opacity遮挡上面的盒子

    4、position:absolute盒子在上面，下面盒子position:relative，盒子会占据上面盒子空间，遮挡上面盒子,可以用：z-index、opacity改变图层遮挡

 

　　例子：两栏设计

　　.left{

　　position:absolute;

　　width:300px;

　　height:800px;

　　background-color:pink;

　　}

　　.right{

　　height:800px;

　　margin-left:300px;

　　background-color:red;

　　}

2、浮动  ：flaot   内联、内联块、浮动、溢出隐藏纯文本可以识别浮动流，除了块级元素

　　　　　 块级元素加了flaot  就变成内联元素

　　

 

 解决方式

　　a、添加块级元素清除

　　　　<div>

　　　　　　<div style="float:left;"></div>

　　　　　　<div style="float:left;"></div>

　　　　　　//***************添加块元素

　　　　　　<p style="clear:both;"></p>

　　　　</div>

　　　　

 

 b、使用伪元素

　　.box::after{

　　content:"",

　　display:block,clear:bath;

　　}

3、伪元素

　　::after　　　　在添加元素的盒子内部最后

　　::befor　　　　在添加元素盒子【内部】最前面

　　2个运用

　　p::after{

　　content: url(图片)或者  attr(data-userName)

　　margin-left:30px;

　　}

 

　　

 

4、BFC

　　

5、块级、内联块、内联元素

 A、块级元素可以嵌套块级元素：2个特殊的

a标签不能嵌套a标签

p标签不能嵌套div标签

B、块级标签  【独占一行，可以自定义宽高】

C、内联块  【不独占一行，可以自定义宽高】

D、内联标签 【不独占一行，不可以自定义宽高】

6、border-showdown特殊用法：边框阴影覆盖，需要遮挡的div设置position：relative；

7、border-redius 特殊用法    div中image图片裁剪角溢出，overflow：hidden；

8、background-image：url()

　　background-position:30px 40px; 50% 50%;center center;top bottom

　　background-repeat:no-repeat;

　　background-size:cover(图片裁剪，不会缩放，配合position：center居中使用)/contain（图片完整放入）;

　　background-attachment:fix;  滚动时，背景图片不变