金三银四css必知知识点总结

为了WLB努力
121 阅读8分钟

1.css选择器和其优先级

  1. id选择器（ # myid）
  2. 类选择器（.myclassname）
  3. 标签(元素)选择器（div, h1, p）
  4. 相邻选择器（h1 + p）
  5. 子选择器（ul > li）
  6. 后代选择器（li a）
  7. 通配符选择器（ * ）
  8. 属性选择器（a[rel = "external"]）
  9. 伪类选择器（a:hover,a:focus li:nth-child） 伪元素选择器（a::before,a::after）、分组选择器。 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

2. 伪类和伪元素的区别：

伪类作用的对象是整个对象，伪类没有创造元素，例如：first-child只是给子元素添加样式。 伪元素作用于元素的一部分，一个段落的第一行或第一个字母，伪元素相当于创造了一个元素，相当于创造了一个新的元素，然后添加了响应的效果。

3.居中定位

  1. flex布局
 display: flex;
    /*垂直居中*/
 align-items: center;
    /*水平居中*/
 justify-content: center;
  1. 绝对定位 + transform
/*使用绝对定位和transform*/
.box{
    width: 300px;
    height: 300px;
    position: relative;
}
.box-item{
    width: 100px;
    height: 100px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
  1. 绝对定位 + margin
/*使用绝对定位和margin负外边距对块级元素进行垂直居中*/
.box{
    width: 300px;
    height: 300px;
    position:relative;
}
.box-item{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}
  1. table布局
/*使用display:table和vertical-align:middle进行垂直居中*/

.box{
    width: 300px;
    height: 300px;
    display: table;
}
.box-item{
    display: table-cell;
    vertical-align: middle;
}

4.必知的css属性

    /*必知的flex属性*/
	flex-direction: row; 
    flex-wrap: nowrap;
    /*占据的主轴空间，默认为auto*/
    flex-basis: auto;
    /*等比放大，默认为0,即如果存在剩余空间，也不放大*/
    flex-grow: 0;
    /*等比缩小，默认为1,即如果空间不足，该项目将缩小,如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小*/
    flex-shrink: 1;
    /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
    该属性有两个快捷值：auto (1 1 auto)等比放大或者缩小 和 none (0 0 auto)既不放大也不缩小
    */
    flex:auto;
    /*align-items属性定义项目在交叉轴上如何对齐align-items: flex-start | flex-end | center | baseline | stretch;*/
    /*justify-content属性定义了项目在主轴上的对齐方式。*/
    flex-flow: row;
    
    /*display布局属性，flex，block，inline，inline-block，none*/
    display: flex;
    
    /**
    *position四个常用的属性，static（默认文档流布局），absolute，relative，fixed
    position 中的 sticky 值是 CSS3 新增的，设置了 sticky 值后，
    在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），
    当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
    */
    position: sticky;

    justify-content:space-between;
    /* 包括以下几个可选值：
    flex-start: 元素和容器的左端对齐。
    flex-end: 元素和容器的右端对齐。
    center: 元素在容器里居中。
    space-between: 元素之间保持相等的距离。
    space-around: 元素周围保持相等的距离。 */

    /*宽高设定范围在内容，实际宽度包括border+padding+width*/
    box-sizing: border-box;
    /*宽高设定范围在边框外缘的范围，实际宽度是width*/
    box-sizing: content-box;
    ```


/*使用grid布局*/
/* 容器指定了网格布局以后，接着就要划分行和列。
grid-template-columns属性定义每一列的列宽，
grid-template-rows属性定义每一行的行高。 */
/* 注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 */
/* 为了方便表示比例关系，fr可以与绝对长度的单位结合使用，这时会非常方便。 */
.box{
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: 1fr 211px 1fr;
}

5.css性能优化的方式：

  1. 合并样式表：

    将多个CSS文件合并成一个文件可以减少HTTP请求的次数，提高页面加载速度。你可以通过手动合并或者使用构建工具来实现。

    手动合并：

    <!-- 分开引用的样式表 -->
<link rel="stylesheet" href="styles/style1.css">
<link rel="stylesheet" href="styles/style2.css">

    <!-- 合并后的样式表 -->
<link rel="stylesheet" href="styles/all-styles.css">

    使用构建工具：

    使用构建工具（如Webpack、Gulp等）可以自动将多个CSS文件合并成一个文件。在Webpack中，你可以使用style-loader和css-loader来实现样式的合并和打包。

  2. 压缩样式表：

    压缩CSS文件可以减小文件大小，加快下载速度，通常会去除不必要的空格、注释和换行等。

    手动压缩：

    /* 未压缩前的样式 */
.element {
  color: red;
}

/* 压缩后的样式 */
.element{color:red;}

    使用构建工具：

    使用构建工具（如Webpack、Gulp、PostCSS等）可以自动压缩CSS文件。在Webpack中，你可以使用optimize-css-assets-webpack-plugin插件来压缩CSS文件。

减少重绘和回流：

  1. 避免频繁操作样式：

    避免使用JavaScript直接操作样式，因为这会触发重绘和回流。

    // 不推荐的写法
element.style.width = '100px';
element.style.height = '100px';

// 推荐的写法
element.style.cssText = 'width: 100px; height: 100px;';

  2. 使用class操作：

    使用classList属性而不是直接修改className，以减少重绘和回流的次数。

    // 不推荐的写法
element.className = 'active';

// 推荐的写法
element.classList.add('active');

  3. 避免使用过于复杂的CSS选择器：

    复杂的选择器会增加样式匹配的计算时间，可能导致性能下降。

    /* 不推荐的写法 */
div#container > ul.nav > li.active > a {
  color: red;
}

/* 推荐的写法 */
.active-link {
  color: red;
}

  4. 减少DOM操作：

    减少DOM元素的添加、删除和修改，使用文档片段（DocumentFragment）来一次性插入多个DOM元素，减少DOM操作的次数。

    // 不推荐的写法
for (let i = 0; i < 1000; i++) {
  document.body.appendChild(document.createElement('div'));
}

// 推荐的写法
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

  5. 使用动画优化：

    使用CSS动画而不是JavaScript动画，以利用硬件加速，提高动画的性能。

    /* CSS动画 */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slide-in 0.5s forwards;
}

  6. 使用will-change属性：

    在动画开始之前，使用will-change属性告诉浏览器哪些属性将会被改变，以便浏览器优化渲染过程。

    .element {
  will-change: transform;
}

6.BFC

BFC 是 "Block Formatting Context"（块级格式化上下文）的缩写。它是 CSS 布局的一种概念，用来描述块级盒子在布局上下文中的行为。BFC 是 Web 页面中常用的一个重要概念，特别是在解决布局问题、清除浮动、防止 margin 重叠等方面起到关键作用。

BFC 的主要特点和行为包括：

  1. 内部的 Box 会在垂直方向上一个接一个地放置：

    • BFC 内部的盒子会按照垂直方向上一个接一个地放置，盒子之间不会发生重叠。

  2. 盒子在垂直方向上的边距会发生折叠：

    • BFC 内部的相邻盒子的上下外边距会发生折叠，但是和 BFC 外部的盒子不会发生折叠。

  3. BFC 区域不会和浮动盒子重叠：

    • BFC 会包含其内部所有的子元素，因此不会和浮动的元素重叠。

  4. BFC 可以包含浮动元素：

    • BFC 可以包含浮动的子元素，使得父元素能够正确地包裹浮动元素。

  5. BFC 区域不会被浮动盒子覆盖：

    • BFC 会计算其内部子元素的尺寸和位置，不会受到浮动元素的影响，因此不会被浮动元素覆盖。

  6. 触发 BFC 的条件：

    • 根元素或包含根元素的元素。
    • 浮动元素（元素的 float 不是 none）。
    • 绝对定位元素（元素的 position 为 absolute 或 fixed）。
    • 行内块元素（元素的 display 为 inline-block）。
    • 表格单元格（元素的 display 为 table-cell）。
    • 表格标题（元素的 display 为 table-caption）。
    • overflow 属性值不为 visible 的块级盒子。

7.触发和清除浮动

触发浮动：

  1. 使用清除浮动的元素：

    • 在需要触发浮动的元素后面添加一个空的块级元素，并对其应用clear: both;样式。这样可以确保浮动元素之后的内容不会受到浮动元素的影响。
    <div style="clear: both;"></div>

  2. 使用伪元素清除浮动：

    • 使用:after伪元素在父元素末尾插入一个空块，然后应用clear: both;样式。
    .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

    <div class="clearfix"></div>

清除浮动：

  1. 父元素添加 overflow 属性：

    • 通过设置父元素的overflow属性为auto或hidden，可以清除浮动并防止父元素高度塌陷。
    .parent {
  overflow: auto; /* 或 overflow: hidden; */
}

  2. 使用 clearfix 类：

    • 在父元素中添加一个 clearfix 类，该类应用了伪元素清除浮动的技巧。
    .parent::after {
  content: "";
  display: table;
  clear: both;
}

    <div class="parent clearfix">
  <!-- 子元素浮动 -->
</div>

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

    • 在父元素上使用:after伪元素清除浮动。
    .parent:after {
  content: "";
  display: block;
  clear: both;
}

    <div class="parent">
  <!-- 子元素浮动 -->
</div>

最后也是全文最终要的，码字不易，欢迎点赞收藏加关注，你的鼓励是我持之以恒的动力，感谢感谢感谢！！！！！

avatar
文章
阅读
粉丝