CSS的工作方式是浏览器逐行下载样式表,应用其可识别的属性,忽略其不支持的属性。本文将讲解CSS流式布局,分别从html结构、固定布局样式、将固定布局改为流式布局三个方面来阐述,感兴趣的小伙伴可以继续看下去。
1、html结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="fluied.css">
<title>流式布局</title>
</head>
<body>
<div id="wrapper" class="clearfix">
<!-- 头部和导航 -->
<div id="header">
<div id="navigation">
<ul>
<li>
<a href="#">
首页
</a>
</li>
<li>
<a href="#">
导航一
</a>
</li>
</ul>
</div>
</div>
<!-- 侧边栏 -->
<div id="sidebar">
<p>这里是侧边栏</p>
</div>
<!-- 内容部分 -->
<div id="content">
<p>这里是内容</p>
</div>
<!-- 页脚部分 -->
<div id="footer">
<p>这里是页脚</p>
</div>
</div>
</body>
</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流式布局的讲解,大家都弄清楚了吗?
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
HTML代码怎么用?HTML基础教程
在弄清“HTML代码怎么用”之前,我们要首先明白HTML是用来描述网页的语言,它不是一种编程语言,而是一种 使用标记标签来描述网页的标记语言。本篇基础教程主要内容包括:HTML常用代码、网页基本框架和网页组成要素。
2197
2019-08-16 11:46:05
Redis从入门到精通详解
众所周知,Redis是一款开源的数据库,它使用ANSI C语言编写、遵守BSD协议、支持网络,并且可基于内存也可持久化的日志型、Key-Value高性能。本文就来聊聊Redis,带大家从入门到精通。以下是Redis史上最全详解,一起来看看吧!
1622
2019-11-16 15:12:08
精通HTML5+CSS3需要学什么?
主要学习vscode编辑器基本使用、HTML5新增标签、CSS3新增选择器及案例、2D转换及相关案例实现、3D转换和旋转木马案例等知识点。需要掌握HTML5+CSS3新特性,使用HTML5+CSS3实现炫酷动画效果,熟悉VSCode编辑器基本使用。
1121
2020-01-03 18:37:47
前端学习中的重点难点总结
在互联网技术岗位中,前端一直被定义为入门简单,发展潜力巨大的技术方向。尤其对于新接触编程的同学们而言,非常容易理解并掌握HTML和CSS的基本知识,但是作为一门技术岗位,前端开发依旧具有一定的挑战性。因此我们一定要注意前端学习中的重点难点知识,在学习的过程中尽量掌握其要点,保障在实际工作中减少踩雷的风险。
876
2020-08-07 10:27:04
北京Web前端工资一般多少?要求高吗?
前端程序员薪酬区间: 3K~50K,大多数人拿10K~15K 工资的占比最多,达28.8%,平均工资17.2K,数据统计依赖于各平台发布的公开薪酬,此数据仅供参考。
688
2020-09-21 15:27:49
jQuery瀑布流插件封装
免费 基础 757
零基础玩转微信小程序
免费 基础 2546
Javascript实现页面动态效果
免费 进阶 2761
新特性React16+Hooks+Mobx开发微信授权点餐系统
¥399 进阶 305
零基础入门前端开发公开课
免费 基础 1505
推荐课程
热门文章
- 区块链应用未来的几个方向有哪些?
- Python爬虫需要学多久才能掌握?
- 30岁能进入人工智能行业吗?晚不晚?
- 黑马Java架构师课程知识点有哪些?
- 选择Java培训班应该咨询什么内容?
- jQuery框架安装及jQuery特点介绍
- 初学编程遇到程序报错问题怎么解决?
- 5W2H数据分析方法及思维是什么?
- UI设计师要懂什么技术?掌握哪些知识?
- 哪里可以培训少儿编程老师?学什么? 查看更多
扫描二维码,了解更多信息
