CSS如何实现流式布局
小编给大家分享一下CSS如何实现流式布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
1、html结构
这里是内容
2、固定布局样式
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
border: 1px solid red;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
}
#navgation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
width: 940px;
}
#navigation ul li {
display: inline-block;
}
#navigation ul li a {
text-decoration: none;
color: black;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 698px;
border-bottom: 1px solid red;
height: 100px;
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 10px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 220px;
border-bottom: 1px solid red;
height: 100px;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 940px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
width: 0;
height: 0;
visibility: hidden;
font-size: 0;
}
3、将固定布局改为流式布局
将固定像素宽度转换为对应的百分比宽度公式：
目标元素宽度 ÷ 上下文元素 = 百分比宽度
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/*
* 初始状态下、1em = 16px;
* 设置了根元素的字体大小为62.5%，
*这时，1em = 10px
*/
font-size: 62.5%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%;
border: 1px solid red;
}
#header {
margin-right: 1.04166667%;
margin-left: 1.04166667%;
width: 97.9166667%;
border-bottom: 1px solid red;
font-size: 4.8em;
}
#navgation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -1.04166667%;
padding-right: 1.04166667%;
padding-left: 1.04166667%;
width: 100%;
}
#navigation ul li {
display: inline-block;
}
#navigation ul li a {
text-decoration: none;
color: black;
}
#content {
margin-top: 58px;
margin-right: 1.04166667%;
float: right;
width: 72.7083333%;
border-bottom: 1px solid red;
height: 100px;
font-size: 2em;
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 1.04166667%;
margin-right: 1.04166667%;
margin-left: 1.04166667%;
float: left;
width: 22.7083333%;
border-bottom: 1px solid red;
height: 100px;
font-size: 2em;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 1.04166667%;
margin-left: 1.04166667%;
clear: both;
width: 97.9166667%;
height: 100px;
font-size: 1.2em;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
width: 0;
height: 0;
visibility: hidden;
font-size: 0;
}
以上是"CSS如何实现流式布局"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
