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

￡神魔★判官ぃ 2022-07-13 12:42 486阅读 0赞

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、文本，行内元素，行内块元素是采用环绕的方式排列的，是不会被浮动元素压在底下的，

而会巧妙的避开浮动元素

向右浮动效果：

![Center][]

向左浮动效果：

![Center 1][]

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处

顶部对齐、中间对齐、底部对齐、基线对齐示意图：![20170109225006574][]

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

偏移属性示意图：

![20170109225127965][]

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调整堆叠顺序，永远都是 子压在父上

[Center]: /images/20220713/9dfcdf3af3344a4384f1af44bba23ce9.png
[Center 1]: /images/20220713/5bfdc9bc76f64825b7afa9c6f2cae59a.png
[20170109225006574]: /images/20220713/5df5b09f06d644a78c20564c8fa42098.png
[20170109225127965]: /images/20220713/669f8c0997e842cfb0fb3fc6e5ef524f.png