本文深入讲解CSS层叠式样式表的使用技巧，包括层标签的整体操作、文字样式设定、流式布局、层标签分组、居中布局及去除顶部缝隙等关键知识点。
CSS：层叠式样式表
1、对层标签整体进行操作
<div style="width:200px;height:200px;background-color:blue"></div>
宽度 width:200px/50%
高度 height:200px/50%
背景色 background-color:red/#颜色代码
背景图片 background-image:url(图片路径)
背景图片排列方式 background-repeat:repeat平铺/repeat-x背景图像将在水平方向重复/repeat-y背景图像将在垂直方向重复/no-repeat背景图像将仅显示一次
背景图片位置 background-postion:
背景图片大小 background-size:
背景图片是否滚动（fixed背景图锁定） background-attachment:fixed
边框 border:5px solid red(宽度 实线/虚线 颜色)
绝对定位(定位层标签左上角的点) position:abslute;
层间距 margin-left/right/top/bottom:10px left层标签左侧间距,right层标签右侧间距,top层标签上部间距,bottom层标签底部间距
2、对层标签中文字样式进行操作
格式：<div style="font-weight:100;font-style:italic;text-decoration:underline;font-size:10px;color：red;font-family：黑体"></div>
加粗 font-weight:100/bold;
倾斜 font-style:italic;
下划线 text-decoration:underline;
删除线 text-decoration:line-through;
大小 font-size:10px; (正常浏览一般12px-18px)
颜色 color：red/#颜色代码；
字体 font-family：黑体；
3、流式布局
格式：<div style="width:100px;height:100px;background-color:blue;float:left/right;margin-left/right/top/bottom:10px;min-width:500px"></div>
float left从左向右布局,right从右向左布局
min-width:500px 设置流式布局最小宽度,若浏览器页面小于500px,则下方出现水平滚动条
4、层标签分组
格式：
<head>
<style type="text/css">
.组名{width： ；
height： ；
………… ；
}
</style>
</head>
<body>
<div class="组名"></div>
<div class="组名"></div>
<div class="组名"></div>
</body>
分组后的层标签按照<head>内的格式统一
5、将一个<div>排布到页面中间
<div style="width:200px;height:300px;background-color:red;position:absolute;top:50%;margin-top:-150px; left:50%; margin-left:-100px;"></div>
先设置绝对定位，再将这个div左上角的点定位到页面中央，然后向左和向上分别进行调整
6、去掉层标签和html页面顶部的缝隙
<head>
* {
margin:0px;
padding:0px;
}
</head>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
