CSS进阶指南——边框模型与布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/wy1511861159/article/details/120054644

本文详细介绍了CSS中常见的样式，包括背景颜色、文本样式、盒子模型的边框、内边距、外边距以及如何清除元素的内外边距。此外，还探讨了文档流、浮动和定位的概念，特别强调了相对定位、绝对定位和固定定位的使用方法及其对页面布局的影响。

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

CSS—Day02

一、CCS中常见的样式

div元素：主要用于页面的布局

1.1、背景相关的样式

背景颜色

background-color 设置背景颜色

background-image：url()设置背景图片

设置背景图片的时候的平铺问题及解决方案：

什么叫做平铺：

如果图片大小不能铺满整个容器，则背景图发生平铺

解决：background-repeat

有3个值：

1、repeat-x 指明图像在X轴上平铺
2、repeat-y 指明图像在y轴上平铺
3、no-repeat 不允许图像平铺（常用）

		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				/*background-color: red;/*设置背景颜色*/
				/*background-image: url(https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_7d0334da93dc59f547a49ecfe46fa433/0);*/
				
			}
			
			div{
				height: 200px;
				width: 100%;/*设置100%他会在宽度上占满整个他的父元素*/
				background-image: url(img/logo-public.png);
				/*图片如果不能铺满整个容器（容纳图片的元素）
				 * 默认会在横向（X轴）和纵向（Y轴）发生平铺
				 * 解决平铺的问题 backgorun-repeat
				 * 其中background-repeat有三个值：
				 * 1、repeat-x  指明图像在X轴上平铺
				 * 2、repeat-y   指明图像在y轴上平铺
				 * 3、no-repeat   不允许图像平铺（常用）
				 */
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>

1.2、文本相关的样式

1.字体 font-family
注意：一般一个网页不会只设置一个字体，我们往往设置多个，每一个字体中间
用逗号隔开。
为什么设置多个：浏览器去渲染页面的时候，渲染字体的时候字体默认是去浏览器中找
浏览器默认是去本机上找。如果设置多个字体，默认从第一个字体开始找，如果第一个字体
本机没有，则往后面找。
注意:尽量不要用小众的字体。
2.字体的大小 font-size 一般默认的字体大小为16px
3.行高 line-height
行高：页面渲染文本的时候，默认是在横向是有2条看不到的线，文字就放在
线之间，所谓的行高就是2条线之间的距离。
如果想让一行文字垂直居中，我们往往可以设置改行文字的行高等于外层容器的高度。
4.字体颜色 color

<style type="text/css">
			*{
				font-family: SimSun, Arial, "Arial Narrow", HELVETICA;
				font-size:12px;
				color: #fff;
			}
			div{
				width: 200px;
				height: 200px;
				background-color: cyan;
			}
			p{
				line-height: 200px;
				
			}
		</style>
	</head>
	<body>
		<div id="">
		<p>床前明月光</p>
	<!--	<p>地上鞋两双</p>
		<p>床上狗男女</p>
		<p>其中就有你</p>-->
		</div>
	</body>

二、CSS中盒子模型（边框模型）

在CSS布局中，会将所有的HTML元素看成一个盒子

盒子有哪些特征：

内容区：真实放内容的区域

内边距：内容区距离边框的距离

边框：盒子的边缘（边框是有粗细）

外边距：盒子与盒子之间的距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pc24IexZ-1630547792524)(C:/Program%20Files/Typora/upload/image-20210812111456670.png)]

2.1、边框

常见的样式：

1、边框粗细 border-width

2、边框颜色 border-color

3、边框样式 border-style

		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				/*边框属性*/
			/*	border-width: 1px;
				border-color: red yellow; 
				border-style: solid;
				
				border-left-width: 5px;*/
				border: solid red 1px ;
				
				/*一、边框的颜色，样式，宽度都有四个值（默认）
				 * 1、如果只指定1个值，则4条边框都是用该值
				 * 2、如果指定4个值  从最上面边框开始然后以顺时针方向进行渲染
				 * 3、如果只指定3个值，则第一个表上边框  第二个值表左右边框 第三个值表下边框
				 * 4、如果只指定2个值 则第一个值表上下边框，第二个值表左右边框
					二、每一个样式都有一个border-方位（top,bottom,right,left）-样式名来对具体的某一个方位上的样式进行指定		 
				 *  三、boder样式可以进行简写，我们可以同时指定边框的宽度，颜色，样式 
				 * 如：border: solid red 1px 这三个值出现的顺序不固定的
				 * */
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

2.2、内边距：padding

内边距是内容区距离边框的距离

		<style type="text/css">
			div{
				width: 200px;
				height:200px;
				border: 1px solid red;
				/*指定内边距*/
				padding:2px 4px;
				/*通过padding-方位（top,bottom,left,right）
				 指定某一个方位的内边距
				 * */
				padding-left: 10px;
				
				/**
				 * 思考：一个盒子真实的大小是多少
				 * 宽度：左边框宽度+左边内边距+内容区宽度+右边框的宽度+右边距
				 * 高度：上边框宽度+上内边距+内容区的高度+下边框宽度+下边距
				 */
			}
		</style>

2.4、外边距margin

盒子与盒子之间的距离

 * 外边距：
		 * 1.基本使用跟padding一致
		 * 2.如果2个盒子在重叠地方有外边距（div1的下外边距和div2的上边距）会发生外边距重叠的现象
		 * 就是2个外边距会发生重叠，最终值是取2个当中大的一个。
		 * 3.外边距会不会影响盒子的大小：不会
		 * 4.margin的值可以设置为auto,一般是在水平方向设置
		 *   常用在子元素相对于父元素水平居中使用：
		 * 5.margin的值可以设值为负数（效果往反方向跑）

		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				margin-bottom: 15px;
				margin: 0 auto;
			}
			.div2{
				width: 100px;
				height: 100px;
				border: 1px solid yellow;
				margin: -10px auto;
			}
			.div3{
				width: 200px;
				height: 200px;
				border: 1px solid blue;
				margin-top: 10px;
			}
            <body>
		<div class="div1">
			<div class="div2">
				
			</div>
		</div>
		<div class="div3">
			
		</div>

2.5、清除元素自带的内外边距

	/*清除元素的内外边距*/
			*{
				margin: 0px;
				padding: 0px;
			}

2.6、overflow控制元素的内容溢出

在CSS布局中，如果父元素中的子元素超出了父元素的大小，就出现了溢出的情况。我们可以通过overflow样式进行控制溢出部分显示。

值	效果
visible	默认值，内容不会被裁剪，会呈现在元素框之外
hidden	溢出的部分直接被裁剪，且不可见
scroll	溢出的部分会被裁剪，为父元素添加滚动条，我们可以通过滚动条查看元素。无论溢出部分是水平方向还是垂直方向都会默认在2个方向都添加滚动条
auto	溢出内容也会被裁剪，自动根据实际情况添加滚动条
inherit	从其父元素继承overflow属性

<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .div1{
        width: 100px;
        height: 100px;
        border:1px solid red;
        overflow: auto;
    }
    .div2{
        width: 80px;
        height: 200px;
        border: 1px solid yellow;
    }
</style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

2.7、盒子模型其他的一些效果

阴影效果

box-shadow:X Y 颜色

text-shadow 对文本设置阴影效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				   width: 100px;
   			 		height: 100px;
    			            background-color: yellowgreen;
   				         box-shadow: 4px 5px lightgoldenrodyellow;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

渐变的效果

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 100px;
				height:100px;
				background-color: red;
				background-image: linear-gradient(red,yellow);
			}
		</style>
	</head>
	<body>
		<div class="div1">		
		</div>
	</body>
</html>

2.8、圆角边框

boder-radius:值

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				border-radius: 5px;/*通过指定的值切圆*/
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

三、文档流

这里的文档指的是HTML文档，文档流是指在浏览器渲染页面元素的时候，元素会默认从左往右从上往下的进行渲染。最终呈现的效果是页面上从上往下分成一行一行的显示，每一行当中元素从左往右摆放。

元素的分类：

块级元素：浏览器在渲染页面时，元素与元素之间会换行。

div
h1-h6
p
li
from

行内元素：浏览器在渲染页面时，会从左往右摆放，直到这一行放不下了才会换行。

span
a
img

行内元素与块级元素之间可以互相的转换：

通过display样式进行转换

值	效果
inline	转为行内元素
block	转为块级元素
none	元素隐藏

<style type="text/css">
			img{
				display: block;/*将行内元素转为块级元素*/
			}
			h3{
				display: inline;/*将块级元素转为行内元素*/
			}
		</style>

元素隐藏的样式：

display:none — display:block元素隐藏后所占的位置也腾出来（开除）

visibility:hidden-- visibility: visible元素隐藏后所占的位置还保留着（请假）

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			.div2{
				/*display: none;*/
				visibility: hidden;
				/*visibility: hidden;*/
			}
			
			/*用伪类控制其他元素的显示与隐藏，元素之间必须有父子关系*/
			.div1:hover .div2{
				/*display: block;*//*显示*/
				visibility: visible;/*显示*/
			}	
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>

四、浮动float

块级元素在文档流中垂直布局，可以使用float使当前元素脱离文档流。（有点类似原来所有的元素都共处于一个平面，通过浮动使被浮动元素脱离文档流，然后飘在原来平面之上。他所占的空间就空出来。）

值	效果
left	向左浮动
right	向右浮动
none	默认值，元素不浮动
inherit	从父元素继承

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				
			}
			.div1{
				border: 1px solid red;
			}
			.div2{
				border: 1px solid yellow;
			}
			.div3{
				border: 1px solid blue;
			}
			
			.div1{
				width: 50px;
				height: 50px;
				float:right;
			}
			
			.div2{
				float:right
			}
			span{
				float:right;
			}
		
		</style>
	</head>
	<body>
		<div class="div1">
		
		</div>
		<div class="div2">
		</div>
		<div class="div3"></div>
			<span id="">
				我是span
			</span>
		<!--
			1.浮动的框可以向左或向右浮动，直到他的外边缘碰到其父元素的边框
			2.当一个元素设置浮动后，会立即脱离文档流，后面的元素会立即向上移动，填补原来的
			位置
			3.如果多个元素同时设置浮动，则会按照浮动方向，依次摆放，直到摆放不下则
			换行
		-->
	</body>
</html>

五、定位

指定元素放在页面的指定位置，它允许该元素出现在页面上任意的位置。

实现定位：position样式指定

值	效果
static	默认值，没有定位，元素出现在正常文档流中
relative(相对定位)	相对元素在文档流中原始位置进行定位，不会脱离文档流，也不会影响其他元素的位置
absolute(绝对定位)	1、脱离文档流 2、定位参照物是开启了定位的父元素，如果没有，会一层一层往上找，最终都没找到则
fixed(固定定位)	会固定在窗口的某一个位置

相对定位

开启方式：position:relative

通过top bottom right left 指定位置

1、定位效果：相对于自身原来的位置进行定位

2、不会脱离文档流，不会对其他元素造成影响

.div2{
border: 1px solid yellow;
/*开启相对定位*/
/*position: relative;*/
/*指定位置
* top:相对于原来上边框
* left:
* right:
* bottom:
* 一般我们只需要指定2个即可
*/
/*top:10px;
left: 10px;*/
/*开启绝对定位*/

绝对定位：

开启方式：position:absolute

通过top bottom right left 指定位置

1、脱离文档流

2、定位参照物是开启了定位的父元素，如果没有，会一层一层往上找，最终都没找到则相对body

position: absolute;
/*
* 1、脱离文档流
* 2、定位参照物是开启了定位的父元素，如果没有，会一层一层往上找，最终都没找到则
* 相对body
*/
top:20px;
left:30px;

固定定位：

开启方式：positon:fixed

通过top bottom right left 指定位置

会固定在窗口的某一个位置

.div1{
width: 20px;
height: 100px;
background-color: red;
/*开启固定定位*/
position: fixed;
top:50px;
right: 0px;
}

right:
bottom:
一般我们只需要指定2个即可
*/
/top:10px;
left: 10px;/
/开启绝对定位/


#### 绝对定位：

> 开启方式：position:absolute
>
> 通过top  bottom right left 指定位置

1、脱离文档流	

2、定位参照物是开启了定位的父元素，如果没有，会一层一层往上找，最终都没找到则相对body

```html
position: absolute;
/*
* 1、脱离文档流
* 2、定位参照物是开启了定位的父元素，如果没有，会一层一层往上找，最终都没找到则
* 相对body
*/
top:20px;
left:30px;

固定定位：

开启方式：positon:fixed

通过top bottom right left 指定位置

会固定在窗口的某一个位置

.div1{
width: 20px;
height: 100px;
background-color: red;
/*开启固定定位*/
position: fixed;
top:50px;
right: 0px;
}

28-CSS—Day02

CSS—Day02

一、CCS中常见的样式

1.1、背景相关的样式

1.2、文本相关的样式

二、CSS中盒子模型（边框模型）

2.1、边框

2.2、内边距：padding

2.4、外边距margin

2.5、清除元素自带的内外边距

2.6、overflow控制元素的内容溢出

2.7、盒子模型其他的一些效果

2.8、圆角边框

三、文档流

四、浮动float

五、定位

相对定位

绝对定位：

固定定位：

固定定位：