您的位置: 首页  >  文章  >  对CSS布局的学习总结

对CSS布局的学习总结

分类: 文章 • 2024-11-02 11:29:33

一、定位

文档流
正常的布局流是将元素放置在浏览器视口内的系统。
默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
内联元素互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。
如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠

position

静态定位（元素在文档流中的正常位置）
position：absolute；（默认值）
相对定位（占据正常文档六中的位置）
position：relative；
使用top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。（相对于元素移动之前的位置）。
绝对定位（元素脱离正常文档流）
绝对定位自己的层独立于一切。这是非常有用的——这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 ——例如弹出信息框和控制菜单，翻转面板，可以在页面上的任何地方拖放的UI功能等。
使用top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。（相对于包含元素的位置）。
给绝对定位的元素设置top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0;会使元素布满整个可视窗口

二、flex

在需要设置为柔性的盒子的父元素中设置display：flex；

当元素表现为 flex 框时，它们沿着两个轴来布局：
对CSS布局的学习总结
主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）。

容器属性
flex-direction
用于指定主轴的方向。可取值为：
·row：默认值，主轴为水平方向，起点在左端
·row-reverse：主轴为水平方向，起点在右端
·column：主轴为垂直方向，起点在上沿
·column-reverse：主轴为垂直方向，起点在下沿
对CSS布局的学习总结
flex-wrap
档在布局中使用定宽或者定高的时候，一行中的元素过多，很有可能会溢出，破坏布局。可取值为：
·nowrap：（默认）不换行
对CSS布局的学习总结
·wrap：换行，第一行在上方
对CSS布局的学习总结
·wrap-reverse：换行，第一行在下方
对CSS布局的学习总结
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为：row nowrap

justify-content
定义项目在主轴上的对齐方式。可取值为：
flex-start：左对齐（默认值）
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间间隔相等
space-around：每个项目两侧的间隔相等
对CSS布局的学习总结
align-item
定义项目在交叉轴上的对齐方式
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
stretch（默认值）：如果项目没有设置高度或设为auto，将占满整个容器的高度
baseline：项目的第一行文字的基线对齐
对CSS布局的学习总结
align-content
定义多轴线对齐方式，如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴起点对齐
flex-end：与交叉轴终点对齐
center：与交叉轴中点对齐
stretch：轴线占满整个交叉轴
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：没跟轴线两侧的间隔都相等
对CSS布局的学习总结
项目属性
order
定义项目的排列顺序，数值越小，排列越靠前
order：number；

flex-grow
定义项目的放大比例，默认值为0，即如果存在是剩余空间，也不放大。
flex-grow:number;
对CSS布局的学习总结
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink
定义项目的缩小比例，默认值为1，即如果空间不足，项目缩小。
flex-shrink:number;
对CSS布局的学习总结
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis
定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目本来的大小。可以设置为跟width和height属性一样的值，即项目占据固定空间。

flex属性
是flex-grow，flex-shrink和flex-basis的缩写，默认值为0，1，auto。

align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-item值，默认为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。
对CSS布局的学习总结
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

三、对齐方式

行内元素的水平居中

.parent{text-align: center;}    
.child{display: inline-block;}

块状元素的水平居中（定宽）

.child{
         width: 200px;
         margin: 0 auto;
     }

块状元素的水平居中（不定定宽）
可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。
垂直居中
条件是父元素是盒子容器且高度已经设定

子元素是行内元素，高度是由其内容撑开的
设定父元素的line-height为其高度
子元素是块级元素但是子元素高度没有设定
给父元素设定

display:table-cell;vertical-align:middle

子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom
水平垂直居中
水平对齐+行高
text-align + line-height
水平+垂直对齐
在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

相对+绝对定位

.parent{
 position: relative;
}
.child{
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 height: 50px;
 width: 80px;
 margin: auto;
}

网页布局
一列布局
margin : 0 auto
两列布局

双inline-block

.wrapper {
 font-size: 0;  
}
.left,
.right {
 display: inline-block;
 vertical-align: top;  
 box-sizing: border-box;
}
.right {
 width: calc(100% - 140px);
}

双float

.wrapper{
 overflow: auto; 
}
.left,
.right {
 float: left;
 box-sizing: border-box;
}
.right {
 width: calc(100% - 140px);
}
float+margin-left
.wrapper-float {
 overflow: hidden;   
}
.left {
 float: left;
}
.right {
 margin-left: 150px;
}
absolute+margin-left
.left {
 position: absolute;
}
.right {
 margin-left: 150px;
}

float+BFC

.wrapper {
 overflow: auto;
}
.left {
 float: left;
 margin-right: 20px;
}
.right {
 margin-left: 0;
 overflow: auto;
}

flex

.wrapper {
 display: flex;
 align-items: flex-start;
}
.left {
 flex: 0 0 auto;
}
.right {
 flex: 1 1 auto;
}

三列布局
两侧定宽中间自适应

圣杯布局
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

相关推荐