实战案例，深入剖析

前言

什么是css块元素？

块级元素是独占一行显示的。它的兄弟元素必定不会与其在同一行中（除非脱离了文档流）。通俗点来说，就是块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。

css块元素的三个特点：

• 每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

• 元素的高度、宽度、行高和顶底边距都是可以设置的。

• 元素的宽度如果不设置的话，默认为父元素的宽度。

元素特点：

块状元素

：

• 在页面中以矩形区域显示。

• 自上而下排列，独占一行

• 可以直接添加宽高

• 一般情况下，作为其他元素或内容的容器

行内元素

：

• 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】
   在页面中最小单位也是矩形。

• 在一行内逐个排列。

• 不可以直接添加宽高，大小是由内容撑开的。

• 内联元素也符合盒模型的规则，但是个别属性会出现问题（padding-top/bottom margin-top/bottom）

• 内联元素在一行内排列的时候，之间有间距

行内快元素

：

• 可以设置宽高。

• 默认情况下，在一行内逐个显示，之间有间距。

• 当前元素的display值为inline-block时，能支持vertical-align属性。

常用元素：

块状元素：

行内元素：

行内块元素：

元素类型转换：

display属性

：作用：检索或者设置元素生成的盒模型类型。

常用属性值

：

• display:block;作用：将元素转成块状元素，拥有块状元素特点。补充：大部分块状元素，默认的display的值都是block;

• display:inline;作用：将元素转成内联元素，拥有内联元素的特点。补充：大部分内联元素，默认的display的值inline;

• display:none;作用：将当前隐藏，并不占据空间。

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](()

JavaScript

性能

linux