css 相关知识汇总

青松学前端
51 阅读7分钟

css 相关知识汇总

css选择器

选择器用法权重
内联样式
1000
id选择器#id100
类选择器.class10
属性选择器a[ref="link"]10
标签选择器div1
伪类选择器li:last-child10
伪元素选择器li:before1
兄弟选择器div+p0
子选择器ul>li0
后代选择器div a0
通配符*0

!important 优先级最高

如果优先级相同，则后者高于前者

继承得到的样式优先级最低

哪些样式可以继承

  1. 字体

    font-family font-weight font-size font-style

  2. 文本

    text-indent text-align line-height word-spacing letter-spacing color

  3. 元素

    visibility

  4. 列表布局

    List-style

  5. 光标

    cursor

隐藏和显示相关

  1. 有哪些方法可以隐藏一个元素

    display： none 不占位

    visibility： hidden 占位

    opacity： 0； 占位

    position：absolute; 不占位，脱离了文档流，将元素定位到可视区域外

    z-index: 负值； 不占位

    clip 占位

    transform：scale（0，0）占位

  2. display vs visibility 有什么区别

    都可以让元素隐藏和展示。

    浏览器渲染时，display不占居空间，渲染树中不会存在。visibility占据在渲染中

    继承属性来说： display不会被继承，visibility会被继承

    性能上：display造成文档的重排，但修改visibility只会导致文本的重绘

单行/多行文本超出显示省略号

写一个单行/多行的文本超出显示省略号

// 单行超出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;


// 多行超出
// 这个方案的缺点是兼容性
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

p {
  position: relative;
  line-height: 18px;
  height: 40px;
  overflow: hidden;
}
p::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
}
// 兼容性好，缺点是固定行高，要设置对应的高度，js处理后处理器

px em rem

  1. 多种单位的差别

    百分比： 子元素的百分比相对于直接父元素的对应属性

    em：相对于父元素的字体大小倍数

    rem：相对于根元素字体大小的倍数

    vw：视窗宽度，满视窗宽度为100vw

    vh：视窗高度，满视窗高度为100vh

    vmin： vw和vh中较小值

    vmax：vw和vh中较大值

  2. 如何利用rem实现响应式

    根据当前设备的视窗宽度与设计稿的宽度得到一个比例

    根据比例设置根节点的font-size

    所有长度单位都用rem

如何创建BFC，以及如何解决相应的问题

  1. 创建BFC的方式

    元素设置为浮动，float：除了none之外

    使用定位脱离文档流，position

    display中的inline-block、table-cell table-caption flex

    overflow中的hidden、auto、scroll

  2. BFC的特点

    垂直方向上，自上而下排列，与文档流的排列方式一致

    BFC中上下相邻的两个容器margin会重叠

    计算BFC高度时需要计算浮动元素

    BFC不会影响外部元素

css中常见的布局

两栏布局

image-20250614200219020.png

  1. 浮动 + 生成BFC不重叠
<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
</div>

.left {
    width: 100px;
    height: 200px;
    float: left;
    background-color: antiquewhite;
}
.right {
    height: 200px;
    overflow: hidden;
    background-color: aqua;
}
  1. 浮动 + width auto
<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
</div>

.wrap {
    height: 200px;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    background-color: antiquewhite;
}
.right {
    margin-left: 200px;
    width: auto;
    height: 100%;
    background-color: aqua;
}
  1. flex布局
<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
</div>

.wrap {
    height: 200px;
    display: flex;
}
.left {
    /* width: 200px; */
    flex: 0 0 200px; // 这里需要这么设置宽度，避免right中子元素过宽而压缩了左边区域宽度
    height: 100%;
    background-color: antiquewhite;
}
.right {
    flex: 1;
    height: 100%;
    background-color: aqua;
}

三栏布局

image-20250614202137705.png

  1. 绝对定位布局法

    <div class="wrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

    .wrap {
    position: relative;
    height: 200px;
}
.left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: antiquewhite;
}
.right {
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: aquamarine;
}
.center {
    margin-left: 200px;
    margin-right: 200px;
    height: 100%;
    background-color: blueviolet;
}

  2. flex布局

    <div class="wrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

     .wrap {
      display: flex;
      height: 200px;
  }
  .left {
      /* width: 200px; */
      flex: 0 0 200px; /* 固定宽度 */
      height: 100%;
      background-color: antiquewhite;
  }
  .right {
      /* width: 200px; */
      flex: 0 0 200px; /* 固定宽度 */
      height: 100%;
      background-color: aquamarine;
  }
  .center {
      flex: 1;
      height: 100%;
      background-color: blueviolet;
  }

  3. grid布局

    <div class="wrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

    .wrap {
      display: grid;
      height: 200px;
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: repeat(3, 200px);
  }
  .left {
      background-color: antiquewhite;
  }
  .right {
      background-color: aquamarine;
  }
  .center {
      overflow: auto;
      background-color: blueviolet;
  }

  4. 圣杯布局

    <div class="wrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

    .wrap {
    height: 200px;
    padding-left: 200px;
    padding-right: 200px;
}
.center {
    float: left;
    width: 100%;
    height: 100%;
    background-color: blueviolet;
}
.left {
    position: relative;
    left: 0;
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 100%;
    background-color: antiquewhite;
}
.right {
    position: relative;
    left: 200px;

    float: right;
    margin-left: -200px;
    width: 200px;
    height: 100%;
    background-color: aquamarine;
}

  5. 双飞翼

    <div class="wrap">
  <div class="wrapper">
    <div class="center"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

     .wrap {
      height: 200px;
  }
  .left {
      float: left;
      margin-left: -200px;
      width: 200px;
      height:200px;
      background-color: antiquewhite;
  }
  .right {
      float: left;
      margin-left: -200px;
      width: 200px;
      height: 200px;
      background-color: aquamarine;
  }
  .wrapper {
      float: left;
      width: 100%;
      height: 200px;
  }
  .center {
      margin-left: 200px;
      margin-right: 200px;
      height: 200px;
      background-color: blueviolet;
  }

css水平垂直居中的方法

居中元素已知宽高的情况

image-20250614091710447.png

  1. absolute + 负margin

    兼容性很好，缺点是需要知道子元素的宽高

    <div class="wrap">
  <div class="box size"></div>
</div>

     /* 公共代码 */
  .wrap {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
  }

  .box {
      background: green;    
  }

  .box.size{
      width: 100px;
      height: 100px;
  }
  /* 公共代码 */
  .box {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px; /* 负的宽度的一半 */
      margin-top: -50px; /* 负的高度的一半 */
  }

  2. absolute + margin auto

    兼容性很好，缺点是需要知道子元素的宽高

    <div class="wrap">
  <div class="box size"></div>
</div>

    /* 公共代码 */
.wrap {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    position: relative;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */
.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* 自动水平和垂直居中 */
}

  3. absolute + calc

    兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高

    <div class="wrap">
  <div class="box size"></div>
</div>

    /* 公共代码 */
  .wrap {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
  }

  .box {
      background: green;    
  }

  .box.size{
      width: 100px;
      height: 100px;
  }
  /* 公共代码 */
  .box {
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
  }

居中元素不定宽高的场景

image-20250614094315461.png

  1. absolute + transform

    兼容性依赖translate2d的兼容性

    <div class="wrap">
  <div class="box"></div>
</div>

    .wrap {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    position: relative;
}

.box {
    background: green;  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 水平垂直居中 */  
    padding: 20px; /* 添加一些内边距 */
}

  2. Line-height

    这里要注意子元素要设置为inline-block，line-height为父级元素高度。其中字体要调整一下父元素的字体大小设置为0，子元素在恢复，不然会出现偏差,主要是因为行框高度和基线对齐方式影响子元素位置。

    <div class="wrap">
  <div class="box"></div>
</div>

    .wrap {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    line-height: 300px; /* 设置行高，使得行内块元素垂直居中 */
    text-align: center;
    font-size: 0;
}

.box {
    display: inline-block;
    font-size: 16px; /* 恢复字体大小 */
    background: green;  
    line-height: initial; /* 恢复行高 */
    text-align: left; /* 修正内容左对齐 */
}

  3. Writing-mode

    这个属性有很多对应的值，可以改变文字的显示方向（水平、垂直、左右边等）

    <div class="wrap">
  <div class="wrap-inner">
    <div class="box">宽度有自身内容决定</div>
  </div>
</div>

     .wrap {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      text-align: center;
      writing-mode: vertical-lr;
  }
  .wrap-inner {
      writing-mode: horizontal-tb;
      display: inline-block;
      text-align: center;
      width: 100%;
  }
  .box {
      display: inline-block;
      background: green;  
      margin: auto;
      text-align: left;
  }

  4. table

    tabel单元格中的内容就是垂直居中的，只要添加一个水平居中属性。但现在这种方式已经基本不用了，不在详细介绍了。

  5. css-table

    <div class="wrap">
  <div class="box">宽度有自身内容决定</div>
</div>

     .wrap {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
    width: 300px;
    height: 300px;
  }
  .box {
    display: inline-block;
    background: green; 
  }

  6. Flex

    flex布局在现在开发中使用率是比较高的，代码量也低。主流浏览器也都兼容。更多介绍案例

    <div class="wrap">
  <div class="box">宽度有自身内容决定</div>
</div>

    .wrap {
  display: flex;
  border: 1px solid red;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
}
.box {
  background: green; 
}

  7. Grid

    Grid布局可以看是二维布局，可以实现更复杂场景的布局，更多详情介绍grid

    <div class="wrap">
  <div class="box">宽度有自身内容决定</div>
</div>

    .wrap {
  display: grid;
  border: 1px solid red;
  width: 300px;
  height: 300px;
}
.box {
  background: green; 
  align-self: center;
  justify-self: center;
}
avatar
文章
阅读
粉丝