CSS基础完结篇

一、position

position：它的英文意思“位置”的意思

它在CSS中主要是用来实现对一个元素的定位

在CSS中定位有三种方式：

固定定位 position:fixed

相对定位 position:relative

绝对定位 position:absolute

 

注意：

要实现一个元素的定位 那么一定使用定位的坐标！

left：表示定位的元素离左边多远

right：表示定位的元素离右边多远

top：表示定位的元素离上边多远

bottom：表示定位的元素离下边多远

 

 

固定定位

什么是固定定位？

固定定位它是相对于“浏览器窗口”来进行定位！不管页面如何滚动，固定定位元素它的位置不会发生改变！

语法格式：

position:fixed;

定位的坐标

特点：

• 固定定位元素它脱离了标准文档流
• 固定定位元素它不再占用空间
• 固定定位元素它的层级比普通元素要高 并且它会压住普通元素
• 固定定位元素它的位置不会发生改变！

 

案例1：使用固定定位来实现返回顶部的按钮！

 

案例2：使用固定定位来实现顶部的导航栏！

 

 

 

 

 

相对定位

语法格式：

position:relative;

什么是相对定位？

相对定位它是相对于“原来的自己”来进行定位！

 

特点：

• 如果相对定位元素不加定位的坐标属性 那么相对定位元素它还在原来的位置！
• 如果相对定位元素使用了定位坐标的话 那么它会在它的老家留下一个坑！
• 相对定位元素它没有脱离标准文档流！
• 相对定位元素它会压盖住普通元素！

 

相对定位元素这个属性它一般自己很少使用，因为它会在老家给自己留一个坑！相对定位元素它一般是用来配合绝对定位来使用！

 

 

绝对定位

格式：

position:absolute;

什么叫绝对定位？

绝对定位元素它是相对于“祖先定位元素”为作为参照物来进行定位！

绝对定位元素它会先去找它的父元素是否有进行定位  如果它的父元素有进行定位 那么它会参照于其父元素来进行定位，但是如果它的父元素没有进行定位 那么它会去找其爷爷元素  如果说绝对定位元素它的祖先都没有进行定位的话 那么它会以“浏览器窗口”来进行定位！

 

俗语：

“子绝父相！”  ==è儿子是绝对定位 老爸是相对定位

 

绝对定位的特点：

n 绝对定位元素它脱离的标准文档流！

n 绝对定位元素它不再占用空间！

n 绝对定位元素它会压盖住普通的元素

 

假设：绝对定位元素它的父元素与它的爷爷元素都进行了相对定位 ，那么请告诉我这个绝对定位元素它会以谁来作为参照物来进行定位！  它会以其父元素作为参照物来进行定位！

 

二、z-index

我们可以将z-index理解为PS软件里面的图层的概念！

• z-index它就表示谁压着谁，值大的压值小的！
• z-index它的值是一个正整数  它的值没有单位  
• 只有使用了定位的元素它可以设置z-index的值   如果说定位了的元素没有设置z-index值 那么它的值默认就是0
• 如果说定位了的元素都没有设置z-index的值 那么跟HTML结构有关 谁在后面就会压盖住前面的元素！
• 定位元素它会压盖住普通元素！

 

 

 

三、border-radius

 

 

 

四、box- shadow

盒子阴影

box-shadow：水平阴影  垂直阴影  阴影的模糊大小  阴影的大小  阴影的颜色  阴影在哪里

 

 

五、text-shadow

 

 

六、border-collapse

border-collapse:collapse;  它主要是用来设置很细的表格边框线