# 常见的布局方法
- table 表格布局
- float 浮动 + margin
- inline-block 布局
- flexbox 布局
# 表格布局
<style>
.left{
background:red;
}
.right{
background:blue;
}
table{
width:800px;
height:200px;
border-collapse: collapse;
}
</style>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
可以使用css的特性来模拟表格布局：
<style>
.table {
height: 200px;
width: 800px;
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
</style>
<div class="table">
<div class="table-row">
<div class="left table-cell">
左
</div>
<div class="right table-cell">
右
</div>
</div>
</div>
# 盒模型
我们一般给元素设置宽高是对里面的内容（content）进行设置宽高；
display: inline-block，对外是inline元素，可以设置宽高。
position: absolute是脱离了文档流的。而relative是没有脱离，他本来的位置还是在的，不会被其他正常文档流元素进行占据。 fixed是根据可视区域的布局，他也是脱离了文档流。absolute是相对于最近父级的absolute或者relative进行定位的。定位为fixed、absolute、relative的元素 可以设置z-index属性。
# flexbox 布局
- 弹性盒子
- 盒子本来就是并列的
- 指定宽度即可
并列布局。如果设置子元素的flex为1，那么就是说所有的子元素的宽度都是一样的，如果其中一个设置为2，那么就说明这个元素是其他元素的二倍。如果想要设置元素固定宽度:flex:none, width:30px这样。下面是简单的一个布局：
<style>
.container{
width:800px;
height:200px;
display: flex;
}
.left{
background: red;
display: flex;
width:200px;
}
.right{
background: blue;
display: flex;
flex:1;
}
</style>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
# float
- 元素浮动
- 脱离文档流
- 但不脱离文本流（会影响其他元素中的文本会围绕这个浮动的元素）
对自身的影响：
- 形成块（BFC）：就是float可以设置宽高
- 位置尽量靠上
- 位置尽量靠左（右）
对兄弟元素的影响
- 上面贴非float元素
- 旁边贴float元素
- 不影响其他块级元素位置
- 影响其他块级元素内部文本
对父级元素的影响
- 从布局上消失
- 高度塌陷，在父级元素使用overflow进行防止。
清除浮动的方式：使用伪元素after，设置clear以及display跟visibility、height。
<style>
.container{
background:red;
width:400px;
margin:20px;
}
.p1{
background:green;
float:left;
width:200px;
height:50px;
}
.container2::after{
content: 'aaa';
clear:both;
display: block;
visibility: hidden;
height:0;
}
</style>
<div class="container container2">
<span>写几个字</span>
<span class="p1">
float
</span>
<span class="p1">
float
</span>
</div>
<div class="container" style="height:200px;background:blue;">
</div>
float实现两栏布局：
<style>
.container{
width:800px;
height:200px;
}
.left{
float: left;
height: 100%;
width: 200px;
}
.right {
background: blue;
margin-left: 200px;
height: 100%;
}
</style>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
三栏布局：注意中间的元素下载最下面
<style>
.container{
width:800px;
height:200px;
}
.left{
background:red;
float:left;
height:100%;
width:200px;
/* position: absolute; 也可以指定位置，高度需要显示指定百分比无效*/
/* height:200px; */
}
.right{
background:blue;
float:right;
width:200px;
height:100%;
}
.middle{
margin-left:200px;
margin-right:200px;
}
</style>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
<div class="middle">
中间
</div>
</div>
inline-block布局：
- 像文本一样排block元素
- 没有清除浮动等问题
- 需要处理间隙
处理间隙，出现间隙就相当于两个文字之间是有空隙的。处理这个问题，只需要设置父元素的font-size为0，然后在各个子元素重新设置font-size
<style>
.container{
width:800px;
height:200px;
font-size:0;
}
.left{
font-size:14px;
background:red;
display: inline-block;
width:200px;
height:200px;
}
.right{
font-size:14px;
background:blue;
display: inline-block;
width:600px;
height:200px;
}
</style>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
另外一种处理方式是：空隙产生的原因就是写html的时候的回车引起的
<div class="container">
<div class="left">
左
</div><div class="right">
右
</div>
</div>
<!-- 或者加一个注释 -->
<div class="container">
<div class="left">
左
</div><!-- -->
<div class="right">
右
</div>
</div>
# 响应式设计和布局
- 在不同设备上正常使用
- 一般主要处理屏幕大小问题
主要方法：
- 隐藏 + 折行 + 自适应空间
- rem、viewport、media query
下面的案例是通过判断屏幕的宽度进行隐藏元素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{
margin:0 auto;
max-width:800px;
display: flex;
border:1px solid black;
}
.left{
display: flex;
width: 200px;
background:red;
margin:5px;
}
/* max-width 宽度小于640px的时候起作用 */
@media (max-width: 640px){
.left{
display: none;
}
}
.right{
display: flex;
flex: 1;
background:blue;
margin:5px;
}
</style>
<div class="container">
<div class="left">
这里是一些不重要的内容，比如友情链接、广告
</div>
<div class="right">
这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。
</div>
</div>
可以content="width=320"这种固定使用width的值，来达到等比例缩放的效果。 使用rem进行自适应，他根据最外层的字体大小，比如下面代码html为20px，那么就是代表 1个rem为20个像素。像素是固定大小的。写@media媒体查询的时候，范围大的放在上面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
font-size: 20px;
}
.container {
margin: 0 auto;
max-width: 800px;
border: 1px solid black;
}
.intro {
display: inline-block;
width: 9rem;
height: 9rem;
line-height: 9rem;
text-align: center;
border-radius: 4.5rem;
border: 1px solid red;
margin: .3rem;
}
/* 在对应的屏幕宽度设置字体大小 */
@media (max-width: 375px) {
html {
font-size: 24px;
}
}
@media (max-width: 320px) {
html {
font-size: 20px;
}
}
/* 如果是移动端设备的时候 每行只有一个就展示为block */
@media (max-width: 640px) {
.intro {
margin: .3rem auto;
display: block;
}
}
</style>
<div class="container">
<div class="intro">
介绍1
</div>
<div class="intro">
介绍2
</div>
<div class="intro">
介绍3
</div>
<div class="intro">
介绍4
</div>
</div>
# CSS 面试真题
# 实现两栏（三栏）布局方法
- 表格布局
- float + margin 布局
- inline-block 布局
- flexbox 布局
# position的absolute、flex有什么不同
- 前者相对最近的absolute或者relativ
- 后者相对于屏幕（viewport）
# display：inline-block的间隙
- 原因：字符间距
- 解决：消灭字符或者消灭间距
# 如何清除浮动
- 让盒子负责自己的布局。overflow：hidden（auto）
- :: after{clear: both}
# 如何适配移动端页面
- viewport
- rem/viewport/media query
- 设计上：隐藏 折行 自适应
阅读量：