前言
只有深入了解了css的布局才能在写页面的时候信手拈来,才能避免写出屎山代码！好好整理下布局的相关技术对自己的前端能力会有质的飞跃！！布局是一种确定内容的大小和位置的算法,它呢是根据元素、容器、 兄弟节点和内容等信息来计算的。
布局相关技术
首先呢我们会用到三种布局方式:常规流、浮动、绝对定位。接下来呢我就一一整理下。
常规流
常规流可以分为行级、块级、表格布局、FlexBox、Grid布局。
盒模型
在此之前我们要清楚的认识到盒模型。
我们把一些元素理解为一个个盒子,每一个盒子从里到外分为content、padding、border、margin。默认情况下我们在css里边指定宽度和高度的时候,指定的是box里边的content,我们可以设置
box-sizing: border-box;这样当我们再次用width和height后指定的就为content+padding+border。关于一些height或width的小细节如下:
1.指定content box 高度 2.取值为长度、百分数、auto 3.auto取值由内容计算得来 4.百分数相对于容器的content box高度 5.容器有指定的高度时候,百分数才生效。
对于border来讲可以设置none、solid、dashed、dotted来设置边框的样式 另外还能设置颜色、粗细大小 例如：border:1px solid #ccc
对于margin来说:可以指定元素四个方向的外边距,取值可以是长度、百分数、auto。百分数相对于容器的宽度。值得一提的是如果设置margin-left和margin-right为auto的话那么元素就为水平居中。 margin最有意思的一点是会出现margin塌陷的问题。看看下边的代码。
<div class="a"></div>
<div class="b"></div>
<style>
.a{
background:lightblue;
height:100px;
margin-bottom:100x;
}
.b{
background:coral;
height:100px;
margin-top:100px;
}
</style>
这两个元素实际上最后间距只为100px。它只会取两者最大的一个边距,而不是简单的相加。
块级vs行级
块级不会和其它盒子并排摆放而行级会和其它的行级盒子一起放在一行或者拆开成多行。块级元素适用所有的盒模型属性,但是行级元素并不适用盒模型中的width、height。通过设置display:block 或者display:inline可以来将元素转化为块级或者行级。盒子是css里边的概念,元素是HTML里边的概念。
块级标签有：</body> </article> <div> <main> <section> h1-6、 <p> 、<ul>、<li>......
行级元素有<span>、<em>、<img>、<strong>、<cite>、<code>......
值得一提的是可以设置inline-block(这很特殊)本身是行级,可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行。 行级排版上下文(Inline Formatting Context)IFC。只包含行级盒子的容器会创建一个IFC。IFC内的排版规则为:1.盒子在一行内水平摆放,2.一行放不下时候会换行显示。3.text-align决定一行内盒子的水平对齐。4.vertical-align决定了一个盒子在行内的垂直对齐。5.避开浮动(float)元素
有些容器会创建一个BFC如:根元素、浮动、绝对定位、inline-block、Flex子项和Grid子项、 overflow值不是visible的块盒。或者display:flow-root。 对于块级排版上下文BFC(Block Formatting Content)内的排版规则就是: 1.盒子从上到下摆放。2.垂直margin合并 3.BFC内盒子的margin不会与外面的合并。4.BFC不会和浮动元素重叠。
Flex Box
我们看了上边的可以体会到块级和行级只能实现一些简单的效果,要么从上到下摆放......没办法实现一些更高级的布局方式。因此CSS提出了一种更高级的布局方式:Flex Box 一种灵活的布局方式它可以控制子级盒子的摆放的流向,摆放的顺序,盒子宽度和高度,水平和垂直方向的对齐;是否允许折行。 排版方式可以设置flex-direction:row 或者colum来控制流向。除了流向还有对齐方式:我们可以设置justify-content(当流向为主轴时候)
当流向为侧轴时候设置align-items对齐。
顾名思义当我们用flex布局的时候,元素具有弹性(Flexibility)可以设置子项的弹性;当容器有剩余空间的时候会伸展;当容器空间不够时候会收缩。 flex-grow 有剩余空间时候的伸展能力,flex-shrink容器空间不足时候的收缩的能力。flex-basis没有伸展或收缩时候的基础长度。
Grid布局
flex布局已经非常强大了,但css官方还是引入了grid布局。这是因为页面上的布局不可能都是一条流式的布局要么从左到右,要么从上到下。这太单一了,所以引入了grid这种二维性的布局。 我们可以采用display:grid使元素生成一个块级的Grid容器。这样可以使得grid-template相关的属性将内容划分为网格。然后设置每一个子项占用哪些行/列。 我们可以采用grid-template-colums:100px 100px 200px grid-template-rows:100px 100px 来划分。 除了px还有fr来划分这表示一份一份的意思。如grid-template-colums:100px 1fr 1fr; grid-template-rows:100px 1fr
我们还可以来划分区域,使得布局多样化。
float浮动
主要是用于图片和文字环绕的效果,flex和grid出现了之后主要就让float浮动来做文字环绕的效果,其它的就交给flex和grid来实现。
绝对定位
提到绝对定位我们就不得不提position属性了。position有static、relative、absolute、fixed属性 static是默认值,非定位元素。relative是相对自身原本位置偏移,不脱离文档流。absolut是绝对定位,相对非static祖先元素定位。fixed相对于视口绝对定位。 我们来一一剖析下。position可以在常规流里面布局。相对于自己本应该在的位置进行偏移,使用top、left、bottom、right设置偏移长度。流内其它元素当它没有偏移一样布局！！
position:absolute 就会脱离常规流,相对于最近的非static祖先定位,实在是找不到就会去找HTML根元素。并且不会对流内元素布局造成影响。
position:fixed也会脱离常规文档流。它总是会相对于窗口进行定位。
总结:在学习方面要保持好奇心,持续学习,先干了再说。希望自己执行能力越来越强！！！
