学习并记录基于float属性的常用DIV+CSS布局

之前页面布局主要学的是基于layui的栅格布局及后台布局,基于html本身的布局了解不多,目前网上介绍较多的是基于display + position + float的布局、flex布局等(参考文献2更为详细地介绍了各类网页布局,有兴趣的可以了解),本文主要学习并记录参考文献1中基于display + position + float的网页布局,由于主要用到float属性,因此文章题目就写成了基于float属性的常用DIV+CSS布局。
  主要涉及的CSS知识点如下:
  1)float属性:指定页面元素(盒子)是否在父元素中浮动,默认值为none,可取值为none、left、right、inherit,取值为inherit时从父元素继承 float 属性值,取值为left时元素向左浮动直至碰到另一浮动元素或父元素的边框,取值为right时类似left,只是变成了向右浮动。float属性只能控制水平方向浮动,无法控制竖直方向浮动;
  2)margin属性:设置元素的边界(外边距),值可以为数值或百分比,也可以为Autofac,此时由浏览器计算边界值;可以设置1到4个值,为1个值时设置的是上下左右四个边界值,为2个值时设置的是上下、左右边界值,为3个值时设置的是上、左右、下边界值,为4个值时设置的是上、右、下、左边界值;
  position属性:设置元素的定位方式,可选值为static、relative、absolute、fixed等(详见参考文献3),本文中主要用到relative,之前一直以为relative的定位是相对父元素原点,学习参考文献1过程中才发现是相对于元素的正常位置进行移动。
  最后是常用布局的示例代码及页面效果,主要参照自参考文献1,也百度了一些文章对照测试:

单列居中对齐

可以设置margin的左右边界值为auto自动居中,也可以通过position为relative,然后设置left和margin-left值达到居中效果,left设置当前元素的左侧位置为父元素宽度的一半,然后margin-left设置将当前元素向左侧移动元素宽度的一半。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            body{
                background-color: lightgoldenrodyellow;
            }
			.middle{
                width: 60%;
                height: 200px;
                background-color: lightblue;
                 margin: 0px auto;   
            }
		</style>
	</head>
	<body>
		<div class="middle">
			单列居中对齐
		</div>
	</body>
</html>
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            body{
                background-color: lightgoldenrodyellow;
            }
			.middle{
                width: 400px;
                left: 50%;
                margin-left: -200px;
                height: 200px;
                background-color: lightblue;           
                position: relative;
            }
		</style>
	</head>
	<body>
		<div class="middle">
			单列居中对齐
		</div>
	</body>
</html>
两列并排
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            body{
                background-color: lightgoldenrodyellow;
            }
			.left{
                width: 200px;
                height: 200px;
                float: left;   
                background-color: lightblue;             
            }
            .right{
                height: 200px;
                background-color: lightpink;
            }            
		</style>
	</head>
	<body>
		<div class="left">
			左列宽度固定
		</div>
        <div class="right">
			右列宽度自动调整
		</div>
	</body>
</html>
三列并排
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            *{
                margin: 0px;
                border: 0px;
                padding: 0px;
            }
            body{
                background-color: lightgoldenrodyellow;
            }
			.left{
                width: 200px;
                height: 200px;
                position:absolute;   
                top: 0px;
                left: 0px;
                background-color: lightblue;             
            }
            .middle{                
                height: 200px;
                margin: 0px 200px 0px 200px;
                background-color:lightgreen;             
            }
            .right{
                width: 200px;
                height: 200px;
                position:absolute;   
                top: 0px;
                right: 0px;
                background-color: lightpink;
            }            
		</style>
	</head>
	<body>
		<div class="left">
			左列宽度固定
		</div>
        <div class="middle">
			中间宽度自动调整
		</div>
        <div class="right">
			右列宽度固定
		</div>
	</body>
</html>
带标题、页脚,中间三列的布局
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            *{
                margin: 0px;
                border: 0px;
                padding: 0px;
                width: 100%;
				height: 100%;                
            }            
            .whole{
                height: 95%;
            }
            .top{
                background-color:lightgray;
                height: 10%;
                width: 100%;
            }
            .main{
                height: 80%;
            }
			.left{
                width: 20%;
                float: left;
                background-color: lightblue;             
            }
            .middle{  
                width: 60%;        
                float: left;      
                background-color:lightgreen;             
            }
            .right{
                background-color: lightpink;
            }       
            .footer{
                background-color: lightcoral;
                height: 10%;
                width: 100%;
            }     
		</style>
	</head>
	<body>
        <div class="whole">
			<div class="top">顶部标题栏</div>
			<div class="main">
				<div class="left">左列内容</div>
				<div class="middle">中间内容</div>
				<div class="right">右列内容</div>
			</div>
			<div class="footer">页脚信息</div>
		</div>
	</body>
</html>

参考文献:

1\]《DIV+CSS3网页样式与布局全程解密》 \[2\]https://developer.mozilla.org/zh-CN/docs/Web/CSS/display \[3\]https://www.runoob.com/cssref/pr-class-position.html

相关推荐
卷Java8 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
proud12129 小时前
开源的 CSS 动画库
前端·css·开源
Filotimo_11 小时前
2.CSS3.(1).html
前端·css
华仔啊14 小时前
Vue+CSS 做出的LED时钟太酷了!还能倒计时,代码全开源
前端·css·vue.js
吃饺子不吃馅16 小时前
AntV X6 核心插件帮你飞速创建画布
前端·css·svg
爱吃甜品的糯米团子16 小时前
CSS图片背景属性
前端·css
Aoda17 小时前
浏览器字体设置引发的Bug:从一次调查到前端字体策略的深度思考
前端·css
前端Hardy18 小时前
告别抽象!可视化动画带你学习算法——选择排序
前端·javascript·css
我的写法有点潮20 小时前
简单轻便的四个CSS动画库
前端·css·vue.js
今禾20 小时前
深入解析CSS Grid布局:从入门到精通
前端·css·面试