CSS3-小白2（三大特性，盒子模型，浮动）

最新推荐文章于 2024-06-28 09:23:15 发布

Pop–

最新推荐文章于 2024-06-28 09:23:15 发布

阅读量240

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45026839/article/details/108035432

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、CSS 三大特性

css层叠性
css继承性
css优先级
css特殊性（权重）优先级：标签选择器 < 类选择器 < id选择器 < 行内样式还有特别注意一点：继承的权重为 0

二、盒子模型（css重点）

看透网页的本质
盒子模型（Box Model）
盒子边框（border）顺时针的设置顺序
内边距（padding）
外边距 (margin)外边距实现盒子居中
清除元素的默认内边距
外边距合并（合并都是取大的，合并小的）
相邻块元素垂直外边距的合并（一般较少出现）
嵌套块元素垂直外边距的合并（较常见）
content宽度和高度
盒子模型布局稳定性
css盒模型
盒子阴影

三、浮动（float）

普通流（normal flow）
浮动（float）
什么是浮动？
浮动详细内幕特性

四、版心和布局流程

布局流程
一列固定宽度且居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一列固定宽度且居中</title>
		<style>
			* {
				padding: 0;
				margin: 0;	
			}
			.top,
			.banner,
			.main,
			.footer {
				width: 800px;
				font-size: 20px;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 10px;
				border: dashed;
				
			}
			.top {
				height: 100px;
				background-color: pink;
			}
			.banner {
				height: 100px;
				background-color: yellowgreen;
			}
			.main {
			
				height: 400px;
				background-color: blue;	
			}
			.footer {
				height: 200px;
				background-color: red;
			
			}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">main</div>
		<div class="footer">footer</div>
	</body>
</html>

两列左窄右宽型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.top,
			.banner,
			.main,
			.footer {
				width: 960px;
				background-color: lightgray;
				margin: 0 auto;
				margin-bottom: 8px;
				text-align: center;
				
			}
			.top {
				height: 80px;	
			}
			.banner {
				height: 150px;	
			}
			.main {
				height: 300px;
			}
			.left {
				width: 260px;
				height: 300px;
				float: left;
				background-color: purple;
			}
			.right {
				float: right;
				height: 300px;
				width: 692px;	
				background-color: pink;
			}
			.footer {
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>

通栏平均分布型

五、清除浮动

为什么要清除浮动
清除浮动本质
清除浮动的方法
（1）额外标签法（少用）
（2）父级添加 overflow 属性方法（少用）
（3）使用 after 伪元素（百度，淘宝，网易较为常用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>after伪元素清除浮动</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.clearfix:after {
				content: "."; /*内容为小点, 尽量加不要空, 否则旧版本浏览器有空隙*/
				display: block; /*转换为块级元素*/
				height: 0; /*高度为0*/
				clear: both; /*隐藏盒子*/
				visibility: hidden; /*清除浮动*/
			}
			.clearfix {
				*zoom: 1; * 代表ie6,7
			}
			.son1 {
				width: 200px;
				height: 50px;
				background-color: pink;
				float: left;
			}
			.son2 {
				width: 200px;
				height: 50px;
				background-color: blue;
				float: left;
			}
			.box2 {
				width: 500px;
				height: 200px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>

（4）使用 before和after 双伪元素（小米腾讯）在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>before after双伪元素清除浮动</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.clearfix:before,.clearfix:after {
				content: ""; 
				display: table;/* 触发BFC, BFC可以清除浮动*/
			}
			.clearfix:after {
				clear: both; /*隐藏盒子*/
			}
			.clearfix {
				*zoom: 1; * 代表ie6,7
			}
			.son1 {
				width: 200px;
				height: 50px;
				background-color: pink;
				float: left;
			}
			.son2 {
				width: 200px;
				height: 50px;
				background-color: blue;
				float: left;
			}
			.box2 {
				width: 500px;
				height: 200px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>

（5）效果：在这里插入图片描述

Pop–

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-小白2（三大特性，盒子模型，浮动）

一、CSS 三大特性css层叠性css继承性css优先级 css特殊性（权重）优先级：标签选择器 < 类选择器 < id选择器 < 行内样式还有特别注意一点：继承的权重为 0二、盒子模型（css重点）看透网页的本质盒子模型（Box Model）盒子边框（border）顺时针的设置顺序内边距（padding）外边距 (margin)外边距实现盒子居中清除元素的默认内边距外边距合并（合并都是取大的，合并小的）相邻块元素
复制链接

扫一扫