当前位置： 首页 > Web前端 > CSS

解剖CSS布局原理

时间：2023-03-30 22:02:05 CSS

前言本文带你重新认识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。常用的内联标签：,,,,内联元素可能会遇到这种情况，

内联元素内联元素
内联元素之间有一个空白区域空白区域的形成是因为之间有一个回车符。在html中，空格、制表符、回车都是空白。多个空格视为一个空格。空间的大小由父
的字体大小决定。注意：只有inline（行内块）和inline（行内块）之间的空格才会形成空格，文本元素（空格除外）也是行内元素。解决空白区域有四种方案：设置font-size：0；在
上，将font-size设置回，注释掉空白字符，将span排列在同一行，并靠在一起使用floating浮动，有些场合不允许使用floating，本文不适用块级标签：
,

to

,

,

    ~
  • ,
    ~
    如果块级之间没有浮动或者定位元素，它总是会垂直排列，而不管宽度。块级元素默认宽高为auto，具有自适应缩放的特性。例如：浮动元素
块级元素
块的文档-levelelement如果流不被销毁，当宽度为auto时，它会一直填充容器的宽度。当有东西被遮挡时，文字流会自动后移，但实际面积保持不变，只是被遮挡了。您可以使用此功能进行图形布局，或进行自适应宽度布局。注意：一旦块级元素脱离文档流，该特性将失效。块级元素还有另一个特点。如果文档流没有被破坏，margin会自动填充水平剩余部分块级元素

橙色部分代表margin，默认情况下margin是0，但是它可以填满剩下的部分，这就解释了为什么块级元素总是垂直排列的。如果margin的值设置为auto，则会左右平分，形成块水平居中的现象。块级元素在处理盒模型时更加灵活。通常，首先使用块级元素布局。当无法实现块级元素时，使用其他元素布局。它擅长处理自身、父元素和兄弟元素之间的布局，而不擅长配对子元素。元素布局三、行内块元素展示：inline-block；和内联元素一样，默认的宽高是由子元素决定的，但是它可以设置宽高和外边距。内联块之间水平排列内联块元素是内联元素和块级元素的组合。它们具有内联元素的特点和块级元素的灵活性，但又不具备块级元素的特点。它也有元素之间的空白问题，同样的解决方案。内联块元素有一个很大的特点，就是可以像操作文本元素一样操作自己（包括子元素），像操作文本一样操作一个区域，如下例所示：
.parent{width:400px;高度：80px；字体大小：0；/*防止空格*/text-align:center;文本缩进：-40px；/*文字缩进*/letter-spacing:30px;/*字母之间的空格*/background:#ccc;}.box{display:inline-block;宽度：100px；高度：80px；背景：#fcc；font-size:16px;}将文字居中，设置文字向左缩进40px，文字间距30px。这些都是对文本的设置，但是inlineblock才生效。两个内联块被视为两个单词，因此间距将生效。通过这个特性，可以完成一些非常细微的布局操作，在实际开发中也是非常常用的。它通常用作与其他元素组合的容器。4.表格元素展示：表格；/*对应于*/display:table-cell;/*对应
*/同标签系列，的宽度会填满
，而，的内容td>超出宽度默认会展开。当然你也可以设置成不打开。使用CSS定义可以将普通的标签变成表格元素。tr不能设置宽度，所以一般不用tr，也就是css中的table-row，所以通常用table和td，不需要tr，td也可以平分table的宽度，结构关系必须成为亲子关系。111122223333.parent{显示：表格；宽度：200px；高度：40px；背景：#ccc；}.child{显示：表格单元格；}.child1{背景：#0cc；}.child2{背景：#c0c??；}.child3{背景：#cc0;}子元素没有宽高，但是可以填高平分宽。这是表格元素的一大特点。用过表格布局的应该都知道，如果td内容太多，宽度会自动扩大，占满周围的td宽度，table-cell也是一样，但是如果你不想自动展开，在table层设置table-layout:fixed;table元素更擅长居中布局，因为table-cell元素支持vertical-align和text-align这两个属性，水平和垂直居中子元素，设置子类为inline-block可以使区域居中，而不会需要知道子类的宽度和高度。表格元素也可以水平居中。设置方法和块级元素一样，设置margin:0auto。不同之处在于表格元素不需要知道宽度。5.Flexbox元素Flexbox是CSS3引入的一种布局方式，可以更有效地对容器中的元素进行排列、对齐和分配空白空间。本文讲解不涉及弹性盒子元素，因为其他大部分布局都可以，大部分弹性盒子元素都可以做，但兼容性较差，不适合PC端。有人已经详细解释过了。推荐阅读这篇文章阮一峰Flex布局教程6.浮动元素float:none;/*取消浮动*/float:left;/*左浮动*/float:right;/*rightfloating*/floatnotnone属于浮动元素的浮动元素强制元素靠左或靠右。如果同一方向有多个元素，它们会水平排列并靠在一起。如果没有足够的空间，它们会换行，如下图所示。浮动元素会使该元素脱离文档流，其他元素会忽略浮动元素并占据浮动元素的位置。下面的例子浮动元素浮动元素块级元素.child{float:left;宽度：100px；高度：40px；}.child1{背景：#fcc；}.child2{背景：#ccf；}.box{高度：60px；background:#ccc;}不在文档流中的元素将具有更高的级别，并将堆叠在顶部。浮动元素并没有完全脱离文档。这是部分分离。可以将其拉回文档流，使.box位于.child之下。有两种方法：第一种是用clear来清除float。有些人可能会写clear:both在.box上以清除浮动。这样可以达到效果，但是会造成一个问题，margin-top无效。.box之前要插入一个空元素，空元素用来清除浮动。这个空元素可以用CSS伪元素替换。所以清除浮动的代码应该是这样的。父母：之后{内容：'';显示：表格；clear:both;}第二种方式是将float元素的父元素转为BFC。什么是BFC后面会解释，现在先来看一下实现代码。parent{overflow:hidden;}一般用的最多，因为它不会受到空元素设置的影响。PC端清除浮动比较常见。一般清除浮点数的代码放在.clearfix中。页面在使用这个类之前需要清空浮动，或者sass继承。浮动元素在PC端很流行，可以水平排列块级元素。写起来简单，就一个float:left浮动元素最大的特点就是可以让一个元素单独左或右，不影响其他元素。并且它可以保持文档的流向，这是其他元素无法做到的。7、定位元素位置：static；/*取消定位*/position:relative;/*相对定位*/position:absolute;/*绝对定位*/position:fixed;/*fixedpositioning*/positionisnotstatic定位元素。定位元素分为三种类型：相对定位、绝对定位和固定定位。三者都有top、bottom、left、right、z-index属性，都是根据某个参照物定位的。不同的是定位引用对象不同，文档流向不同。下面分别介绍各自的特点和用途。相对定位属于常规文档流。它的排列方式与块级元素相同。它的定位参考是它自己。如果你设置左边，它会向右移动，如果你设置底部，它会向上移动。右边和上面是一样的。它不像margin，它的位移只影响自身，不影响其他元素，所以可能会造成覆盖其他元素的现象。相对定位可以用来设置定位参照物，方便绝对定位操作。绝对定位脱离了文档流，而且是完全分离的。不像浮动元素，不能拉回文档流，也属于BFC。它的定位参照物是不固定的。如果父元素是定位元素，则先将父元素作为定位引用对象。如果不是定位元素，则进入下一层，直到检测到定位元素。如果到达仍然不存在，它将使用浏览器的第一个视口作为定位参考。浏览器视口是指蓝色区域，浏览器的第一个视口是指滚动条在上面的视口。固定定位和绝对定位一样，唯一的区别是固定定位的定位参考对象是固定在浏览器视口上的。绝对定位和固定定位有一个特点。设置left和right将锁定这两点之间的空间。如果未设置宽度或width:auto，则空格将被填充。如果设置了width，当margin为auto时才会生效，在锁定的空间居中。此功能对垂直高度、顶部和底部具有相同的效果。文档流常规文档流从左到右按指定间隔逐个排列框，如果放不下则跳到下一行继续排列。这个文档流的特点在BFC中会做详细的对比和解释。BFCBFC的全称是块格式化上下文（BlockFormattingContext），是常规文档流的改进版。此单据流下的框将是一个独立的框。这是什么意思？常规文档流还能共享盒子吗？确实如此。其实我们用的最多的还是BFC。如果不了解BFC，在实际开发中可能会不小心使用常规文档流。有些现象会被认为是bug，但实际上是文档流的一个特性。下面是一些常见的文档流现象：1.折叠边距box1box2.box1{height:60px;背景：#fcc；margin-bottom:10px;}.box2{height:60px;背景：#ccf；margin-top:20px;}很多时候，我们想要的是30px的间距，但实际上是20px，那是因为sideMargins被折叠了，只会取最大的margin。这种情况的解决方法是将它们放在不同的BFC中，这个改为box1box2.wrap{overflow:hidden;}.box1{height:60px;背景：#fcc；margin-bottom:10px;}.box2{height:60px;背景：#ccf；margin-top:20px;}BFC是一个独立的盒子，它自己的边距不会和其他盒子合并，所以外边距只会重叠，不会塌陷。2.常规文档流中的块级元素在marginleak时会出现这样的问题box.parent{height:60px;background:#ccf;}.box{margin-top:20px;}这段代码应该将文本向下移动20px，结果应该是这样的但实际上不是，结果是第一个块级元素子元素的margin-top会穿过父元素的barrier，泄漏出去，成为父元素的margin-top。你可能会想到给父元素加一个barrier，设置border-top，但是这样会无缘无故的加一个borderspace。最好的方法是将父元素转换??成BFC，这样改变.parent{height:60px;背景：#ccf；overflow:hidden;}BFC内部元素不会影响父容器。除了更正常规文档流的问题外，BFC还对浮动元素进行了一些更正。3、清除浮动浮动元素浮动元素块级元素.child{float:left;宽度：100px；高度：40px；}.child1{背景：#fcc；}.child2{背景：#ccf；}.box{高度：60px；background:#ccc;}还是拿之前浮动元素的例子来说吧。当时我们并没有解释为什么BFC可以清除浮动元素。现在说说原理。细心的同学应该能发现，.child是有宽高的，而.parent作为父元素是没有高度的，所以.box忽略了浮动元素，占据了它的位置。如果.parent能够获取到子元素的高度，就符合正常的文档流程，达到清除浮动浮动的效果。可以给BFC设置.parent来实现.parent{overflow:hidden;}，因为无论BFC的子元素如何变化，都不会影响到父容器。高度仍会拉伸父容器。4.防止文字换行有些场合不希望文字换行，如下代码ThisisapieceoftextThisisapieceof文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字是一段文字.float{width:50px;高度：50px；向左飘浮;背景：#fcc；}.text{高度：100px；background:#ccf;}设置.text为BFC可以防止文字环绕.text{height:100px;背景：#ccf；overfloat:hidden;}以上是BFC常见的应用场合。有些人可能没有遇到过这些场合，因为你在无形中使用BFC。以上例子都是使用overflow:hidden设置BFC。其实设置的方法有很多种。只要满足以下条件即可BFCfloat不是noneposition，value不是static，或者relativedisplay的值为table-cell，table-caption，inline-block，flex，或者inline-flex之一，并且value溢出是不可见的。除了BFC，其他都是正常的文档流。脱离文档流脱离文档流是在BFC的基础上，去掉一些常规的文档流的改造。从文档流中分离有两种类型：部分分离和完全分离。部分分离是修改常规文档流的排列顺序。不再只是从左到右排列，而是从右到左，或者一左一右。为了不影响常规单据流的安排，默认与单据流分开，但仍将受父容器的约束。部分分离的是float:left和float:right。彻底脱离就是完全摒弃常规的文档流向，没有任何约束，按照左、右、上、下定位。完全分开的是position:absolute和position:fixed。

解剖CSS布局原理相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

的宽度会平分