CSS学习——03

balld

已于 2024-04-15 22:26:42 修改

阅读量989

点赞数 9

分类专栏：前段文章标签： css 学习前端

于 2024-04-15 22:25:03 首次发布

本文链接：https://blog.csdn.net/gyl_java/article/details/137090526

版权

前段专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS学习

CSS盒子模型
浮动
定位
元素的显示与隐藏：display、visibility、overflow

CSS盒子模型

盒子模型： 就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距和实际内容

盒子模型–边框（border）

元素	作用	常用属性	备注
border-width	定义边框粗细	例：5px	单位是px
border-style	边框的样式	none（无边框） hidden（隐藏边框） solid（实线边框） dotted（点线边框） dashed（虚线边框）	浏览器版本可能会影响边框样式
border-color	边框的颜色	red #FF0000 rgb(255,0,0)	预定义的颜色值：red 十六进制：#FF0000 RGB代码：rgb(255,0,0)

复合写法 border: 1px solid red; （无顺序要求）

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld1 {
				height: 100px;
				width: 200px;
				border-width: 5px; /* 边框粗细*/
				border-style: solid; /* b边框样式*/
				border-color: red; /* 边框颜色*/
			}
			
			.balld2 {
				height: 100px;
				width: 200px;
				border: 1px solid black; /* 复合写法*/
			}
			
			.balld3 {
				height: 100px;
				width: 200px;
				border-top: 1px solid black;   /* 上边框*/
				border-bottom: 1px solid red;  /* 下边框*/
				border-left: 1px solid pink;   /* 左边框*/
				border-right: 1px solid yellow; /* 右边框*/
			}
		</style>
	</head>
	<body>
		<div class="balld1"></div>
		<br />
		<!-- 复合写法 -->
		<div class="balld2"></div>
		<br />
		<!-- 分开写边框样式 -->
		<div class="balld3"></div>
	</body>
</html>

盒子内边距–padding

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding属性（简写属性）可以有一个到四个字。

属性	作用
padding: 10px ;	1个值，代表上下左右内边距都是10px
padding: 10px 20px ;	2个值，代表上下内边距是10px 左右内边距是20px
padding: 10px 20px 30px ;	3个值，代表上内边距10px，左右内边距20px，下内边距30px
padding: 10px 20px 30px 40px;	4个值，上内边距10排序，右内边距20px，左内边距30px，下内边距40px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 200px;
				width: 200px;
				padding-left: 10px;
				padding-right: 20px;
				padding-top: 30px;
				padding-left: 40px;
				border: 1px solid red;
			}
			
			.balld1 {
				height: 200px;
				width: 200px;
				padding: 10px;
				border: 1px solid red;
			}
			
			.balld2 {
				height: 200px;
				width: 200px;
				padding: 10px 20px;
				border: 1px solid red;
			}
			
			.balld3 {
				height: 200px;
				width: 200px;
				padding: 10px 20px 30px;
				border: 1px solid red;
			}
			
			.balld4 {
				height: 200px;
				width: 200px;
				padding: 10px 20px 30px 40px;
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div class="balld">padding---内边距</div>
		<div class="balld1">1个值，代表上下左右内边距都是10px</div>
		<div class="balld2">2个值，代表上下内边距是10px 左右内边距是20px</div>
		<div class="balld3">3个值，代表上内边距10px，左右内边距20px，下内边距30px</div>
		<div class="balld4">4个值，上内边距10排序，右内边距20px，左内边距30px，下内边距40px</div>
	</body>
</html>

padding会影响盒子的大小，会撑大盒子的大小

盒子外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	左右
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin属性（简写属性）可以有一个到四个字。

属性	作用
margin: 10px ;	1个值，代表上下左右外边距都是10px
margin: 10px 20px ;	2个值，代表上下外边距是10px 左右外边距是20px
margin: 10px 20px 30px ;	3个值，代表上外边距10px，左右外边距20px，下外边距30px
margin: 10px 20px 30px 40px;	4个值，上外边距10排序，右外边距20px，左外边距30px，下外边距40px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 200px;
				width: 200px;
				margin-left: 10px;
				margin-right: 20px;
				margin-top: 30px;
				margin-left: 40px;
				border: 1px solid red;
			}
			
			.balld1 {
				height: 200px;
				width: 200px;
				margin: 10px;
				border: 1px solid red;
			}
			
			.balld2 {
				height: 200px;
				width: 200px;
				margin: 10px 20px;
				border: 1px solid red;
			}
			
			.balld3 {
				height: 200px;
				width: 200px;
				margin: 10px 20px 30px;
				border: 1px solid red;
			}
			
			.balld4 {
				height: 200px;
				width: 200px;
				margin: 10px 20px 30px 40px;
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div class="balld">margin---外边距</div>
		<div class="balld1">1个值，代表上下左右外边距都是10px</div>
		<div class="balld2">2个值，代表上下外边距是10px 左右外边距是20px</div>
		<div class="balld3">3个值，代表上外边距10px，左右外边距20px，下外边距30px</div>
		<div class="balld4">4个值，上外边距10排序，右外边距20px，左外边距30px，下外边距40px</div>
	</body>
</html>

清除内外边距

浏览器或标签默认有一个内网边距。下面写法可以清除这个默认值

	* {
		padding: 0;
		margin: 0;
	}

盒子–圆角边框

border-radius 属性用于设置元素的外边框圆角

语法：
border-radius:10px;

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 200px;
				width: 200px;
				border-radius: 20px;
				border: 1px solid red;
			}
			.balld1 {
				height: 200px;
				width: 200px;
				border-radius: 10px;
				border: 1px solid red;
			}
			.balld2 {
				height: 200px;
				width: 200px;
				border-radius: 10px 20px;
				border: 1px solid red;
			}
			.balld3 {
				height: 200px;
				width: 200px;
				border-radius: 10px 20px 30px;
				border: 1px solid red;
			}
			.balld4 {
				height: 200px;
				width: 200px;
				border-radius: 10px 20px 30px 40px; /* */
				border: 1px solid red;
			}
			.balld5 {
				height: 200px;
				width: 200px;
				border-top-left-radius: 10px;
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div class="balld">圆角边框</div>
		<div class="balld1">1个值，四角</div>
		<div class="balld2">2个值，左上右下，右上左下</div>
		<div class="balld3">3个值，左上，右上左下，右下</div>
		<div class="balld4">4个值，左上角，右上角，右下角，左下角</div>
		<div class="balld5">只改变一个角</div>
	</body>
</html>

盒子–盒子阴影

box-shadow属性为盒子添加阴影

语法：
box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影位置，允许为负值
v-shadow	必需。垂直阴影的位置，允许为负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影（outset）改为内部阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 200px;
				width: 200px;
				margin: 100px auto;
				background-color: aqua;
				box-shadow: 10px 10px 10px 10px black;
			}
			
		</style>
	</head>
	<body>
		<div class="balld">盒子阴影</div>
	</body>
</html>

浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

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

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld1 {
				height: 200px;
				width: 200px;
				background-color: yellow;
				float:none;
			}
			.balld2 {
				height: 200px;
				width: 200px;
				background-color: yellow;
				float:left;
			}
			.balld3 {
				height: 200px;
				width: 200px;
				background-color: yellow;
				float: right;
			}
			
		</style>
	</head>
	<body>
		<div class="balld1">元素不浮动 （默认值）</div>
		<div class="balld2">元素向左浮动</div>
		<div class="balld3">元素向右浮动</div>
	</body>
</html>

浮动的特性

浮动元素会脱离标准流
浮动元素会一行内显示
浮动的元素会具有行内快元素的特性

清除浮动
为什么要清除浮动，因为当父标签中的所有元素发生浮动，同时没给父标签设置高度，就会导致父标签塌陷。
而清除浮动可以理解为: 让父标签根据浮动元素的大小进行自适应高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				background-color: yellow;
				border: 1px solid red;
			}
			.balld1 {
				height: 200px;
				width: 200px;
				background-color: pink;
				float:left;
			}
			.balld2 {
				height: 200px;
				width: 200px;
				background-color: blue;
				float: right;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 父级塌陷 -->
		<div class="balld">
			<div class="balld1"></div>
			<div class="balld2"></div>
		</div>
	</body>
</html>

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

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清楚左侧和右侧浮动

清除浮动的方法

额外标签法也称为隔墙法，是W3C推荐的做法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				background-color: yellow;
				border: 1px solid red;
			}
			.balld1 {
				height: 200px;
				width: 200px;
				background-color: pink;
				float:left;
			}
			.balld2 {
				height: 200px;
				width: 200px;
				background-color: blue;
				float: right;
			}
			
			.balld3 {
				clear: both;
			}
		</style>
	</head>
	<body>
		<!-- 解决方式一： -->
		<div class="balld">
			<div class="balld1"></div>
			<div class="balld2"></div>
			<div class="balld3"></div>
		</div>
	</body>
</html>

父级添加overflow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				background-color: yellow;
				border: 1px solid red;
				overflow: hidden; /* 给父元素添加 overflow属性*/
			}
			.balld1 {
				height: 200px;
				width: 200px;
				background-color: pink;
				float:left;
			}
			.balld2 {
				height: 200px;
				width: 200px;
				background-color: blue;
				float: right;
			}
			
		</style>
	</head>
	<body>
		<!-- 解决方式二： -->
		<div class="balld">
			<div class="balld1"></div>
			<div class="balld2"></div>
		</div>
	</body>
</html>

父级添加fater伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.clearfix::after {
				content:"";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			
			.clearfix {
				/* IE5、7 专有 */
				zoom: 1;
			}
			
			.balld {
				background-color: yellow;
				border: 1px solid red;
				overflow: hidden; /* 给父元素添加 overflow属性*/
			}
			.balld1 {
				height: 200px;
				width: 200px;
				background-color: pink;
				float:left;
			}
			.balld2 {
				height: 200px;
				width: 200px;
				background-color: blue;
				float: right;
			}
			
		</style>
	</head>
	<body>
		<!-- 解决方式三： 给父元素添加 clearfix -->
		<div class="balld clarfix">
			<div class="balld1"></div>
			<div class="balld2"></div>
		</div>
	</body>
</html>

定位

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

属性值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
他是相对于自己原来的位置进行移动的
原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 200px;
				width: 200px;
				/* 相对定位 */
				position: relative;
				top: 100px;
				left: 100px;
				border: 1px solid red;
			}
			
			.balld1 {
				height: 200px;
				width: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="balld"></div>
		<div class="balld1"></div>
	</body>
</html>

决定定位

绝对定位是元素在移动的时候，是相对于它的父元素来说的
如果没有父元素或者父元素没有定位，则以浏览器为准进行定位
如果父元素有定位（相对、绝对、固定），则以最近一级的有定位的父元素为参考点进行定位
绝对定位不再保留原来的位置（脱标）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 500px;
				width: 500px;
				border: 1px solid red;
				position: relative;
			}
			
			.balld1 {
				height: 200px;
				width: 200px;
				/* 绝对定位 */
				position: absolute;
				top: 100px;
				left: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="balld">
			<div class="balld1"></div>
		</div>
		
	</body>
</html>

固定定位

固定定位是元素固定于浏览器可视区域的位置，主要使用场景：可以在浏览器页面滚动时元素位置不会改变。
以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
固定定位不在保留原来的位置（脱标）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 2000px;
				width: 500px;
				border: 1px solid red;
				position: relative;
			}
			
			.balld1 {
				height: 200px;
				width: 200px;
				/* 固定定位 */
				position: fixed;
				top: 100px;
				right: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="balld">
			<div class="balld1"></div>
		</div>
		
	</body>
</html>

定位叠放次序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.balld {
				height: 100px;
				width: 100px;
				background-color: black;
				position: absolute;
				top: 100px;
				left: 100px;
				z-index: 2; /* 为于上方*/
			}
			
			.balld1 {
				height: 200px;
				width: 200px;
				background-color: pink;
				position: absolute;
				top: 100px;
				left: 100px;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="balld"></div>
		<div class="balld1"></div>
	</body>
</html>

元素的显示与隐藏：display、visibility、overflow

display 显示隐藏元素

语法：
选择器 {display : 属性值}
display隐藏元素后，不在保留原来的位置

属性值	描述
none	隐藏元素
block	除了转换为块级元素，同时还有显示元素的意思

visibility 可见性

语法：
选择器 {visibility : 属性值}
display隐藏元素后，继续占有原来的位置

属性值	描述
visible	元素可见
hidden	元素不可见

overflow 溢出

overflow属性指定了如果内容溢出一个元素框（超过其指定的高度或宽度）时，会发生什么
选择器 {overflow : 属性值}

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	超出对象的内容隐藏
scroll	不管内容是否超出，添加滚动条
auto	超出显示滚动条，不超出不显示滚动条