定位
1、流动模型（Flow）
流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
（每一个便签都显示着自己本来默认的那个宽高）
第二点，在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2、浮动模型 (Float)
任何元素在默认情况下是不能浮动的，但可以用CSS 定义为浮动
div{float:left;}
div{float:right;}
可以为不同的div设置不同的浮动方式来布局。
3、层模型（Layer）
层模型有三种形式：
1、相对定位(position: relative)
2、绝对定位(position: absolute)
3、固定定位(position: fixed)
z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。
静态定位
Position：static
每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置
相对定位relative
占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠.
top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移， 非定位元素设置此属性无效。
bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。
CSS left属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。
right样式属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。
来精确指定要将定位元素移动到的位置。相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间
绝对定位
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。
被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除；
固定定位
fixed
绝对定位固定元素是相对于<html> 元素 表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身
position: sticky
基本上是相对位置和固定位置之间的混合，其允许定位的元件像它被相对定位一样动作，直到其滚动到某一阈值点（例如，从视口顶部10像素），之后它变得固定。在指定范围内为相对定位元素，超出范围为绝对定位元素
Flex：弹性盒子
解决的问题：
- 在父内容里面垂直居中一个块内容。
- 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
- 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
flex模型
主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。控制 flex 项在主轴上的位置。
align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。控制 flex 项在交叉轴上的位置。
默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
可以用 flex-end 来让 flex 项到结尾处。
center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。
设置了display: flex 的父元素被称之为flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）
flex-direction: column;//将那些元素设置为列布局
row-reverse；
column-reverse
换行
flex-direction: row;
flex-wrap: wrap;
可合并为：
flex-flow:row wrap
flex的动态尺寸设置
article { flex: 1; }
//占用的空间是在设置 padding 和 margin 之后剩余的空间
article:nth-of-type(3) { flex: 2; }
//第三个元素占用了两倍的可用宽度和剩下的一样— 现在总共有四个比例单位可用。 前两个 flex 项各有一个，因此它们占用每个可用空间的1/4。 第三个有两个单位，所以它占用2/4或这说是1/2的可用空间。
flex 项排序
所有 flex 项默认的 order 值是 0。
order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面
布局
1.一列布局：
一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等；
设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
2.两列布局：
说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动
设置左左浮动，或设置左右浮动（这是需要确定父级元素的宽度）
如何父级元素没有设置高度，则需要设置overflow:hidden来清除浮动产生的影响
对于自己相邻元素清除浮动产生的影响用：clear：both;
3.三列布局：
两侧定宽中间自适应
首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响！
4.混合布局：
在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。
一、水平居中：
(1) 行内元素的水平居中？
父元素中设置text-align:center
子元素的display设置为inline-block
(2）块状元素的水平居中（定宽）
设置“左右margin”值为“auto”来实现居中的。
margin : 0 auto
(3)块状元素的水平居中（不定定宽）
可以直接给不定宽的块级元素设置text-align：center来实现，
也可以给父元素加text-align:center 来实现居中效果。
当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block 显示或行内块元素
二、垂直居中：
场景1：子元素是行内元素，高度是由其内容撑开的
设定父元素的line-height为其高度来使得子元素垂直居中
场景2：子元素是块级元素但是子元素高度没有设定
父元素设定
display:table-cell;
vertical-align:middle
场景3：子元素是块级元素且高度已经设定
子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2
三、水平垂直居中：
3.1水平对齐+行高
text-align + line-height实现单行文本水平垂直居中
3.2水平+垂直对齐
- text-align + vertical-align
在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素
<style>
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
</style>
- 若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。
子元素本身设置vertical-align:middle
3.3相对+绝对定位
使用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 80px;
margin: auto;
}
</style>
七种实现左侧固定，右侧自适应两栏布局的方法
双inline-block方案
.all {
box-sizing: content-box;
font-size: 0; // 消除空格的影响
}
.left, .right {
display: inline-block;
vertical-align: top; // 顶端对齐
font-size: 14px;
box-sizing: border-box;
}
.right { width: calc(100% - 140px); }//动态计算右侧盒子的宽度
需要知道右侧盒子距离左边的距离，以及左侧盒子具体的宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。同时，还需要知道右侧盒子的宽度是否包含border的宽度。 在这里，为了简单的计算右侧盒子准确的宽度，设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。 同时，作为两个inline-block的盒子，必须设置vertical-align来使其顶端对齐。 另外，为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。
缺点:
需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing
需要消除空格字符的影响
需要设置vertical-align: top满足顶端对齐。
双float方案
缺点:
需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing。
父元素需要清除浮动。
.all{
overflow: auto; // 清除浮动
box-sizing:content-box;
}
.left, .right {
float: left;
box-sizing: border-box;
}
.right { width: calc(100% - 140px); }
float+margin-left方案
Overflow:hidden//清除浮动
左侧：float：left
margin-left:150px;
缺点：
需要清除浮动
需要计算右侧盒子的margin-left
使用absolute+margin-left方法
左侧：position:absolute;
margin-left:150px;
缺点:
使用了绝对定位，若是用在某个div中，需要更改父容器的position。
没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。
使用float+BFC方法
左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。
.all { overflow: auto; }
.left { float: left; margin-right: 20px; }
.right { margin-left: 0; overflow: auto; }
flex方案
.all { display: flex; align-items: flex-start; }
.left { flex: 0 0 auto; }//none
.right { flex: 1 1 auto; }//auto
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
动态计算宽度的情况
两种方案: 双inline-block方案和双float方案。宽度极限小时，右侧的div宽度会非常小，由于遵循流动布局，所以右侧div会移动到下一行。
动态计算右侧margin-left的情况
两种方案: float+margin-left方案和absolute+margin-left方案。宽度极限小时，由于右侧的div忽略了文档流中左侧div的存在，所以其依旧会存在于这一行，并被隐藏。
float+BFC方案的情况
这种情况下，由于BFC与float的特殊关系，右侧div在宽度减小到最小后，也会掉落到下一行。
flex和grid的情况
这种情况下，默认两种布局方式都不会放不下的div移动到下一行。不过 flex布局可以通过 flex-flow: wrap;来设置多余的div移动到下一行。 grid布局暂不支持。
三种三栏网页宽度自适应布局方法
这里的左中右三个div的顺序是可以任意调整的，这与剩下的两中方法就不一样了，需要注意一下。
此方法的优点是，理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。 缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
2、自身浮动法
左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。
3 圣杯布局和双飞翼布局
圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，
圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），
双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
效果简图如下：
圣杯
<div id='header'>header</div>
<div id='sb'>
<div id='main'>main</div>
<div id='left'>left</div>
<div id='right'>right</div>
</div>
<div id='footer'>footer</div>
双飞
<div id='header'>header</div>
<div id='sf'>
<div id='middle'>middle</div>
</div>
<div id='left'>left</div>
<div id='right'>right</div>
<div id='footer'>footer</div>
圣杯
#sb{
padding: 0 200px 0 180px;
height: 100px;
}
#main{
float: left;
width: 100%;
height: 100px;
background-color:pink;
}
#left{
float: left;
width: 120px;
height:100px;
margin-left: -100%;
position: relative;
left: -120px;
background-color:blue;
}
#right{
float: left;
width: 200px;
height:100px;
margin-left: -200px;
position: relative;
right: -200px;
background-color:blue;
}
双飞
#sf{
float: left;
height: 100px;
width: 100%;
background-color:skyblue;
}
#left{
float: left;
height: 100px;
width: 120px;
background-color:orange;
margin-left: -100%;
}
#right{
float: left;
height: 100px;
width: 200px;
background-color:orange;
margin-left: -200px;
}
#middle{
padding: 0 200px 0 120px;
height: 100px;
}
网友评论