前端实习八股整理-CSS & HTML

原创

已于 2025-07-03 12:10:36 修改 · 733 阅读

于 2025-04-21 16:26:48 首次发布

一、flex弹性布局

flex-direction:决定主轴方向。
flex-wrap:决定flex items是否换行。
flex-flow:flex-direction和flex-wrap的简写，如flex-flow:center
justify-content:控制主轴上的对齐方式。
align-items:控制交叉轴上的对齐方式。
align-content:在多行情况下，控制各行在交叉轴上的对齐方式。

order:改变项目的排列顺序，数值越小越靠前，默认值为0。
flex-grow:定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。
flex-shrink:定义项目的缩小比例，默认值为1，即如果空间不足，该项目将缩小。
flex是flex-grow、flex-shrink和flex-basis的缩写。
（flex:1;是flex:1 1 0%;的缩写）

1.水平和垂直居中

.content{
   
   
 display:flex;
 justify-content:center;
 align-items:center;
}

2.等高列布局

.container{
   
   
 display:flex;
}
.column{
   
   
 flex:1;
}

3.响应式布局

.container{
   
   
 display:flex;
 flex-wrap:wrap;
}
.item{
   
   
 flex:1 1 200px;
}

二、响应式布局

响应式布局（Responsive Layout）是一种网页设计技术，它允许网页根据用户的设备屏幕大小（如桌面电脑、平板电脑、手机等）自动调整布局和内容的显示方式。
（灵活性、动态调整、用户体验优化）
1.使用媒体查询。媒体查询是响应式布局的核心技术，通过检测设备的宽度、高度、分辨率等条件应用不同的样式。可根据屏幕宽度调整字体大小、布局样式等。

/* 默认样式 */
body {
   
   
  font-size: 16px;
  padding: 20px;
}

/* 屏幕宽度小于等于768px时的样式 */
@media (max-width: 768px) {
   
   
  body {
   
   
    font-size: 14px;
    padding: 10px;
  }
}

/* 屏幕宽度大于1200px时的样式 */
@media (min-width: 1200px) {
   
   
  body {
   
   
    font-size: 18px;
    padding: 30px;
  }
}

2.使用弹性盒子（Flexbox）。创建水平或垂直方向上的自适应布局，比如导航栏、网格布局。

.container {
   
   
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

.item {
   
   
  flex: 1 1 200px; /* 每个子项占据至少200px，随空间调整 */
  margin: 10px;
  background-color: #f0f0f0;
}

3.网格布局（CSS Grid Layout）。创建复杂的自适应网格布局，比如图片库、商品列表。

.container {
   
   
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.item {
   
   
  background-color: #d4edda;
  padding: 10px;
}

4.使用百分比和单位 vh/vw 实现宽度和高度的自适应。实现宽度和高度随窗口变化而调整。

.container {
   
   
  width: 80%; /* 占父容器的80% */
  height: 50vh; /* 占视口高度的50% */
  background-color: #e9ecef;
}

三、CSS的各类单位

1.长度单位
· 绝对长度单位：
cm：厘米
mm：毫米
in：英寸（1英寸=2.54厘米）
px：像素（最常用的绝对长度单位）
pt：点（1点=1/72英寸）
pc：派卡（1派卡=12点）
· 相对长度单位：
em：相对于当前字体大小（1em等于当前元素的字体大小）
rem：相对于根元素（html）的字体大小
vw：相对于视口宽度（viewport width），1vw等于视口宽度的1%
vh：相对于视口高度（viewport height），1vh等于视口高度的1%
vmin：相对于视口宽度或高度中的较小值
vmax：相对于视口宽度或高度中的较大值
ch：相对于’0’字符的宽度
ex：相对于’x’字符的高度
2.角度单位
deg：度
rad：弧度
turn：圈数
grad：百分度（1grad等于0.9度）
3.时间单位
s：秒
ms：毫秒
4.频率单位
Hz：赫兹
kHz：千赫兹
5.分辨率单位
dpi：每英寸点数（dots per inch）
dpcm：每厘米点数（dots per centimeter）
dppx：每像素点数（dots per pixel）
6.特殊单位
fr：网格布局中的分数单位
%：百分比单位，相对于父元素的某个属性

四、垂直居中的几种方案

1.Flexbox

.container {
   
   
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 确保容器有高度 */
}

2.Grid

.container {
   
   
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh;       /* 确保容器有高度 */
}

3.绝对定位和transform

.container {
   
   
  position: relative;
  height: 100vh; /* 确保容器有高度 */
}

.item {
   
   
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 垂直和水平居中 */
}

4.使用line-height

.container {
   
   
  height: 100vh; /* 确保容器有高度 */
  line-height: 100vh; /* 设置行高为容器高度 */
  text-align: center; /* 水平居中 */
}

五、em和rem

em是一个相对单位，值相对与其父元素的字体大小。1em等于当前元素的字体大小。
rem是一个相对单位，值相对于根元素（html元素）的字体大小。

历史原因：早期显示器上，分辨率和像素密度较低，16px的字体大多数情况下看的比较舒适，沿用至今。
1em和1rem在默认情况下都等于16px。

六、绘制一个三角形

1.HTML元素和CSS变换

.triangle {
   
   
    width: 0;
    height: 0;
    border: 50px solid transparent; /* 设置边框宽度 */
    border-bottom-color: blue; /* 设置底边颜色 */
}

2.使用SVG
SVG是一种矢量图形格式，非常适合绘制复杂的图形，包括三角形。

<body>
    <svg width="100" height="100">
        <polygon points="50,10 10,90 90,90" fill="red" />
    </svg>
</body>

效果
一个红色的三角形，顶点位于(50,10)，底边的两个顶点分别位于(10,90)和(90,90)。

3.使用Canvas
Canvas是一个HTML元素，可以通过JavaScript绘制图形。

<body>
    <canvas id="triangleCanvas" width="200" height="200"></canvas>
    <script>
        const canvas = document.getElementById('triangleCanvas');
        const ctx = canvas.getContext('2d');

        // 绘制三角形
        ctx.beginPath();
        ctx.moveTo(100, 20); // 顶点
        ctx.lineTo(20, 180); // 左下角
        ctx.lineTo(180, 180); // 右下角
        ctx.closePath();
        ctx.fillStyle = 'green'; // 填充颜色
        ctx.fill();
    </script>
</body