CSS基础之浮动定位、显示、光标、定位

1、浮动定位
  1、定位
    简单点说,定位就是改变元素在页面上的默认位置
  2、定位的分类
    按照定位的效果,可以分成以下几类:
    1、普通流定位(默认方式)
    2、浮动定位
    3、相对定位
    4、绝对定位
    5、固定定位
  3、定位方式-普通流定位
    普通流定位,又称为“文档流定位”,页面中所有元素默认定位方式
    所有元素默认都是在其父元素的左上方开始出现,


    页面中所有的块级元素,按照从上到下的方式排列,每个元素独占一行


    页面中所有的行内元素,按照从左到右的方式排列,
    多个元素在一行内显示,显示不下自动换行


    问题:多个块级元素想在一行内显示???<核心>-浮动定位
  4、定位方式-浮动定位
    1、浮动定位的概述 & 特点
      如果将元素的定位方式设置为浮动定位的话,那么元素将具备以下特征
      1、元素会排除在文档流之外即脱离文档流,所有脱离文档流即不占据页面空间(但是可以显示在页面中)。
      其他剩余元素要上前补位。
      2、浮动元素会停靠在父元素的左边或者右边,或者其他已浮动元素的边缘上
      3、浮动只在当前行浮动
      4、浮动元素依然位于父元素包含框之内
      5、浮动元素处理的问题-能够让多个块级元素在一行显示
    2、语法
      属性:float
      取值:
        1、none
          默认值,即无浮动效果
        2、left
          左浮动,停靠在父元素的左边,或挨着左侧已有的浮动元素
        3、right
          右浮动,停靠在父元素的右边,或挨着右侧易用的浮动元素
    3、浮动引发的特殊效果
      1、当父元素的宽度显示不下所有的已浮动子元素,
      那么最后一个将换行,但,有可能被卡
      2、元素一旦浮动起来之后,宽度将变成自适应(由内容来决定宽度)
      3、元素一旦浮动起来之后,那么将变成块级元素,尤其对行内元素影响最大
        块级元素:能修改尺寸
        行内元素:不能修改尺寸
      4、文本,行内元素,行内块元素是采用环绕的方式排列的,是不会被浮动元素压在底下的,

      而会巧妙的避开浮动元素


向右浮动效果:


向左浮动效果:


    4、清除浮动
      元素浮动起来之后,会对后续的元素带来位置的影响。如果后续元素不想受到任何影响的话,
      可以通过清除浮动的方式来解决。清除浮动后,元素不会上前占位。
      属性:clear
      取值:
        1、none
          默认值,不做任何清除操作
        2、left
          清除当前元素前一个元素左浮动带来的影响
        3、right
          清除当前元素前一个元素右浮动带来的影响
        4、both

          清除当前元素前一个元素左或右浮动带来的影响

    5、浮动元素对父元素高度的影响
      由于浮动元素会脱离文档流,所以会导致元素不会占据父元素的控件,
      会对父元素的高度带来一定的影响。父元素高度是以没有浮动子元素的高度
      为准。(如果全是浮动子元素,那么父元素的高度为0)
      解决方案:
      1、直接设置父元素高度
        弊端:必须知道父元素的高度是多少
      2、设置父元素也浮动
        弊端:不是任何时候父元素都需要浮动,元素浮动后会影响后续元素的位置
      3、为父元素设置overflow属性
        取值为:hidden 或者 auto
        弊端:如果内容中有东西要溢出显示(如弹出框)
        那么也会一同被隐藏
      4、父元素中,追加块级空子元素(必须是块级),并设置其clear属性为both
      5、... ...
2、显示
  1、显示方式
    显示方式决定了元素在页面中默认的定位方式
    属性:display
    取值:
      1、none
        让生成的元素不显示,并且脱离文档流
      2、block
        让元素表现的和块级元素一样
      3、inline
        让元素表现的和行内元素一样
      4、inline-block
        让元素表现的和行内块一样
        多个行内块在一行内显示,并且允许修改尺寸
        (radio,checkbox除外)
  2、显示效果
      1、visibility
      作用:可见性
      属性:visibility
      取值:
        1、visible
          默认值,可见的
        2、hidden
          隐藏的,依然占据页面空间
        3、collapse
          用在表格中,删除一行或一列时,不影响表格整体布局


      visibility:hidden 与 display:none的区别
      display:none;脱离文档流,所以不占页面空间
      visibility:hidden;没有脱离文档流,所以占页面空间,不显示内容而已
      2、opacity
        作用:指定元素的透明度
        属性:opacity
        取值:0(完全透明)-1(完全不透明)之间的数字
      3、vertical-align
        作用:垂直居中对齐,不是所有的元素能使用,控制的是当前元素两边的文本或行内元素
        相对于当前元素的垂直对齐方式
        注意:用在 td 或 行内块元素 或 img中
        取值:
          1、top:顶部对齐
          2、middle:中间对齐
          3、bottom:底部对齐
          4、baseline:基线对齐
        基线对齐:
          1、行内块元素的基线
            基线是在最后一行文本的底端
          2、图像

            基线是在图像底部再向下3px处

顶部对齐、中间对齐、底部对齐、基线对齐示意图:

  3、光标
        作用:改变鼠标的显示状态
        属性:cursor
        取值:
          1、default
            默认
          2、pointer
            小手状态,与a标记移入时一样
          3、crosshair
            +
          4、text
            I
          5、wait
            等待
          6、help
            帮助
3、列表
  1、列表项标识
    属性:list-style-type
    取值:
      1、none
        无标记
      2、disc
      3、square
      4、circle
      ... ...
  2、列表项图像
    属性:list-style-image
    取值:url();
  3、列表项位置
    默认位置:标识默认列表项内容区域之外
    属性:list-style-position
    取值:
      1、outside
        默认值
      2、inside
        将标识放置于列表项区域之内
  4、列表属性
    属性:list-style
    取值:type url() position;


    常用方式:list-style:none;
4、定位
  1、定位属性
    1、定位方式
      属性:position
      取值:
        1、static:静态定位,默认定位
        2、relative:相对定位
        3、absolute:绝对定位
        4、fixed:固定定位
      注意:将position设置为
      relative/absolute/fixed 任意一种定位方式的话,那么该元素就被称为“已定位元素”
    2、偏移属性
      属性:
        1、top:以元素顶端作为基准点,上下移动元素
        2、bottom:以元素底端作为基准点,上下移动元素
        3、left:以元素左边作为基准点,左右移动元素
        4、right:以元素右边作为基准点,左右移动元素
    3、堆叠顺序
      作用:堆叠效果中,显示调整堆叠顺序
      属性:z-index
      取值:没有单位的数字
  2、相对定位
    1、什么是相对定位
      元素会相对于它原来的位置偏移某个距离
      实现元素位置的微调
    2、语法
      属性&值:
        position:relative
      配合偏移属性实现位置的微调

        top/bottom/left/right

偏移属性示意图:


  3、绝对定位
    1、什么是绝对定位
      1、绝对定位的元素会脱离文档流,不占据页面空间
      2、会相对于它 最近的 已定位的 祖先元素去实现位置的初始化
      3、如果当前元素没有 已定位的祖先元素,
      那么就会相对于最初的包含框实现位置初始化,比如body或html
      4、绝对定位的元素会变成块级元素
    2、语法
      属性 & 值:
        position:absolute;
      配合着 偏移属性 实现元素的定位(位置移动)
    3、使用场合
      1、弹出菜单一律采用绝对定位的方式
  4、堆叠顺序
    1、什么是堆叠顺序
      产生堆叠效果之间的元素的排列顺序
    2、语法
      属性:z-index
      取值:没有单位的数值
    3、注意问题
      1、必须是已定位元素才能使用z-index
      2、默认顺序是 后来者居上
      3、父子关系之间无法用z-index调整堆叠顺序,永远都是 子压在父上
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值