前端回顾-CSDN博客

本文链接：https://blog.csdn.net/qq_42589871/article/details/126020796

css

1.元素居中方式

1.父元素相对定位，子元素绝对定位，上下左右全为0，margin:auto.

父元素{
     position：relative;
}
子元素{
     position：absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
}

2.父元素相对定位，子元素绝对定位,上左50%，子元素margin-top:-自身高度的一半，margin-left:-自身宽度的一半

父元素{
     position：relative;
}
子元素{
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-自身高度的一半；
     margin-left:-自身宽度的一半；
}

3.弹性盒子：主轴侧轴都为center

父元素{
     display:flex;
     justify-content:center;
     align-items:center;
}

4.位移：父元素相对定位，子元素绝对定位，left,top为50%，位移-50%

父元素{
     position：relative;
}
子元素{
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
}

5.grid布局

父元素{
     display:grid;
     place-items:center;
}

2.清浮动方式

1.额外标签法：在浮动元素末尾加一个空标签

<div style='clear:both'></div>
或者
br

2.给父元素添加overflow

.clear{
    overflow:hidden;
}

3.使用after伪元素清除浮动

.clear:after{
    content:'';
    display:block;
    hight:0;
    clear:both;
    visibility:hiden;
}
.clearfix{
    *zoom:1;         //ie6,7专用
}

4.使用befor和after双伪元素清除浮动

 .clearfix:before,.clearfix:after { 
      content:"";
      display:block;
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }

3.overflow

1.解决元素margin塌陷问题

同级元素塌陷：两个同级元素，垂直排列。上面的盒子给了margin-bottom，下面的盒子给了margin-top。那么这两个边距将会重叠，按照大的值来计算。

解决办法：给任意一个元素设置足够(上面元素的下外边距+下面元素的上外边距)的外边距.

父子元素塌陷：两个父子元素，内部的子盒子给了margin-top，父元素也会受到影响，同时产生上边距，也就是父子重合（粘连）。

解决办法：1.给父元素添加overflow：hidden

2.给父元素定义1像素的上边框

3.给父元素定义1像素上内边距

4.给父元素添加position：fixed

2.overflow值

overflow:visible(默认)/hidden(隐藏)/scroll(滚动条)/auto/inherit;

3.文本溢出显示省略号（需给元素设置宽度，以下均省略）

1.单行文本溢出显示省略号

white-space:nowrap;  //不换行
overflow：hidden;    //超出隐藏
text-overflow:ellipsis  //溢出显示省略号

2.多行文本溢出显示省略号

display:-webkit-box;                //将对象作为弹性盒子伸缩模型展示
-webkit-box-orient: vertical;       //伸缩盒子对象子元素对齐方式为垂直
-webkit-line-clamp: 3;              //限制块元素显示文本的行数
overflow: hidden;                   //超出隐藏

4.选择器

1.伪对象选择器

::after
::befor
::first-letter
::first-line

2.伪类选择器

2.1 
  :link   :active   :visited   :haver
2.2结构伪类
  E:first-child
  E:last-child
  E:nth-child()
  E:nth-last-child()
2.3空伪类
  E:empty
2.4锚点伪类/目标伪类
  E:target
2.5排除伪类(无用)
  E:not(F)
2.6UI状态伪类
  :enabled
  :disabled
  :checked
  selection

3.属性选择器（类选择器，id选择器都属于属性选择器）

以E元素为例
E[title]               //存在title属性即可
E[attr^=value]         //存在attr属性且以value开头  
E[attr$=value]         //存在attr属性且以value结尾
E[attr*=value]         //存在attr属性且存在value值
E[attr~=value]         //存在attr属性且包含value整个单词