28-CSS—Day02

最新推荐文章于 2024-07-02 16:31:15 发布

哥，你好猛

最新推荐文章于 2024-07-02 16:31:15 发布

阅读量265

点赞数

分类专栏：前端三件套+jQuery 文章标签： css html html5

本文链接：https://blog.csdn.net/wy1511861159/article/details/120054644

版权

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

摘要由CSDN通过智能技术生成

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>