zoukankan      html  css  js  c++  java
  • Python Day51 前端css布局2

    一、伪类

      

    注释:在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!

    注释:在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!

    二、dispaly属性

    1. none
    2. block
    3. inline
    4. inline-block

    1.none(隐藏某标签)

    注意与visibility:hidden的区别:

    visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

    display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

    2.block(内联标签设置为块级标签)

    注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

    3.inline(块级标签设置为内联标签)

    4.inline-block

    display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:

    ***

        块级: 可设长宽 独占一行
      内联: 可在一行显示 不能设置长宽
      display:inline-block 可设长宽 可在一行显示

    三、position

    1 static

    static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

    2  position: relative/absolute

    relative: 相对定位。

    相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

    注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。

    absolute: 绝对定位。

    定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

    重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。

    另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

    3  position:fixed

       fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

           在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

    position:

    relative: 空间位置依然存在,并未脱离文档流;参照物是之前的位置;
    absolute:完全脱离文档流;参照物是已经定位的父标签

    relative+absolute

  • 相关阅读:
    JS 正则查找与替换
    MySQL 批量插入值
    Python/Django 批量下载Excel
    Python/Django 下载Excel2007
    Python/Django 下载Excel2003
    Python3安装Scrapy
    服务器响应状态码
    细说同域-同父域-跨域
    细说Ajax跨域
    PostgreSQL学习
  • 原文地址:https://www.cnblogs.com/liuduo/p/7794756.html
Copyright © 2011-2022 走看看