CSS基础

Posted sauronblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS基础相关的知识,希望对你有一定的参考价值。

1.为什么要学习定位

1.为了解决页面中特殊的页面效果

2.为了元素能够在页面中灵活的进行移动

 

2.定位的属性

主要包括两部分:

定位模式:static relative absolute fixed

偏移量: top right bottom left

 

3.静态定位

.box 
  position: static;

 

特点:

1.所有的标签都有静态定位,相当于没有定位

2.静态定位的元素,占据标准流的位置

3.不能使用边偏移改变元素当前的位置

4.也就是说原来怎么样还是怎么样,设置的position跟没写一样。

 

4.相对定位

.box 
  position: relative;
  left: 50px;
  top: 60px;

 

1.相对定位的元素,需要设置属性position:realative;再设置一个边偏移 left /top

2.相对定位的元素不脱离标准流的位置,仍然占据原来的位置 不脱标

3.可以通过偏移量来进行位置的移动

4.是根据自身原来的位置进行的移动

5.相对定位,单纯的自身移动位置,用的并不多。一般用于限定绝对定位元素的范围。

 

5.绝对定位 absolute

.box 
  position: absolute;
  top:100px;
  left: 100px;

 

1.绝对定位的元素,需要设置属性position:absolute;如果需要移动则再需要设置边偏移 left top

2.绝对定位的元素,是可以移动位置的

3.绝对定位的元素脱离标准流 ,不占据原来的位置 脱标

4.绝对定位的元素和标准流的元素如果位置有重合的话,则会盖住标准流的元素

5.当页面中有一个绝对定位的元素时,如果设置了边偏移left,top的话,参考位置是页面的左上角

6.当子元素有一个父元素,子元素是绝对定位,而父元素没有定位的时候,则当前的子元素还是以页面为参考点

7.当子元素有一个父元素,子元素是绝对定位,而父元素是相对定位的时候,则当前的子元素移动是以父元素为参考点

8.当元素有多层嵌套的时候,子元素是一个绝对定位,参考点是以离自身最近的具有非静态(static)定位的父级盒子为参考。

9.绝对定位会改变元素原来的显示方式(行内元素,会变成行内块;块级元素也会变成行内块元素)

10.绝对定位了的元素,脱离了标准流,所以再用margin:auto无效,绝对定位的元素盒子边界是以margin为边界

 

6.固定定位fixed

.box 
  position: fixed;
  top: 10%;
  left: 100px;

 

特点:

1.固定定位脱离标准流,不占据标准流的位置

2.固定定位可以通过边偏移来移动位置

3.可以改变元素的显示方式(可以将行内元素变成行内块元素)

4.参考点是浏览器页面的可视区

 

7.定位元素的叠放次序 z-index(层级)

1.当定位的元素位置有重合的时候,会有一个默认的叠放次序

2.默认后面的元素会盖住或是压住前面的元素

3.只要是定位了的元素(不包括static定位)相当于都有一个默认的层级的概念,默认的层级是0,用z-index

4.如果要想让被压住的元素,显示在最上面,需要给被压住的元素设置一个属性z-index:最要这个值是最大,就会在最上面的显示。

5.z-index的值不要设置负数,会出现不可控的现象。

以上是关于CSS基础的主要内容,如果未能解决你的问题,请参考以下文章

HTML/CSS回顾之CSS基础

Css3之基础-2 Css 基础选择器

css实现基础图表

CSS基础

五、css基础(二)

css基础教程:对css代码精简