一、自适应布局
1. 两栏布局：左侧固定右侧自适应，高度填满屏幕
flex布局
<div class="outer">
<div class="left">左侧固定</div>
<div class="right">右侧自适应</div>
</div>
.outer {
height:200px; // 宽度不用指定
background-color:#674ac3e0;
display:flex;
// 不加这句的话，高度会填充整个父元素；加上的话子元素高度适应于自身
align-items:flex-start;
}
.left {
width:100px; // 宽度
background-color:#3ef8cc;
}
.right {
background-color:#FFC107;
flex:1; // 1 1 0%
}
- 左侧盒子设置
float:left脱离文档流，右侧盒子设置margin-left空出左侧盒子的宽度。
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
.outer {
height: 200px;
}
.left {
float: left;
width: 100px;
height: 200px;
background-color: blue;
}
.right {
margin-left: 100px;
height: 200px;
background-color: blueviolet;
}
- 父元素设置
overflow: hidden，右边元素就不用设置margin-left。
2. 三栏布局：中间自适应
- flex同上
- float：
middle的div必须在最后，否则会把right的div挤下去。- 父元素
overflow:hidden触发BFC，左右子元素都各种float: left，float: right，高度都要设置。
<div class="outer">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
.outer {
height: 200px;
overflow: hidden;
}
.left {
float:left;
width: 100px;
height: 200px;
background-color: blue;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: blueviolet;
}
.middle {
height: 200px;
background-color: brown;
}
3. 四个宽度均分的布局
4个子元素均设置为 flex:1。
二、五点布局
<div class="outer">
<div class="inner">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="item"></div>
<div class="inner">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
.outer {
width: 100px;
height: 100px;
background-color: brown;
display: flex;
justify-content: space-between; // inner、item、inner 三个元素从左到右排列，两边相切
}
.inner {
display: flex;
flex-direction: column;
justify-content: space-between; // inner内部的两个item元素从上到下排列，两边相切
}
.item {
width: 10px;
height: 10px;
background-color: black;
// 此时四个顶点已经配置好，只差中间的的元素
align-self: center; // 设置对齐方式
}
三、双飞翼布局和圣杯布局
两者都是：左右两栏固定宽度，中间自适应的三栏布局。中间栏要优先渲染。
- 圣杯布局：左右和中间的div互不包含。
- 双飞翼布局：在中间 div 内部创建左右子 div。
- 圣杯布局
为了中间div不被遮挡，将中间div设置了
padding-left和padding-right后，将左右两个div用相对布局 position:relative 分别配合 right 和 left 属性，以便左右两栏div移动后不遮挡中间div。
- 均设置为左浮动，然后设置middle=100%，将 left 和 right 挤到下一行。
- 通过设置 margin-left 为负值，让 left 和 right 回到和 middle 同一行。
- 通过设置父元素的 padding-left 和 padding-right ，让两边留出空隙。
- 通过相对定位，让left和right移到两边。
<div class="outer">
<div class="middle"></div> // 中间栏先渲染
<div class="left"></div>
<div class="right"></div>
</div>
.outer {
padding-left: 200px; /* 为左右子栏腾出空间 */
padding-right: 200px;
background-color: brown;
}
.middle, .left, .right {
float: left;
}
.middle {
width: 100%; /* 把 left 和 right都挤到了下一行 */
background-color: rgb(61, 48, 240);
}
.left {
width: 200px;
/* 负值表示子元素相对于父元素右内边距，实现元素居左 */
margin-left: -100%;
/* 挪到父元素的左内边距 */
position: relative;
left:-200px;
background-color: rgb(59, 233, 24);
}
.right {
width: 200px;
/* 实现元素居右*/
margin-left: -200px;
/* 挪到父元素的右内边距 */
position: relative;
left:200px;
background-color: rgb(222, 236, 19);
}
- 双飞翼布局
为了中间内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用
margin-left和margin-right。
- 均设置为左浮动，然后设置middle=100%，将 left 和 right 挤到下一行。
- 通过设置 margin-left 为负值，让 left 和 right 回到和 middle 同一行。
- middle部分增加一个内层div，并设置margin。
<div class="outer">
<div class="middle">
<div class="inner">中间栏</div>
</div>
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
</div>
.outer {
background-color: brown;
}
.middle, .left, .right {
float: left;
}
.middle {
width: 100%;
height: 100px;
background-color: rgb(61, 48, 240);
}
.left {
width: 200px;
margin-left: -100%;
background-color: rgb(59, 233, 24);
}
.right {
width: 200px;
margin-left: -200px;
background-color: rgb(222, 236, 19);
}
.inner, .middle { /* 整个背景还是middle */
margin: 0 200px;
}
四、画圆形、三角形
五、响应式布局
我们需要网页适应不同分辨率的设备，能够兼容多个终端，也就是根据分辨率来自动调整页面的展示方式和布局，不用为每一个终端做一个特定的版本。常见的 4 种自适应方案有：
-
百分比布局：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使相关组件的宽和高随着浏览器的变化而变化。
-
媒体查询布局：使用
@media媒体查询，针对不同类型的设备定义不同的样式。 -
通过rem：因为rem只是相对于根元素html的font-size，因此通过rem实现响应式布局，只需要根据视图容器大小、动态改变
font-size即可。 -
通过vw/vh实现：css3新引入的单位，与视图窗口有关。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。 参考文章
