CSS HTML 面试题

1：http和https的区别？

答：HTTP和HTTPS都是应用层协议，

HTTP是超文本传输协议，

而HTTPS是具有安全性的SSL加密传输协议。

HTTP的端口号是80，

HTTPS的端口号是443。

HTTPS在传输数据时会对数据进行加密，保证数据的安全性，

而HTTP不会对数据进行加密，数据传输过程中可能会被窃听或篡改。

1：HTTP示例

// HTTP示例
const http = require('http');
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});
server.listen(80, () => {
  console.log('HTTP server running on port 80');
});

2：HTTPS示例

// HTTPS示例
const https = require('https');
const fs = require('fs');
const options = {
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem')
};
const secureServer = https.createServer(options, (req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});
secureServer.listen(443, () => {
  console.log('HTTPS server running on port 443');
});

2：清除浮动的方式有哪些?比较好的是哪一种?

答：

清除浮动的方式有以下几种：

1. 使用空标签清除浮动（已经不常用）；
2. 使用overflow属性清除浮动；
3. 使用after伪元素清除浮动；
4. 使用before和after伪元素清除浮动；
5. 使用双伪元素清除浮动。

1. 使用空标签清除浮动（已经不常用）

/* 1. 使用空标签清除浮动（已经不常用） */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

2. 使用overflow属性清除浮动

   /* 2. 使用overflow属性清除浮动 */
   .parent {
    overflow: hidden;
   }
   

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

   /* 3. 使用after伪元素清除浮动 */
   .parent:after {
    content: "";
    display: table;
    clear: both;
   }
   

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

   /* 4. 使用before和after伪元素清除浮动 */
   .parent:before,
   .parent:after {
    content: "";
    display: table;
   }
   .parent:after {
    clear: both;
   }
   

5. 使用双伪元素清除浮动

   /* 5. 使用双伪元素清除浮动 */
   .parent:before,
   .parent:after {
    content: "";
    display: table;
   }
   .parent:after {
    clear: both;
   }
   

   比较好的方式是使用after伪元素清除浮动，因为它不会影响到原有的布局，而且代码量比较少。

3：link与@import的区别？

答：

link和@import都是用来引入外部样式表的方法，但是二者有以下区别：

1. link是HTML标签，而@import是CSS提供的一种方式。
2. link可以引入HTML和CSS文件，而@import只能引入CSS文件。
3. link在页面加载时同时加载，而@import是在页面加载完毕后再加载。
4. link可以通过rel属性指定样式表的关系，如stylesheet、icon等，而@import不能。
5. link可以通过media属性指定样式表适用的设备类型，而@import不能。

// link标签
<link rel="stylesheet" type="text/css" href="style.css">

// @import
<style type="text/css">
    @import url(style.css);
</style>

4：display: block;和display: inline;的区别？

答：

display: block;元素会在新行上开始，占据尽可能多的水平空间，直到遇到换行符或者强制换行标签<br>

display: inline;元素不会在新行上开始，只占据它对应标签的边缘空间，不强制换行。

<div style="display: block; background-color: red; width: 100px; height: 100px;">
  This is a block element
</div>
<div style="display: inline; background-color: blue; width: 100px; height: 100px;">
  This is an inline element
</div>

5：flex布局？

答：Flex布局是一种用于布局网页元素的CSS技术。它提供了一种灵活的方式来控制元素的大小、位置和间距。以下是一些常用的Flex布局属性：

1. display: flex; - 将容器设置为Flex布局。
2. flex-direction: row/column; - 设置Flex容器中子元素的排列方向。
3. justify-content: center/start/end/space-between/space-around; - 设置Flex容器中子元素在主轴上的对齐方式。
4. align-items: center/start/end/stretch; - 设置Flex容器中子元素在交叉轴上的对齐方式。
5. flex: 1; - 设置Flex子元素的伸缩比例，用于控制子元素在容器中的大小。
6. margin: 10px; - 设置Flex子元素的外边距。

6：CSS3有新特性？

答：

是的，CSS3有很多新特性，包括但不限于：

1. 圆角（border-radius）
2. 阴影（box-shadow）
3. 渐变（gradient）
4. 文字特效（text-shadow）
5. 旋转（transform）
6. 动画（animation）
7. 媒体查询（media query）
8. 弹性盒子布局（flexbox）
9. 网格布局（grid）

等等。以上这些特性都可以让网页设计更加美观和动态。

/* 1. 圆角（border-radius） */
div {
  border-radius: 10px;
}

/* 2. 阴影（box-shadow） */
div {
  box-shadow: 2px 2px 5px #999;
}

/* 3. 渐变（gradient） */
div {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}

/* 4. 文字特效（text-shadow） */
h1 {
  text-shadow: 2px 2px #999;
}

/* 5. 旋转（transform） */
div {
  transform: rotate(45deg);
}

/* 6. 动画（animation） */
div {
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 7. 媒体查询（media query） */
@media (max-width: 768px) {
  div {
    font-size: 14px;
  }
}

/* 8. 弹性盒子布局（flexbox） */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 9. 网格布局（grid） */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

7：什么是CSS BFC?

答：CSS BFC指的是CSS的块级格式化上下文，是一个独立的渲染区域，可以防止元素的margin重叠。在BFC中，每个盒子的左外边缘会触碰到容器的左边缘，而不会与容器内的任何元素发生重叠。BFC的形成有多种方式，例如float、position:absolute/fixed、display:inline-block/table-cell、overflow:hidden/scroll等。

8：移动端如果解决页面放大问题；

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

9：盒子模型？

答：盒子模型指的是网页中的元素都可以看作是一个盒子，这个盒子由四个部分组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。这四个部分的大小都可以通过 CSS 来设置。盒子模型的大小由内容(content)、内边距(padding)、边框(border)、外边距(margin)四个部分的大小共同决定。

10：px、em区别

答：px和em都是CSS中的长度单位，但它们有一些区别。px是像素单位，它是相对于屏幕分辨率而言的，而em是相对于父元素的字体大小而言的。因此，当你改变父元素的字体大小时，em单位的大小也会相应地改变。另外，px是绝对单位，而em是相对单位。

11：CSS优先级算法如何计算？

答：CSS优先级算法是根据选择器的特殊性、重要性和源代码顺序来计算的。选择器的特殊性是根据选择器中ID选择器、类选择器、属性选择器和元素选择器的数量来计算的，数量越多特殊性越高。重要性是通过!important声明来设置的，具有最高优先级。源代码顺序是指样式表中的后面的规则会覆盖前面的规则。计算优先级时，特殊性、重要性和源代码顺序都要考虑进去，优先级高的样式会覆盖优先级低的样式。

例如，如果一个选择器包含一个ID选择器和一个类选择器，那么它的特殊性就比只包含一个类选择器的选择器高。如果两个选择器的特殊性相同，那么后面的规则会覆盖前面的规则。如果一个样式声明使用了!important声明，那么它的优先级最高，无论特殊性和源代码顺序如何。

总结一下，CSS优先级算法是根据选择器的特殊性、重要性和源代码顺序来计算的。特殊性是根据选择器中ID选择器、类选择器、属性选择器和元素选择器的数量来计算的，数量越多特殊性越高。重要性是通过!important声明来设置的，具有最高优先级。源代码顺序是指样式表中的后面的规则会覆盖前面的规则。计算优先级时，特殊性、重要性和源代码顺序都要考虑进去，优先级高的样式会覆盖优先级低的样式。

12：CSS3新增伪类有那些？

答：

CSS3新增伪类有以下几种：

1. :nth-child(n) 选择器匹配其父元素的第n个子元素，从1开始计数。
2. :nth-last-child(n) 选择器匹配其父元素的倒数第n个子元素，从1开始计数。
3. :first-of-type 选择器匹配其父元素下第一个指定类型的子元素。
4. :last-of-type 选择器匹配其父元素下最后一个指定类型的子元素。
5. :only-of-type 选择器匹配其父元素下唯一的指定类型的子元素。
6. :root 选择器匹配文档的根元素。
7. :empty 选择器匹配没有子元素的元素。
8. :target 选择器匹配当前活动的目标元素。
9. :not(selector) 选择器匹配不符合指定选择器的元素。
10. :checked 选择器匹配被选中的表单元素。
11. :enabled 选择器匹配可用的表单元素。
12. :disabled 选择器匹配禁用的表单元素。
13. :hover 选择器匹配鼠标悬停在其上的元素。
14. :focus 选择器匹配当前获得焦点的元素。
15. :visited 选择器匹配已访问的链接。
16. :active 选择器匹配被激活的元素。
17. :before 选择器在元素之前插入内容。
18. :after 选择器在元素之后插入内容。
19. :lang(language) 选择器匹配指定语言的元素。
20. :nth-of-type(n) 选择器匹配其父元素下第n个指定类型的子元素，从1开始计数。
21. :nth-last-of-type(n) 选择器匹配其父元素下倒数第n个指定类型的子元素，从从1开始计数。
22. :last-child 选择器匹配其父元素下的最后一个子元素。
23. :first-child 选择器匹配其父元素下的第一个子元素。
24. :only-child 选择器匹配其父元素下唯一的子元素。
25. :nth-last-match() 选择器匹配其父元素下倒数第n个与指定选择器匹配的子元素。
26. :nth-match() 选择器匹配其父元素下第n个与指定选择器匹配的子元素。

13：DIV水平居中？垂直居中

答：

<div style="display: flex; justify-content: center; align-items: center;">
  <!-- Your content here -->
</div>

14：如何实现浏览器内多个标签页之间的数据共享？

答：使用浏览器提供的localStorage或sessionStorage API，将数据存储在本地存储中，从而实现多个标签页之间的数据共享。当一个标签页修改了数据时，可以通过监听storage事件来通知其他标签页更新数据。

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const data = localStorage.getItem('key');

// 监听storage事件
window.addEventListener('storage', (event) => {
  if (event.key === 'key') {
    const newData = event.newValue;
    // 更新数据

    // 在页面中找到需要更新的元素
     const element = document.getElementById('element-id');
  // 更新元素的内容
     element.innerHTML = newData;
  }
});

15：px、em、rem、rpx区别和为什么使用62.5%

答：px、em、rem、rpx是CSS中常用的长度单位。其中，px是像素单位，em和rem是相对长度单位，rpx是微信小程序中的相对长度单位。它们的区别在于，px是绝对长度单位，em和rem是相对于父元素字体大小的长度单位，rpx是相对于屏幕宽度的长度单位。使用62.5%作为基准字体大小是为了方便计算，因为1rem等于基准字体大小的10%，即10px。所以，当基准字体大小为62.5%时，1rem等于10px，便于计算。

16：display和visibility的区别？

答：display和visibility都可以控制元素的显示和隐藏，但是它们的区别在于，当元素的display属性设置为none时，该元素会从文档流中移除，不占据空间，而当元素的visibility属性设置为hidden时，该元素仍然占据空间，只是不可见。

17：什么是绝对定位和相对定位？

答：

绝对定位和相对定位是CSS中的两种定位方式。

相对定位是相对于元素原本的位置进行定位，

而绝对定位是相对于最近的已定位祖先元素进行定位。 绝对定位的元素会脱离文档流，不再占据原本的位置，

而相对定位的元素则仍占据原本的位置。

/* 相对定位 */
position: relative;
top: 10px;
left: 20px;

/* 绝对定位 */
position: absolute;
top: 50px;
left: 100px;

18：Grid布局？

答：Grid布局是一种基于网格的布局系统，可以将页面分成行和列，然后将内容放置在这些行和列中。它可以使页面布局更加灵活和响应式，适应不同的屏幕尺寸和设备。Grid布局可以通过CSS的grid属性来实现，包括grid-template-rows、grid-template-columns、grid-template-areas、grid-gap等属性。

/* HTML */
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

/* CSS */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / 3;
}

.item3 {
  grid-column: 1;
  grid-row: 2 / 4;
}

.item4 {
  grid-column: 2;
  grid-row: 3;
}

.item5 {
  grid-column: 3;
  grid-row: 4;
}

.item6 {
  grid-column: 2 / 4;
  grid-row: 2;
}

19：移动端1px如何解决

答：

在移动端，1px的边框在高清屏幕上会变得模糊，可以使用以下方法解决

1. 使用border-image代替border
2. 使用transform: scale()缩放
3. 使用伪元素 + transform: scale()
4. 使用viewport单位vw/vh/vmin/vmax
5. 使用flexible.js等移动端适配方案

/* 以下是示例代码 */

/* 1. 使用border-image代替border */
.border-image {
  border-width: 1px;
  border-style: solid;
  border-image: url(border.png) 2 2 stretch;
}

/* 2. 使用transform: scale()缩放 */
.scale {
  border: 1px solid #000;
  transform: scale(0.5);
}

/* 3. 使用伪元素 + transform: scale() */
.pseudo {
  position: relative;
}
.pseudo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  transform: scale(0.5);
}

/* 4. 使用viewport单位vw/vh/vmin/vmax */
.viewport {
  border: 1px solid #000;
  width: 50vw;
  height: 50vh;
}

/* 5. 使用flexible.js等移动端适配方案 */
.flexible {
  border: 1px solid #000;
  width: 1rem;
  height: 1rem;
}