css布局的⼏种⽅式
css 布局的⼏种⽅式
⼀、总结
⼀句话总结：
css布局左边固定右边自适应> 布局⽐较常⽤的是浮动布局和弹性布局和层布局（定位），还有另⼀个维度的响应式的布局
1、响应式布局的⼏种⽅式？
> 1、meta 标签：meta name="viewport" content="width=device-width, initial-scale=1"
> 2、rem：rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽⾼，然后配合 media query 就可以实现⾃适应。
> 3、media query（媒体查询）：@media screen and (max-width: 360px)
⼆、css 布局的⼏种⽅式
CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局⽅式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是⼯作还是⾯试都是⾮常重要的知识。
1 table 布局（现在⽤得少）
table 布局是最简单的布局⽅式了，下⾯我们来看⼀个简单的例⼦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
.container{
height:200px;
width: 200px;
}
.left{
background-color: red
}
.right{
background-color: green
}
</style>
<body>
<table class=container>
<tbody>
<tr>
<td class=left> 左 </td>
<td class=right> 右 </td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下
table 的特性决定了它⾮常适合⽤来做布局，并且表格中的内容可以⾃动居中，这是之前⽤的特别多的⼀种布局⽅式
⽽且也加⼊了display：table;dispaly:table-cell来⽀持 teble 布局。⽤法如下
<style>
.table{
display: table
}
.left{
display: table-cell;
}
.right{
display: table-cell
}
</style>
<div class=table>
<div class=left></div>
<div class=right></div>
</div>
但是它也有⾃⾝的局限性，⽐如 table ⽐其它 html 标记占更多的字节（造成下载时间延迟，占⽤服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页⾯的⽣成速度，让⽤户等待更久的时间)，但是某些情况下，当采⽤其他⽅式不能很好的达到⾃⼰的效果时，采⽤ table 布局能适应当前场景。
2 flex 布局
2.1 盒模型
在介绍 flex 布局之前，我们先了解⼀下盒模型的概念，这个是 css 最基础的概念，⾸先，我们引⽤⼀张图来解释
这是百度百科⾥⾯盒模型的⼀张图。⾸先最中间的是 content 区域，即我们常说的内容区。我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域，这部分指的是内容区到边框的区域，即我们常说的内边距。然后就是 border 区，border 区本⾝也是占据空间的。边框外⾯是 margin 区，这部分指的是当前元素与其他元素的距离，即常说的外边距。
⾸先要明⽩我们平常说的宽度和⾼度指的是内容区的宽度和⾼度。
然后计算⼀个盒⼦占⽤的空间是 content + padding + border + margin
2.2 display / poistion
这⾥还要介绍两个属性，display 和 poistion
display 有如下⼏个值
block（元素表现为块级元素，有固定宽⾼，独占⼀⾏）
inline（元素表现为⾏内元素，不能设置宽⾼）
inline-block （对外表现为⾏内元素，对内表现为块级元素）3
position 有如下⼏个值
static（默认情况，存在⽂档流当中）
relative（根据元素本⾝原来所应该处的位置偏移，不会改变布局的计算）
absolute（绝对定位，脱离⽂档流，不会对别的元素造成影响，相对的是⽗级最近的 relative 或者 absolute 定位元素）
fixed（绝对定位，脱离⽂档流，相对于的是屏幕，就是那些浮动的⼴告那样，怎么拉都固定在同⼀个位置，⽽ absolute 元素离开屏幕就看不见了）
position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。
2.3 flexbox 布局
flexbox 布局即弹性盒⼦布局，它的特点是盒⼦本来就是并列的，只需要指定宽度，来看⼀个经典的三栏布局的例⼦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
.container{
height:200px;
width: 200px;
display: flex
}
.left{
background-color: red;
flex: 1;
}
.middle{
background-color: yellow;
flex: 1;
}
.right{
background-color: green;
flex: 1;
}
</style>
<body>
<div class=container>
<div class=left></div>
<div class=middle></div>
<div class=right></div>
</div>
</body>
</html>
效果如下
有时我们可能需要两边定宽，中间⾃适应，那么可以这样写
.left{
background-color: red;
width: 20px;
}
.middle{
background-color: yellow;
flex: 1;
}
.right{
background-color: green;
width: 20px;
}
效果如下
如果想深⼊了解可以看阮⼀峰⽼师的⽂章
但是 flexbox 布局⽅式浏览器的⽀持不是太好，有⼀些兼容性的问题，但是是未来布局的趋势。
3 float 布局
float 布局应该是⽬前各⼤⽹站⽤的最多的⼀种布局⽅式了，但是也特别复杂，这⾥详细讲⼀下
⾸先，什么是浮动？
浮动元素是脱离⽂档流的，但不脱离⽂本流，这是什么意思呢，⽤过 word 的应该知道有⼀种图⽚环绕的⽅式是⽂字环绕吧，就是这种效果。
那么它有什么特点呢
对⾃⾝的影响
float 元素可以形成块，如 span 元素。可以让⾏内元素也拥有宽和⾼，因为块级元素具有宽⾼
浮动元素的位置尽量靠上
尽量靠左（float:left）或右（float:right），如果那⼀⾏满⾜不了浮动元素的宽度要求，则元素会往下掉对兄弟元素的影响
不影响其他块级元素的位置
影响其他块级元素的⽂本
上⾯贴⾮ float 元素
旁边贴 float 元素或者边框
对⽗级元素的影响
从布局上 “消失”
⾼度塌陷
3.1 ⾼度塌陷
什么是⾼度塌陷，举个例⼦吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 200px;
background-color:red;
}
.left{
background-color: yellow;
float: left;
height: 50px;
width:50px;
}
.right{
background-color: yellow;
float: right;
height: 50px;
width:50px;
}
</style>
<body>
<div class=container>
<span class=left>float</span>
<span>我是字</span>
<span class=right>float</span>
</div>
<div class="container" >
</div>
</body>
</html>
效果如下
从图中可以看出，两个 float 元素虽然包含在第⼀个 container 中，但是却超出了第⼀个 container 的范围，在⽂档流中，⽗元素的⾼度默认是被⼦元素撑开的，也就是⼦元素多⾼，⽗元素就多⾼。
但是当为⼦元素设置浮动以后，⼦元素会完全脱离⽂档流，此时将会导致⼦元素⽆法撑起⽗元素的⾼度，导致⽗元素的⾼度塌陷。
解决办法有下⾯⼏种
⽗元素设置 overflow: auto 或者 overflow: hidden
效果如下
给⽗元素加⼀个 after 伪类
.container::after{
content:'';
clear:both;
display:block;
visibility:hidden;
height:0;
}
效果如下
这也是⽬前各⼤⽹站⽐较主流的清除浮动的⽅式，还有⼀些其他⽅式这⾥就不详细讲了，毕竟这是⼀篇讲布局的⽂章。
3.2 两栏布局
⾸先我们要明⽩为什么可以⽤ float 实现布局。其实上⾯的例⼦我们⼤概就可以看出来了，黄红黄这不就是⼀个标准的三栏布局吗。其实并没有，我们看看下⾯的例⼦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
height: 200px;
}
.left{
background-color: yellow;
float: left;
height: 100%;
width:100px;
}
.right{
background-color: red;
margin-left: 100px;
height:100%;
}
.container::after{
content: '';
display: block;
visibility: hidden;
clear: both
}
</style>
<body>
<div class=container>
<div class=left></div>
<div class=right></div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。