css综合包括

display:none和visibility:none和opacity:0的区别

  1. display:none元素不可见。这个属性会让元素完全消失,不会占有原来的空间,会被下一个元素占用。
  2. visibility:hidden也表示元素不可见。但是这个元素还是会占有自己的空间,不会让下一个元素填充。
  3. opacity:0opacity表示元素的透明度,当透明度为0 的时候元素就消失了,空间还是会被自己占有。

查看demo

细节:
display:none由于元素已经不存在了,是不能设置任何动画的。visibility:hidden也不能设置动画,元素不可见,点击不了。
opacity:0元素可以设置动画。在通过visibility控制元素不让用户点击

查看demo

绝对定位position: absolute到底相对于父元素的内容的哪个位置

position:absolute 子元素相对于父元素的定位,在父元素的border里面,不包括border。

css综合包括_第1张图片
不包括border部分

如果想对齐父元素的左下角,给子元素的left设置为父元素的border负值

查看demo

vertical-align:middle的简单运用

CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

  1. 对于表单元素的垂直局中,设置到单元格中控制内部元素。(无论是行内元素还是块级元素


    css综合包括_第2张图片
    对于表格的垂直局中

    )

  2. 用于块级元素中的行内元素的垂直局中
    通过float,vertical的实现同一个效果。
    查看demo

大小写区分

html不区分大小写,css,js都区分大小写。

你可能感兴趣的:(css综合包括)