研一自救指南 - 07. CSS面向面试学习

最近的前端面试多多少少都会遇到css的提问,感觉还是要把重点内容记记背背。这里基于b站和我自己面试的情况整理。

20250418更新:

  1. BFC

Block Formatting Context,一个块级的盒子,可以创建多个。里面有很多个块,他们的布局、浮动元素和其他元素的相互作用受BFC规则的影响。

内部每个块从上到下一个一个放,垂直方向由margin,上下margin可能重叠,BFC不会与float box重叠。

对于浮动元素,如果不用BFC,肯可能有高度丢失的问题

形成BFC的条件:

float不为none

overflow为auto、scroll、hidden

display为

  1. 容器的 flex

让块级元素可以整齐排列,而不是一行一行

display: flex

主轴方向:

flex-direction:row(默认) / row-reverse / column(垂直) / column-reverse

主轴排列方式:

justify-content: flex-start(顺着主轴)/ flex-end(逆着主轴)/ center(居中) / space-between(左右靠边,均分) / space-around(均分) / baseline

交叉轴的排列方式:

align-items:stretch(沿着交叉轴拉伸) / flex-start(垂直轴起始) / flex-end(垂直轴结束) / center

多行垂直轴排列方:

align-contents:stretch / flex-start / flex-end / center / space-between / space-around

间距:

gap: 10px

换行:

flex-wrap: nowrap(默认不换行) / wrap(换行) / wrap-reverse(从上到下换行)

  1. 盒子模型

content(元素实际内容)-padding-border-margin

content: width / height

padding: padding-top / bottom / left / right

对于块级元素,默认占满一行对于行内元素,如span,不能直接通过width和height设置,设置display: inline-block就可以控制宽高了

默认 width 和 height 是只包括 content 的,再有 margin 就大了,即盒子的默认模式为content-box,即box-sizing: border-box ,否则可以设置box-sizing: border-box

border: solid(实线)、点线(dotted)、double(双实线)、dashed(虚线)

  1. CSS定位

position: static(默认,设置top、right无效) / relative(通过自己定位,在文档流(就是还会在文档里留位置)) / sticky(不设置top等和static没区别,设置后,先static再fixed) / fixed(浏览器窗口左上角,脱离文档流,不影响其他元素定位) / absolute(绝对定位,脱离文档流,相对于最靠近它的非static的父容器,如果没有)

  1. 样式使用方法

优先级:内联>内部>外部

内联样式:直接写在html元素的标签中 style="color=red"

内部样式:在style块里写

外部样式:在head里写<link rel="stylesheet" herf="./css/style.css">

  1. 选择器:

id>class>标签名

  • 元素选择器:h2 直接写
  • 类选择器:class .class
  • id选择器:id #id
  • 通用选择器: * 选择所有元素
  • 子元素选择器: .father > #id/.class
  • 后代选择器: .father p{}
  • 相邻兄弟选择器:h3 + p{} (相当于是对h3和p相邻的情况下,对p做样式)
  • 伪类选择器:
  1. 属性

style="font: bolder 50px" 复合属性,可以写在一起

font-size: 字体大小

font-family:字体

font-weight:字体粗细

line-height: 行高

  1. 浮动会导致父元素坍塌

解决方法:(1)在父元素写 overflow:hidden;(2)

旧内容:

  1. 选择器

    p{
    }

    // 对于id id = "demo"
    #demo {
    }

    // 对于类 class = "center"
    .center {
    }

    // 对于 class = "center" 的


    p.center {
    }

    // 允许class = "center large"
    可以分别设置样式,然后两个都使用等等

    // 对于所有元素

    • {
      }

    // 对于多个选择器
    h1, h2, p {
    }

  2. 外部CSS

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

rel="stylesheet" 是告诉浏览器这是一个CSS文件,type="text/css"告诉浏览器文件类型是CSS,herf="mystyle.css"指定样式文件的路径

  1. 一些内容

opacity透明度,0-1.0,越低越透明

或者直接这样写 background: rgba(0, 128, 0, 0.3)

  1. 背景设置

body {

background-image: url("paper.gif");

background-repeat: no-repeat;

background-attachment: fixed; // 固定

}
body {

background-image: url("bgdesert.jpg");

background-repeat: repeat-x;

background-position: right top;

background-attachment: scroll; // 滚动

}

  1. v-bind和v-model

v-model 是双向绑定语法,html和js变量中的值会同步发生变化,js和ui是同步的

v-bind 会被缩写成: 表示绑定的是表达式的值

v-model.number=" ":把输入或选中的值自动转为数字(能转则转,适当扔,转不了拉倒)

v-model.trim:自动去除字符串两边的空格

v-model.lazy:不在 input 时更新,而是在 blur 时更新(失焦后更新)

  1. axios

是一个用于发送http请求的库,可以从前端向服务器端发送或获取数据

相关推荐
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数9 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript