前端布局选择,前端后端选择
前端常见布局方式
常见的布局方式
常见的布局这么几种单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。
一列定宽一列自适应
定位布局
左边的宽度写死，右边盒子使用定位拉伸法实现，left等于左边盒子的宽度，right等于0
.left-box{ width:200px; ? }
.right-box{ ?position:absolute; left:200px; right:0; }
或者左边的定位写死宽度，右边的写padding-left等于左边的宽度（常用一点）
.left-box{ width:200px; ?position: fixed; height:100%;?}
.right-box{ ?padding-left:200px;}
浮动布局
左边的宽度写死并且浮动，右边盒子写overflow:hidden;利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响
.left-box {
????????width: 200px;
????????height: 150px;
????????float: left;
????????background: #f22;
}
.right-box {
????????height: 200px;
????????overflow: hidden;
????????background: #cff;
?}
两列定宽一列自适应上面的布局方式同样适用
常见的三列布局一般使用圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局
两者都属于三列布局，是一种很常见的页面布局方式，
三列一般分别是子列、主列和附加列，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，居右且宽度固定。
圣杯布局
div?class="container"?
??? div?class="main"/div?
??? div?class="sub"/div?
??? div?class="extra"/div?
/div
.container?{?
??? padding-left: 210px;
??? padding-right: 190px;
}
.main?{?
????float: left;?
??? width: 100%;
??? height: 300px;
}
.sub?{?
????position: relative;?
??? left: -210px;
????float: left;?
??? width: 200px;
??? height: 300px;
??? margin-left: -100%;
}
.extra?{?
????position: relative;?
??? right: -190px;
????float: left;?
??? width: 180px;
??? height: 300px;
??? margin-left: -180px;
}
双飞翼布局
div?class="main-wrapper"?
??? div?class="main"/div?
/div
div?class="sub"/div?
div?class="extra"/div?
.main-wrapper?{?
????float: left;?
??? width: 100%;
}
.main?{?
??? height: 300px;
??? margin-left: 210px;
??? margin-right: 190px;
????background-color:?rgba(255, 0, 0, .5);?
}
.sub?{?
????float: left;?
??? width: 200px;
??? height: 300px;
??? margin-left: -100%;
????background-color:?rgba(0, 255, 0, .5);?
}
.extra?{?
????float: left;?
??? width: 180px;
??? height: 300px;
??? margin-left: -180px;
????background-color:?rgba(0, 0, 255, .5);?
}
俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。
其他的话还有
flex布局
Flexbox又叫弹性盒模型。它可以简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能。
Flex布局是我最喜欢的布局，合理使用它能够大大减少布局方面的工作, 例如以上列举的三列布局也可以使用flex轻松实现。此外在移动端使用flex也比较常见。
响应式布局
网页可以自动识别设备屏幕宽度，根据不同的宽度采用不同的CSS的样式，从而达到兼容各种设备的效果。
响应式布局使用媒体查询(CSS3 Media Queries), 根据不同屏幕分辨率采用不同CSS规则
流式布局
流式布常见的就是bootstrap了它提供了一套响应式，移动优先的流式栅格系统(grid system)，将屏幕分成12列来实现响应式的。它的实现原理非常简单，Media Query加上float布局
前端几种常见的布局方式
1.静态布局（固定宽高）
2.弹性布局（flex）————常用
3.圣杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等
A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量
B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量
C，flex-basis：表示该子元素的初始宽度
4.自适应布局（为不同的屏幕分辨率定义的布局 @media媒体查询技术）
5.流式布局：（宽高用百分比，按屏幕分辨率调整，布局不发生变化）
6.响应式布局（使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式）
7.栅格布局
1）.栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。
使用栅格布局：bootstrap（12列），element（24栏），antDesign
2）.栅格布局
container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙
3）.栅格布局实现响应式布局
8.table布局（使用表格进行页面排版和样式设置）
1）.用法
? ? ? display:table
? ? ? display:table-cell，相当于td元素
? ? ? display:table-row，相当于tr元素
? ? ? table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决? ? ? ? 定；fixed ,固定表格布局。
前端常见的布局方式
css常见的布局方式:
-静态布局
-自适应布局
-流式布局(又别名 百分比布局 %)
-响应式布局：媒体查询
-弹性布局 (rem/em flex布局)