对于前端的人来说，想要入门Web前端技术，首先要了解的当然是Web前端有哪些知识点是必须掌握的。从前端产生到现在，已经从简陋的HTML，CSS，JavaScript三把刷子做出来静态网页的时代，发展到现在视觉效果酷炫，适用终端广泛，开发手段丰富多样的更广阔的发展时代。HTML、CSS，JavaScript是学习前端的基础，特别是JavaScript，我们对前端基础的掌握程度，极大程度上体现在对JavaScript的掌握程度上。所有的浏览器引擎运行的脚本语言都是JavaScript，我们使用的框架也是用JavaScript开发的。此外，我们还需要学习运行的机制和原理。不仅是框架的原理，也还包括JavaScript语言和浏览器引擎的原理。高级前端工程师对于框架和语言的理解绝不会停留于了解API的层面上，需要深入到了解内部原理和运行机制的层面上。

今天小编要跟大家分享的文章是关于Web前端入门基础-CSS的基础知识点学习。正在学习web前端技术的小伙伴们来和小编一起看一看吧，希望本篇文章能够对你有所帮助。

“流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制，如你写的html不用css，默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。

这个大家肯定都知道。

块级元素是指单独撑满一行的元素，如div、ul、li、table、p、h1等元素。这些元素的display值默认是block、table、list-item等。

内联元素又叫行内元素，指只占据它对应标签的边框所包含的空间的元素，这些元素如果父元素宽度足够则并排在一行显示的，如span、a、em、i、img、td等。这些元素的display值默认是inline、inline-block、inline-table、table-cell等。

实际开发中，我们经常把display计算值为inline inline-block inline-table table-cell的元素叫做内联元素，而把display计算值为block的元素叫做块级元素。

width、height的默认值都是auto。

对于块级元素，width:auto的自动撑满一行。

对于内联元素，width:auto则呈现出包裹性，即由子元素的宽度决定。

无论内联元素还是块级元素，height:auto都是呈现包裹性，即高度由子级元素撑开。但是父元素设置height:auto会导致子元素height:100%百分比失效。

流体布局之下，块级元素的宽度width:auto是默认撑满父级元素的。这里的撑满并不同于width:100%的固定宽度，而是像水一样能够根据margin不同而自适应的宽度。

css的属性非常有意思，正常流下，如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间。这就是流体布局的根本所在。

外在盒子是决定元素排列方式的盒子，即决定盒子具有块级特性还是内联特性的盒子。外在盒子负责结构布局。

内在盒子是决定元素内部一些属性是否生效的盒子。内在盒子负责内容显示。

如 display: inline-table; 外在盒子就是inline，内在盒子就是table。外在盒子决定了元素要像内联元素一样并排在一排显示，内在盒子则决定了元素可以设置宽高、垂直方向的margin等属性。如下图

右侧的table和左侧的文字在一行排列（外在盒子inline的表现特征），同时有拥有自定义宽度111px（内在盒子table可以设置宽高）。

曾经有道面试题把我难住了：

// 假设下面样式都作用于同一个节点元素`span`，判断下面哪个样式会生效
body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}

可怜当时做了三年前端的我竟然还不知道css有权重

css选择器权重列表如下：

在css中，!important的权重相当的高，但是由于宽高会被max-width/min-width覆盖，所以!important会失效。

width: 100px!important;
min-width: 200px;

上面代码计算之后会被引擎解析成：

width: 200px;

以上就是小编今天为大家分享的关于Web前端入门基础-CSS的基础知识点学习的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端知识记得关注web培训官网。最后祝愿小伙伴们顺利学成，成为一名优秀的web前端工程师！

【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】