前言本文带你重新认识CSS布局,带你解剖布局原理,前提是你有基础!本文将为您解开布局的疑惑。了解每一个布局元素和它们的特性,你就会知道为什么会是这样的结果。本文内容纯属个人理解,不代表官方。本文主要是理论部分。实际例子可以参考我的另一篇文章PC端CSS布局总结。在学习CSS布局之前,你需要了解这些。Model,每个盒子都有自己的position、margin、border、padding、width、height,这些属性决定了盒子的大小和位置。框的大小由边框、填充、宽度和高度决定。盒子的位置是我们接下来要探索的。浏览器检查员可以看到每个选项卡的盒子模型。看box模型,有一些需要注意的地方就是图中的数值都是px单位,其他单位都会换算成px。填横线-表示默认值,可以是0或者auto;图中蓝色区域820x26表示widthxheight,是最后计算出来的实际宽高,不是cssheight中设置的宽高。如果设置了box-sizing:border-box,系统会自动减去padding和border的大小,计算出的值会显示在蓝色区域,也就是实际可用空间。图中的position代表top、bottom、left、right的值,只对定位元素有效。html的标签结构属于树型结构,转换成盒模型后,就变成了一组一个。最外层是document,内层是。在中,放置了两个盒子head和body。等等。CSS布局就是探索盒子在父容器(上层盒子)中的位置。盒子的位置与盒子的大小和盒子之间的间距有关,也就是盒子模型上的属性。每个标签处理盒模型的方式有些不同,我将这些盒分为以下几类:内联元素、块级元素、内联块元素、表格元素、弹性盒元素、浮动元素和定位元素。这些元素我统称为布局元素。箱子的位置也与箱子的排列有关。是从左到右排列的吗?还是从右到左?是否允许重叠?箱子的排列就是所谓的单据流,单据流一般分为常规单据流、BFC、单据外流三种。下面将详细说明布局元素和文档流。布局元素CSS将这些布局元素分为三类,分别用display、float、position声明。其中display用于声明:内联元素、块级元素、内联块元素、表格元素、弹框元素。float用于声明浮动元素。position用于声明定位元素。这三个类可以组合使用,其中display是必填项,不设置有默认值。1.内联(inline)元素显示:inline;宽高由子元素决定,不能手动修改。子元素一般放置文本元素,并与其他内联元素并排放置。内联元素的宽高不能改变,导致某些属性无效,如:width系列、height系列、margin-top、margin-bottom、padding-top、padding-bottom、line-height。常用的内联标签:, ,,,,内联元素可能会遇到这种情况,
to
,
~
~
