小PP前端CSS篇——网页装饰、盒子模型和定位

最新推荐文章于 2025-05-13 17:44:16 发布

小嘻嘻技术实习生

最新推荐文章于 2025-05-13 17:44:16 发布

阅读量261

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_39087050/article/details/103893446

版权

在前面的篇章中，我们用Html搭好地基跟骨架之后，我们开始对网页进行装修。前端知识体系非常的繁杂，想要先不说javascript，想要玩转CSS也是不容易。出了在这里介绍简单的CSS，我还会在文章最后面介绍大家使用一些比较方便的工具增加开发效率。
CSS语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>实验</title>
	</head>
	<style type="text/css">
	//语法组成
	/*选择器{
			属性：值； 这三个组成
		}*/
		//********************下面就是例子
		.test{
			width: 300px; //结尾必须要加分号英文分号; ，否则会报错
			height: 300px;
			background: red;
		}
	</style>
	<body>
			<div class="test"></div>
	</body>
</html>

这是效果图
在这里插入图片描述
选择器分很多种，我这里介绍比较常用的。

//ID选择器
	<style type="text/css">
		#test{                         //#井号是ID选择器的选择符，但是ID是唯一，
									  //ID名称不能重复，但是类名可以重复。		
			width: 300px;
			height: 300px;
			background: red;
		}
	</style>
	<body>
			<div id="test"></div>
	</body>
//类选择器
	<style type="text/css">                  //.点号是类选择器的选择符
		.test{
			width: 300px;
			height: 300px;
			background: red;
		}
	</style>
	<body>
			<div class="test"></div>
	</body>
//属性选择器
<style type="text/css">   
		div{                                    //属性选择器，直接写属性就好了
			width: 300px;
			height: 300px;
			background: red;
		}
	</style>
	<body>
			<div></div>
	</body>

下面是常用的CSS属性，如果不懂语法的，去W3school那里查询

属性	说明
background-img	背景图片
background-color	背景颜色
text-align	水平对齐，它会影响一个元素中的文本行互相之间的对齐方式
font-family	字体设置
font -size	设置字体大小
letter-spacing	左右间距
line-height	上下间距
list-style-type	列表样式
list-style-image	列表图片
width	宽
height	高
color	颜色

盒子模型
冲着夫
从这幅图可以看的出盒子模型有三个属性，margin(外边距)，border(边框)，padding(内边距)。刚入行不久的，可能看不懂这幅图，如果看不懂可以看看下面的简略版
在这里插入图片描述

margin-top	外边距与上面的距离
margin-bottom	外边距与下面的距离
margin-left	外边距与左边的距离
margin-rigth	外边距与右边的距离
padding-top	内边距与上面的距离
padding-bottom	内边距与下面的距离
padding-left	内边距与左边的距离
padding-right	内边距与右边的距离
border-width	边框大小
border-color	边框颜色
border-style	边框风格
border-radius	定义圆角的形状

margin：10px 11px 12px 13px; //简略写法，他的顺序是上右下左，上10px 右10px 下10px 右10px
padding:10px 11px 12px 13px;//同上
border:1px solid black；//边框1px，实线，黑色
border-radius：10px// 4个角都是半圆
border-radius:10px 20px 30px 40px;//左上角10px 右上角20px 左下角30px 左下角30px

还有一个IE盒子这里就不讲了，有兴趣的可以去百度一下，很多。

定位position

position的值有4个常用的，static，absolute，fixed，relative。

posisiton:static; //默认值，没有任何效果
posisiton:absolute;//绝对定位，脱离文档流，是相对于浏览器定位，
posisiton:fixed;/*固定定位，脱离文档流，是相对于浏览器定位，但是他是固定在那里，
                屏幕滚动时不会改变*/
posisiton:relative;//相对定位，没有脱离文档流，相对于父元素定位。