前端面试：HTML&CSS基础

前端偶像练习生
101 阅读5分钟

1.行内元素、块级元素、行内块级元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。行内元素不可以设置高度、宽度。行内元素设置水平方向的padding、margin有效，竖直方向无效。
常见行内元素：a b span select strong

块级元素会独占一行，其宽度自动填满其父元素宽度。块级元素可以设置width，height属性，块级元素可以设置padding、margin。
常见块级元素：div h1 ul ol li p td th dl dt

行内块级元素既有块级元素的特点也有行内元素的特点。不仅可以在一行内放置多个行内块级元素，而且可以设置宽高。
常见行内块级元素：input img

2.script标签中defer和async的区别

defer和async都是异步加载外部js脚本，不会阻塞页面的解析。
他们的区别在于：defer会在HTML解析完成后执行，async则在下载完成后执行。defer是按照加载顺序执行的，async是哪个文件先加载完哪个先执行。

3.HTML语义化

好处：爬虫依赖标签来确定关键字的权重，HTML语义化有利于seo；便于团队开发和维护，语义化使得代码更具有可读性；页面内容结构化，使页面没有css的情况下，也能够呈现出很好的内容结构。

常见语义化标签：

  • header（头部）
  • nav（导航栏）
  • section（区块）
  • main（文档主要内容）
  • article（页面独立的内容）
  • aside（侧边栏）
  • footer（底部）

4.display: none visibility: hidden的区别

  • display: none 会让元素完全从dom树消失，渲染时不占据空间，不能点击；visibility: hidden 不会让元素从dom树消失，渲染时占据空间，只是内容不可见，可以点击。
  • display: none 非继承属性，子孙节点消失是父元素从渲染树消失造成的；visibility: hidden 可继承属性，可通过设置子节点visibility: visible显示。
  • display: none 会造成重排；visibility: hidden 会造成重绘。

5.怎么清除浮动

  • 在浮动元素后加一个空的div标签并添加clear: both样式。
  • 使用:after伪元素，原理同上
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
}
  • 利用BFC，给父元素设置overflow: hidden 或 overflow: auto 样式。

6.BFC

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
触发条件：

  • HTML根元素。
  • display的值为inline-block、tabel-cell、flex、grid。
  • position的值为absolute、fixed。
  • float不为none。
  • overflow不为visible。

7.实现九宫格

实现效果：

截屏2023-12-16 17.17.06.png

方法一：使用grid。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% 30% 30%;
  grid-gap: 5%;
}

.grid-item {
  background-color: #e74c3c;
  color: #fff;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
}

方法二：使用flex。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 300px;
  height: 300px;
}

.grid-item {
  width: 30%;
  height: 30%;
  margin-bottom: 5%;
  margin-right: 5%;
  background-color: #e74c3c;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.grid-item:nth-of-type(3n) {
  margin-right: 0;
}

.grid-item:nth-of-type(n+7) {
  margin-bottom: 0;
}

方法三：使用表格布局。

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

table {
  width: 300px;
  height: 300px;
  border-collapse: collapse;
}

td {
  width: 33.33%;
  height: 33.33%;
  border: 7px solid;
  text-align: center;
  vertical-align: middle;
  background-color: #e74c3c;
  color: #fff;
}

8.两栏布局、三栏布局

双栏布局

html结构

<body>
  <div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>  
  </div>
</body>
  • 利用浮动。
.box{
  overflow: hidden
}
.left {
  float: left;
  width: 200px;
  background-color: lightblue;
  height: 400px;
}
.right {
  margin-left: 210px;
  background-color: pink;
  height: 200px;
}
  • 利用flex。
.box {
  display: flex;
}
.left {
  width: 100px;
  height: 400px;
  background: lightblue;
}

.right {
  flex: 1;
  height: 200px;
  background: pink;
}
  • 利用绝对定位。
.box {
  position: relative;
  height: 500px;
}
.left {
  position: absolute;
  width: 200px;
  height: 400px;
  background: lightblue;
}

.right {
  margin-left: 210px;
  height: 200px;
  background: pink;
}

三栏布局

<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>
  • 两边使用absolute，中间使用margin.
.wrap {
  position: relative;
  background: #eee;
  height: 200px;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background: lightblue;
}

.middle {
  margin: 0 110px;
  background: coral;
  height: 200px;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 200px;
  background: pink;
}
  • 使用flex。
.wrap {
  display: flex;
  justify-content: space-between;
  background: #eee;
  height: 200px;
}

.left {
  width: 100px;
  height: 200px;
  background: lightblue;
}

.middle {
  flex: 1;
  background: coral;
  height: 200px;
  margin: 0 10px;
}

.right {
  width: 100px;
  height: 200px;
  background: pink;
}
  • 使用grid。
.wrap {
  display: grid;
  background: #eee;
  height: 200px;
  width: 100%;
  grid-template-columns: 150px auto 150px;
}

.left {
  height: 200px;
  background: lightblue;
}

.middle {
  background: coral;
  height: 200px;
  margin: 0 10px;
}

.right {
  height: 200px;
  background: pink;
}

9.水平垂直居中实现。

html结构

<div class="father">
    <div class="son"></div>
</div>
  • 使用定位+transform
.father {
  position: relative;
  height: 200px;
  width: 200px;
  background: #eee;
}

.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: lightblue;
}
  • 使用table。设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中.
.father {
  display: table-cell;
  height: 200px;
  width: 200px;
  background: #eee;
  vertical-align: middle;
  text-align: center;
}

.son {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightblue;
}
  • 使用flex。
.father {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  background: #eee;
}

.son {
  width: 100px;
  height: 100px;
  background: lightblue;
}
  • 使用grid。
.father {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 200px;
  background: #eee;
}

.son {
  width: 100px;
  height: 100px;
  background: lightblue;
}

10.响应式布局

实现相应式布局的方法有：

  • 媒体查询。
  • 百分比。
  • em、rem。
  • vw、vh。
avatar
文章
阅读
粉丝