web学习---CSS学习---笔记(三)

于 2022-05-09 09:29:57 发布
阅读量278 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web 文章标签： css 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IOSSHAN/article/details/124307273
本文详细介绍了CSS浮动布局的原理和应用场景，包括标准流、浮动以及定位。通过两个小练习展示了如何利用浮动实现多列布局。同时，讨论了浮动布局可能导致的父级高度塌陷问题，并提供了四种清除浮动的方法：额外标签法、overflow属性、after伪元素和双伪元素法。最后，强调了布局开发中的一些最佳实践和注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS浮动

传统网页布局的三种方式

网页布局的本质：用CSS来摆放盒子。把盒子摆放到相应位置

  • 普通流（标准流）
  • 浮动
  • 定位

1.标准流

之前学习的，块级元素、行内元素，就是标准流

2. 浮动

浮动可以改变元素标签默认的排序方式
浮动最典型的应用：可以让多个块级元素一行内排列显示

  • 多个块级元素纵向排列用标准流
  • 多个块级元素横向排列用浮动

浮动的元素，最重要的特性：

  1. 脱离标准普通流的控制，移动到指定位置（俗称脱标）
  2. 浮动的盒子不再保留原先的位置

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

  • 如果 块级盒子 没有设置宽度，默认宽度和父级一样宽，但添加浮动后，它的大小根据内容来决定
  • 浮动的盒子中间没有缝隙
  • 行内元素同理

一般常用的策略是：
先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

小练习1

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" lang="en">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.box {
				width: 840px;
				height: 200px;
				background-color: lightgray;
				margin: 100px auto;
			}
			
			.first, .second, .third, .fourth {
				float: left;//浮动
				width: 200px;
				height: 180px;
				font-size: 30px;
				color: white;
				text-align: center;
				line-height: 180px;
				margin: 10px 5px;
			}
			
			.first {
				
				background-color: pink;
				
			}
			
			.second {
				background-color: purple;
			}
			
			.third {
				background-color: green;
			}
			
			.fourth {
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="first">div</div>
			<div class="second">div</div>
			<div class="third">div</div>
			<div class="fourth">div</div>
		</div>
		
	</body>
</html>

小练习2

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" lang="en">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			li {
				list-style: none;
			}
			
			.box {
				width: 890px;
				height: 440px;
				background-color: lightgray;
				margin: 100px auto;
			}
			
			.box .left {
				float: left;
				width: 160px;
				height: 440px;
				background-color: red;
			}
			
			.box .right {
				float: left;
				width: 720px;
				height: 440px;
			}
			.box .right li {
				float: left;
				width: 170px;
				height: 215px;
				background-color: green;
			}
			
			.box .right .top {
				margin:0px 0px 5px 10px
			}
			
			.box .right .bottom {
				margin:5px 0px 0px 10px
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<ul class="right">
				<li class="top"></li>
				<li class="top"></li>
				<li class="top"></li>
				<li class="top"></li>
				<li class="bottom"></li>
				<li class="bottom"></li>
				<li class="bottom"></li>
				<li class="bottom"></li>
			</ul>
		</div>
		
	</body>
</html>

浮动布局的注意点

  1. 浮动和标准流的父盒子搭配
  2. 一个元素浮动了，理论上其余的兄弟元素也要浮动
  3. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

理想状态下，让子盒子撑开父盒子，根据子盒子的高度，父盒子的高度动态调整

清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
因此，需要清除浮动

清除浮动的本质是：清除浮动元素造成的影响
清除浮动后，父级盒子就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动语法

语法：选择器 {clear: 属性值;}

left：清除左侧浮动的影响
right：清除右侧浮动的影响
both：清除左右两侧浮动的影响（最常用）

清除浮动方法

  1. 额外标签法，也称为隔墙法（不常用）
  2. 父级添加overflow属性
  3. 父级添加after伪标签
  4. 父级添加双伪元素
1. 额外标签法

在浮动元素末尾添加一个空的标签，然后在标签里面写上清除语法

.clear {
	clear: both;
}
			
<div class="fourth">div</div>//最后一个浮动元素
<div class="clear"></div>//空标签，起到隔离的作用

优点：通俗易懂
缺点：增加了许多无意义的标签

新增加的空标签，必须是块级元素

2. 父级添加overflow

在父级控件上添加：overflow: hide;或auto、scroll

3. 父级添加after伪标签

后面堵上，是额外标签法的升级版

			.clearfix:after {
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			
			.clearfix {/*IE6、7专有*/
				*zoom: 1;
			}
			
			<div class="box clearfix">
4. 父级添加双伪元素

前后都堵上

			.clearfix:before,
			.clearfix:after{
				content: "";
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {/*IE6、7专有*/
				*zoom: 1;
			}
<div class="box clearfix">

学成在线记录

在书写代码的时候，建议遵循以下顺序：

  1. 布局定位属性：display/position/float/clear
  2. 自身属性：width/height/margin/padding/border/background
  3. 文本属性：color/font/text-
  4. 其他属性：content/cursor/…

页面布局整体思路

在写代码的时候，先整理下布局思路，一般有：

  1. 必须确定页面的版心（可视区），可测量得到
  2. 分析页面中的行模块，以及每个行模块中的列模块。（其实就是页面布局的第一准则）
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第二准则）
  4. 制作HTML结构。遵循：现有结构，后有样式的原则。结构永远最重要
  5. 所以，必须先理清布局结构，再写代码
  • 在时机开发中，我们不会直接用链接a，而是用li包含链接a（li+a）的做法
  • 浮动的盒子不会有外边距合并的问题

学成在线练习

在这里插入图片描述

代码：

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学成在线首页</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<!-- 头部 -->
		<div class="header w">
			
			<!-- logo -->
			<div class="logo">
				<img src="img/logo.png" alt="">
			</div>
			
			<!-- 导航 -->
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">课程</a></li>
					<li><a href="#">职业规划</a></li>
				</ul>
			</div>
			
			<!-- 搜索框 -->
			<div class="search">
				<input type="text" value="" placeholder="输入关键词">
				<button></button>
			</div>
			
			<!-- 用户 -->
			<div class="user">
				<img src="img/user.png" alt="">
				shan
			</div>
		</div>
		
		<!-- banner -->
		<div class="banner">
			<div class="w">
				
				<div class="subnav">
					<ul>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
						<li>
							<a href="#">前端开发  <span>></span></a>
						</li>
					</ul>
				</div>
				
				<div class="course">
					<div class="top">
						我的课程表
					</div>
					
					<div class="middle">
						<ul>
							<li>
								<h4>继续学习 程序语言设计</h4>
								<span>正在学习-使用对象</span>
							</li>
							<li>
								<h4>继续学习 程序语言设计</h4>
								<span>正在学习-使用对象</span>
							</li>
							<li>
								<h4>继续学习 程序语言设计</h4>
								<span>正在学习-使用对象</span>
							</li>
						</ul>
					</div>
					
					<div class="allCourse">
						<button>全部课程</button>
					</div>
				</div>
			</div>
			
		</div>
		
		<!-- 精品推荐 -->
		<div class="jpbanner w">
			<div class="left">精品推荐</div>
			
			<div class="right">修改兴趣</div>
			
			<div class="middle">
				<ul>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">jQuery</a></li>
				</ul>
			</div>
		</div>
		
		<div class="jp w">
			<div class="top">
				<span class="left">精品推荐</span>
				<span class="right">查看全部</span>
			</div>
			
			<div class="content">
				<ul>
					<li> 
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
					<li>
						<a href="#">
							<img src="img/pic.png" alt="">
							<h5>Think PHP5.0 博客系统实战项目演练</h4>
							
							<span>高级</span>
							·1125人在学习
						</a> 
					</li>
			
				</ul>
			</div>
		</div>
		
		<!-- 底部 -->
		<div class="footer">
			<div class="w">
				<div class="left">
					<img src="img/logo.png" alt="">
					<br />
					<span>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
					© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</span>
					<br />
					<button> <a>下载APP</a> </button>
				</div>
				
				<div class="right">
					<div class="first">
						<h3>关于学成网</h3>
						<ul>
							<li> <a href="#">关于</a> </li>
							<li> <a href="#">管理团队</a> </li>
							<li> <a href="#">工作机会</a> </li>
							<li> <a href="#">客户服务</a> </li>
							<li> <a href="#">帮助</a> </li>
						</ul>
					</div>
					
					<div class="second">
						<h3>关于学成网</h3>
						<ul>
							<li> <a href="#">关于</a> </li>
							<li> <a href="#">管理团队</a> </li>
							<li> <a href="#">工作机会</a> </li>
							<li> <a href="#">客户服务</a> </li>
							<li> <a href="#">帮助</a> </li>
						</ul>
					</div>
					
					<div class="third">
						<h3>关于学成网</h3>
						<ul>
							<li> <a href="#">关于</a> </li>
							<li> <a href="#">管理团队</a> </li>
							<li> <a href="#">工作机会</a> </li>
							<li> <a href="#">客户服务</a> </li>
							<li> <a href="#">帮助</a> </li>
						</ul>
					</div>
					
					
					
				</div>
			</div>
		</div>
	</body>
</html>
CSS
* {
	margin: 0;
	padding: 0;
}

.w {
	width: 1200px;
	margin: 0 auto;
}

body {
	background-color: #f3f5f7;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

/* 头部 */
.header{
	height: 42px;
	margin: 30px auto;
}

.logo {
	float: left;
	width: 198px;
	height: 42px;
}

.nav {
	float: left;
	height: 43px;
	margin-left: 60px;
	
}

.nav ul li {
	float: left;
	margin: 0 15px;
}

.nav ul li a {
	display: block;
	height: 42px;
	padding: 0 10px;
	
	line-height: 42px;
	font-size: 18px;
	color: #050505;
	text-align: center;
}

.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
	color: #00A4FF;
}

.search{
	float: left;
	width: 412px;
	height: 42px;
	margin-left: 70px;
}

.search input {
	float: left;
	width: 345px;
	height: 40px;
	border: 1px solid #00A4FF;
	border-right: none;
	
	font-size: 14px;
	padding-left: 15px;
}

.search button {
	float: left;
	width: 50px;
	height: 42px;
	border: none;
	background: url(../img/btn.png);
}

.user {
	float: right;
	line-height: 42px;
	margin-right: 30px;
	
	font-size: 14px;
	color: #666666;
}

.user img {
	vertical-align: middle;
}

/* banner */
.banner {
	height: 420px;
	background-color: #1c036c;
}

.banner .w {
	height: 420px;
	background: url(../img/banner2_20190819_210028.png) no-repeat ;
}

.subnav {
	float: left;
	height: 420px;
	width: 190px;
	background-color: rgba(0, 0, 0, 0.3);
}

.subnav ul {
	margin: 0 20px;
}

.subnav ul li{
	height: 45px;
}

.subnav ul li a{
	font-size: 14px;
	color: white;
	line-height: 45px;
}

.subnav ul li a:hover{
	color: #00A4FF;
}

.subnav ul li a span{
	float: right;
}

.course {
	float: right;
	width: 230px;
	height: 325px;
	background-color: white;
	margin-top: 50px;
}

.course .top{
	width: 230px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: white;
	background-color: #00A4FF;
	font-size: 18px;
}

.course .middle {
	padding: 0 20px;
}

.course .middle ul li{
	padding: 15px 0;
	border-bottom: 1px solid lightgray;
}

.course .middle ul li h4{
	font-size: 15px;
}

.course .middle ul li span{
	font-size: 10px;
	color: gray;
}

.course .allCourse button{
	margin: 5px 20px 0px 20px;
	width: 190px;
	height: 40px;
	border: 1px solid #00A4FF;
	background-color: white;
	color: #00A4FF;
	font-size: 15px;
	border-radius: 5px;
}


.jpbanner {
	margin-top: 20px;
	background-color: white;
	height: 60px;
	line-height: 60px;
	box-shadow: 2px 2px 2px #D3D3D3;
}

.jpbanner .left {
	float: left;
	margin: 0 30px;
	color: #00A4FF;
	font-size: 18px;
}

.jpbanner .right {
	float: right;
	margin-right: 30px;
	color: #00A4FF;
	font-size: 14px;
}

.jpbanner .middle ul li{
	float: left;
}

.jpbanner .middle ul li a{
	border-left: 1px solid #808080;
	color: black; 
	padding: 0 30px;
}

.jp .top {
	margin: 30px 0 20px 0;
	overflow: hidden;
}

.jp .top .left {
	float: left;
	font-size: 18px;
}

.jp .top .right {
	float: right;
	font-size: 12px;
	color: gray;
	margin-right: 30px;
}

.jp .content {
	float: left;
	display: inline-block;
	
	width: 1300px;
}

.jp .content ul li {
	float: left;
	width: 227px;
	height: 270px;
	margin-right: 15px;
	margin-bottom: 15px;
	
	background-color: white;
}

.jp .content a {
	color: #000000;
	font-size: 12px;
}

.jp .content img{
	width: 100%;
}

.jp .content h5{
	margin: 20px 20px;
	color: black;
	font-size: 14px;
}

.jp .content span{
	font-size: 12px;
	color: orange;
	margin-left: 20px;
}

.footer {
	float: left;
	background-color: white;
	width: 100%;
	height: 300px;
}

.footer .w .left {
	float: left;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 12px;
	height: 100%;
}

.footer .w .left span{
	float: left;
	margin-top: 30px;
	margin-bottom: 30px;
}

.footer .w .left button{
	float: left;
	display: inline-block;
	
	width: 120px;
	height: 35px;
	background-color: white;
	color: #00A4FF;
	border: 1px solid #00A4FF;
}

.footer .right {
	float: right;
}

.footer .right .first {
	float: left;
	margin-left: 100px;
	margin-top: 30px;
}

.footer .right .second{
	float: left;
	margin-left: 100px;
	margin-top: 30px;
}

.footer .right .third{
	float: left;
	margin-left: 100px;
	margin-top: 30px;
}

.footer .right ul a{
	color: black;
	font-size: 13px;
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值