0%

CSS知识点整理 —— 持续更新

清除浮动

清除浮动,指的是清除浮动与浮动之间的影响。浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。

方法一,给盒子加高度,因为麻烦,并且不能适应页面的快速变化,一般不使用。

方法二,clear:both; 它的的意思是:不允许左侧和右侧有浮动对象。 存在的问题:它所在的标签,margin属性失效了

方法三,上面这个例子中,为了防止第二个div贴靠到第二个div,我们可以在这两个div中间用一个新的div隔开,然后给这个新的div设置clear: both;属性;同时,既然这个新的div无法设置margin属性,我们可以给它设置height,以达到margin的效果(曲线救国)。这便是隔墙法内墙法: 在div里设置一个墙来撑起高度。

方法四,overflow:hidden; 的本意是清除溢出到盒子外面的文字。但是,前端开发工程师发现了,它能做偏方:一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方。并且,overflow:hidden;能够让margin生效。

定位属性

相对定位

让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调)。不脱标,老家留坑,别人不会把它的位置挤走。相对定位,就两个作用:

  • (1)微调元素
  • (2)做绝对定位的参考,子绝父相

绝对定位

定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示,纵坐标用top或者bottom表示。绝对定位的盒子脱离了标准文档流。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block就可以设置宽、高了。

绝对定位参考点
  1. 如果用top描述,那么参考点就是页面的左上角,而不是浏览器的左上角。

  2. 如果用bottom描述,那么参考点就是浏览器首屏窗口尺寸,对应的页面的左下角。

  3. 以盒子为参考点,一个绝对定位的元素,如果父辈元素中也出现了已定位(无论是绝对定位、相对定位,还是固定定位)的元素,那么将以父辈这个元素,为参考点。

    注意:

    • 要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷:

      <div class="box1">        相对定位
              <div class="box2">    没有定位
                  <p></p>           绝对定位,将以box1为参考,因为box2没有定位,box1就是最近的父辈元素
              </div>
          </div>
      
      1
      2
      3
      4
      5
      <div class="box1">        相对定位
      <div class="box2"> 相对定位
      <p></p> 绝对定位,将以box2为参考,因为box2是自己最近的父辈元素
      </div>
      </div>
    • 不一定是相对定位,任何定位,都可以作为儿子的参考点:

      子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是在工程上,如果子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。父相的意义在于父亲元素还留在标准流里,保证页面稳定。“子绝父相”有意义:这样可以保证父亲没有脱标,儿子脱标在父亲的范围里面移动。于是,工程上经常这样做:

      父亲浮动,设置相对定位(零偏移),然后让儿子绝对定位一定的距离。

    • 绝对定位的儿子,无视参考的那个盒子的padding:

      下图中,绿色部分是父亲div的padding,蓝色部分p是div的内容区域。此时,如果div相对定位,p绝对定位,那么, p将无视父亲的padding,在border内侧为参考点,进行定位:

固定定位

就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。

z-index

表示谁压着谁。数值大的压盖住数值小的。

有如下特性:

(1)属性值大的位于上层,属性值小的位于下层。

(2)z-index值没有单位,就是一个正整数。默认的z-index值是0。

(3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

(4)只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用

(5)从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。

选择器

CSS选择器

 div 标签选择器

 .box 类名选择器

 #box id选择器

 div p 后代选择器

 div.box 交集选择器

 div,p,span 并集选择器

 div>p 子代选择器

 * : 通配符

 div+p: 选中div后面相邻的第一个p

 div~p: 选中的div后面所有的p

CSS3,属性选择器

  • E[title] 选中页面的E元素,并且E存在 title 属性即可。
  • E[title="abc"]选中页面的E元素,并且E需要带有title属性,且属性值完全等于abc。
  • E[attr~=val] 选择具有 att 属性且属性值为:用空格分隔的字词列表,其中一个等于 val 的E元素。
  • E[attr|=val] 表示要么是一个单独的属性值,要么这个属性值是以“-”分隔的。
  • E[title^="abc"] 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 开头。
  • E[title$="abc"] 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 结尾。
  • E[title*="abc"] 选中页面的E元素,并且E需要带有 title 属性,属性值任意位置包含abc。

结构伪类选择器

  • E:first-child 匹配父元素的第一个子元素E。

  • E:last-child 匹配父元素的最后一个子元素E。

  • E:nth-child(n) 匹配父元素的第n个子元素E。注意,盒子的编号是从1开始算起,不是从0开始算起。

  • E:nth-child(odd) 匹配奇数

  • E:nth-child(even) 匹配偶数

  • E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。

  • E:first-of-type 匹配同类型中的第一个同级兄弟元素E。

  • E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。

  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

  • E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。

  • E:empty 匹配没有任何子节点(包括空格等text节点)的元素E。

  • E:target 匹配相关URL指向的E元素。要配合锚点使用。

伪元素选择器

伪元素选择器的标志性符号是 ::

  • E::before 设置在 元素E 前面(依据对象树的逻辑结构)的内容,配合content属性一起使用。
  • E::after 设置在 元素E 后面(依据对象树的逻辑结构)的内容,配合content属性一起使用。

E:afterE:before 在旧版本里是伪类,在 CSS3 这个新版本里是伪元素。新版本里,E:afterE:before会被自动识别为E::afterE::before,按伪元素来对待,这样做的目的是用来做兼容处理。

  • E::first-letter 设置元素 E 里面的第一个字符的样式。
  • E::first-line 设置元素 E 里面的第一行的样式。
  • E::selection 设置元素 E 里面被鼠标选中的区域的样式(一般设置颜色和背景色)。

box-sizing

外加模式:(css的默认方式)

1
box-sizing: content-box;

解释:此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小,也不会改变内容的宽高,而是盒子的总宽高发生变化。

内减模式:【需要注意】

1
box-sizing: border-box;

解释:此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小,会改变内容的宽高,盒子的总宽高不变。

-------------本文结束感谢您的阅读-------------