前端入门学习之定位知识点详解与图片间隙问题——day06

图片间隙问题

1. 产生原因:图片与文字基线对齐

2. 解决方法:

   1. img{ display:block;},将图片转成块,改变了图片本身作为内联块的特性:

      1. 独占一行;
      2. 父元素的text-align对它不再生效,应使用margin:auto;

   2. Img{vertical-align:middle/bottom/top};

      1. 默认是baseline(基线对齐),改变图片(内联元素)垂直方向的对齐方式;
      2. 不改变图片最为内联块的特性;

   3. 设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决

      .imgwrap{

      font-size:0;

      line-height:0;

      }

   4. vertical-algin:的作用:

      1. 处理单元格内容在单元格中垂直方向的对齐方式td,th{};
      2. 内联元素垂直方向的对齐方式,常见场景:
         1. 图片与文字;
         2. 图片与图片;
         3. input与input;

定位

1. position:
   1. static静态定位(默认值)
   2. relative相对定位:
      1. 相对于元素原来位置进行定位;
      2. 特点:
         1. 不定义偏移量时,对元素基本没有影响;
         2. 不脱离文档流,元素原来位置仍然占位;
         3. 提示元素层级:高于普通层,浮动层(会进行覆盖);
      3. 应用:配合绝对定位使用;
   3. absolute绝对定位:
      1. 有定位父级时(父级中包含r,a,f定位之一),相对于定位元素或最近的定位元素进行定位;
      2. 特点:
         1. 使元素脱离文档流:原来的位置不再占位;
         2. 提示元素层级:高于普通层,浮动层(会进行覆盖);
         3. 可以使内联元素支持宽高,生成一个块级框
         4. 没有定位父级,相对于根元素进行定位:
            1. 表现:没有滚动条时,与fixed表现一致;
         5. 可以使未定宽高的块适应内容;
         6. 也可以相对于fixed,absolute进行定位;
   4. fixed固定定位:
      1. 始终相对于窗口进行定位;
      2. 特点:
         1. 脱离文档流,提升层级;
         2. 可以使内联元素支持宽高,line-height,垂直方向的padding,margin;
         3. 可以使未定宽高的块适应内容;
2. 定义元素位置属性:
   1. 水平方向:left距左距离;right距右距离;
   2. 垂直方向:top距顶距离;bottom距底距离;
   3. 百分比:分别相对于父元素的宽度和高度;

能够使内联元素支持宽高的属性总结

1. display:block,inline-block;
2. float:left,right;
3. position:absolute,fixed;

定位层级(覆盖关系)

1. 普通元素:
   1. 结构上靠后的覆盖靠前的;
   2. 子元素覆盖父元素;
2. 浮动元素:
   1. 浮动层高于普通层;
3. 定位元素(r,a,f):
   1. 定位元素高于普通层和浮动层;
   2. 定位元素之间:
      1. 默认情况下:结构靠后的覆盖结构靠前的;子元素覆盖父元素;
      2. 也可以通过z-index:数值 改变层叠顺序:
         1. 值越大,显示越靠上(值大的覆盖值小的);
         2. 允许负值;
         3. 默认为0或auto;
         4. 只对定位元素有效;
   3. 从父原则.父元素的z-index优先级高于子元素.

定位应用

1. 实现已知宽高的定位元素水平垂直居中:

   1. 常规方法:left:50%;top:50%;margin-left:-盒子横向占位的一半;margin-top:-盒子纵向占位的一半;

   2. 技巧方法:left:0;right:0;top:0;bottom:0;margin:auto;

   3. left:50%;top:50%;transform:translate(-50%,-50%);

   4. 弹性盒实现:

      1. .warp{display:flex; justify-content:center; algin-items:center;}

      2. .wrap{display:flex;}

         .box{margin:auto;}

2. 内联块在父盒子水平垂直居中:

   1. .wrap{text-algin:center;width:300px;height:300px;line-heigint:300px;font-size:0;}

      .box{vertical-align:middle;}

CSS三大特性

1. 继承性:

   1. 定义:父元素向后代元素传递属性的机制;
   2. 可继承的属性:
      1. font系列:size,color,style,weight,family,line-height;
      2. text系列:text-indent,text-align;(注:text-decoration不可以继承)
      3. list-style系列;
      4. cursor:pointer;鼠标手型
   3. 作用:合理的利用继承性,可以一定程度上精简代码;

2. 层叠性:

   1. 样式不冲突–样式叠加(不同选择器指向同一个元素描述样式,不冲突时共同作用与元素);
   2. 样式冲突–(利用层叠/覆盖)解决冲突:
      1. 优先级相同的情况下,靠后的层叠掉靠前的;
      2. 优先级不同的情况下,由优先级决定;

3. 优先级:

   1. 计算规则:

      1. 选择器优先级:

         1. 由选择器的特殊性(权值)决定;

         2. 权值:行间样式 id选择器 类选择器 元素
            1 0 0 0
            1 0 0
            1 0
            1

            选择器特殊性：
            元素 0001
            类 0010
            id 0100
            行间： 1000

            注:不同等级之间无法超越
            相同等级之间比的是个数

            行间 > id>类>元素

   2. !important:优先级高于行间样式,出现时代表其优先级最高.