好的程序员web前端培训分享CSS基础学习，今天说说web前端入门的基础-CSS基础知识学习。希望这篇文章能帮到你。 1.流 “流”也叫文档流，是CSS的一种基本定位和布局机制。流是html的一个抽象概念，暗示这种排列布局就像水流一样自然、自动。“流体布局”是html默认的布局机制。如果不用css写html，默认布局是自上而下（块级元素如div）和从左到右（内联元素如span）。 二、块级元素和内联元素 这个大家肯定都知道。 块级元素是指填充单行的元素，如div、ul、li、table、p、h1等元素。这些元素的默认显示值为block、table、list-item等。 内联元素也称为行内元素，是指只占据其对应标签边框所包含空间的元素。这些元素在父元素宽度足够的情况下并排显示，如span、a、em、i、img、td等。这些元素的默认显示值为inline、inline-block、inline-table,table-cell等 在实际开发中，我们经常把显示值为inline的元素称为inline-blockinline-tabletable-cell内联元素，显示值为block的元素称为块级元素. 3。width:auto和height:auto width和height的默认值都是auto。 对于块级元素，width:auto自动填充一行。 对于内联元素，width:auto被包裹起来，即由子元素的宽度决定。 不管内联元素还是块级元素，height:auto都是wrapping，即高度被子元素展开。但是在父元素上设置height:auto会导致子元素的height:100%百分比失效。 流体布局，块级元素的宽度width:auto默认为填充父元素。这里的丰满度和width:100%固定宽度不一样，而是像水一样可以根据不同边距自适应的宽度。 css的属性很有意思。它们正常流动。如果块级元素的宽度为固定值且margin为auto，则margin会填满剩余空间；如果margin是一个固定值并且width是auto，则width将填满剩余空间。空间。这就是流体布局的本质。 4。外盒和内盒 外盒是决定元素排列的盒子，也就是决定盒子是具有块级特性还是内联特性的盒子。外箱负责结构布局。 内盒是判断元素内部的一些属性是否生效的盒子。内盒负责内容显示。 例如显示：inline-table；外框是inline，内框是table。外框决定了元素应该像内联元素一样并排显示，内框决定了元素可以设置宽度、高度、垂直边距等属性。 右边的表格和左边的文字排成一行（外框inline的表现特点），自定义宽度111px（内框表格的宽高可以设置). 5.CSS权重与超越！important 有一道面试题难倒了我： //假设下面的样式都应用到同一个节点元素`span`，判断下面哪些样式会生效 body#goddiv.dadspan.son{width:200px;} body#godspan#test{width:250px;} 做前端三年了连css加权都不知道 css选择器权重列表如下： 在css中，!important的权重很高，但是由于宽高会被max-width/min-width覆盖，所以!important会失效。 宽度：100px！重要； 最小宽度：200px； 以上代码经过计算后会被引擎解析为： width:200px;
