JavaWEB笔记03 CSS常用操作（2）
文章目录
一.处理溢出：
CSS中对于块中元素的填充超出边框的情形提供overflow进行溢出处理，overflow对于div中的内容溢出本块的情况有以下几种处理方式：
- overflow: auto 自动添加滚动条
- overflow: hidden 溢出的内容隐藏
- overflow: scroll 溢出与否均添加滚动条
- overflow: visible（默认：溢出会显示）
二.处理层的叠放顺序：
CSS中处理层叠放顺序是静态的，静态处理层叠放可以实现一般的效果，结合后面的transform动画等可以实现比较简单的叠放变换特效，但是对于涉及交互性比较高的点触图层浮动的这种处理层叠放的效果则很难实现，需要借助js来实现，因此将介绍处理分为静态和强交互动态两部分进行介绍：
1.CSS静态处理层叠放：
CSS提供z-index来进行顺序调整：z-index: value，其中z-index的值越大越在上层，在应用有可以将始终固定在屏幕上的层的z-index设置成最大；
2.结合JS处理动态点触图层浮动效果：
动态点击效果，即：点击哪个块，令哪个块浮上来，对于这种动态的效果需要不断的改变z-index以保证出现新的覆盖关系，因此单纯使用CSS是不能实现这种效果的，可以结合js来实现，以下是代码片段：
#<body>中<script type="text/javascript">中进行相关的书写：
var index = 0;
var arr = document.getElementsByTagName("div");
for (var i = 0; i < arr.length; i++) {
arr[i].onclick = function() {
// alert("点击了")
this.style.zIndex = (index++)+"";
}
}
三.设置鼠标指针样式：
在网站设计时鼠标悬浮对应的点触会变换鼠标的样式，这种就需要通过设置鼠标指针的样式来实现：
- 首先对于a标签中的超链接默认就会有鼠标变小手的效果
- 鼠标变小手的主要应用是针对使用div制作的按钮
（1）按钮是超链接的话就将div按钮嵌套进a标签超链接中
（2）当按钮不是超链接时，使用cursor: pointer;鼠标就会变小手，在设置时记得加:hover对应鼠标悬浮状态，如果自己做的指针就使用cursor的url效果，即：cursor:url(“对应文件”)
四.字体属性的设置：
CSS中针对字体属性有丰富的设置：
- 字体大小的单位： 像素px，英镑pt，厘米cm，毫米mm
- 文本加粗： font-weight：最粗是900，最细是100，bold和bolder也可以加粗；
- 字体： font-family设置字体
- 字风格： font-style设置：italic斜体，normal正常显示，oblique会倾斜角度更大等等
- 字体阴影： text-shadow: 阴影左右范围 阴影上下范围 阴影发光范围 阴影颜色（前三个范围单位是px）（同之前的阴影特效有一样顺序供记忆）
五.颜色设置：
CSS中对于颜色的设置统一在color处对于标签文本颜色进行调整，而对于块标签的背景颜色使用background-color进行调整，而CSS提供的颜色表示也是比较丰富的：
- 颜色的英文单词：red,yellow,blue,green等表示颜色的英文单词
- 使用16进制值：#+十六进制颜色值
- RGB取值：在十六进制颜色值中有六位，每两位对应一个颜色向，前两位红，中间两位绿，后两位蓝，其中红绿蓝三原色的取值范围均是0-255
- 同样的使用rgb(红值，绿值，蓝值)可以来调配颜色：使用rgba(红，绿，蓝，透明度) 可以设置透明度：1不透明，0全透明，在0-1之间取值
六.背景图片的位置设置：
CSS中对于背景图片的设置除了之前在CSS常用操作（1）中介绍的基本设置外，CSS还提供了关于背景图的位置设置：
- 使用background-position: 位置信息总共有多个位置进行表示，其中的位置信息通常使用两个单词：表示上下 表示左右
- 对于上面的位置信息中，表示左右使用left,center,right;表示上下使用：top,center,bottom，同样也可以使用百分比或像素来进行表示，关键是要记住这两个位置信息是：先表上下 后表左右
七.边框的设置：
CSS中对于图片边框的设置通常使用border进行控制，在之前的介绍中已经介绍了border的一些简单用法，在此将介绍border的详细用法：首先可以使用img src="" 标签添加图片，在为图片加边框时除了使用border来进行描绘：
- 语法：border 粗细 颜色 样式
- border中每个方向上的边框可以分开设置，提供了border-left这种可以分开设置
- 也可以将上面的border拆成：border-style, border-width, border-color这三个进行分开设置
- border中同样提供了颜色，风格，大小与上下左右四个方向的拆分属性的结合
- 不需要边框可以使用border: none来去掉边框（去掉按钮自带的边框）
- 对于输入框标签input设置： 如果只想要一条边框线就将其他方向border都看不见或者先让所有标签是none，再让可与看见的一边solid改样式
八.內间距的设置：
CSS中使用CSS+div的方式进行相关布局的时候之前使用margin控制距离，但是margin控制的是外距离，在內间距的控制上我们需要使用padding：
- padding使用的对象是外面的框而不是里面内部的框
- 单一对于外框使用padding会撑大外框，结合box-sizing: border-box; 就不会撑大
- 某些元素会默认带有内间距，如：ul，button；padding: 0就可以去掉默认内间距
- 去掉页面预留：margin: 0以及padding: 0进行设置
- 字符间距使用letter-spacing进行调整
九.文字的线条和对齐：
- 文字加下划线：text-decoration: under
- 文字加删除线：text-decoration: line-through
- 去线条就将text-decoration: none就可以了，应用：去掉a标签和link标签在对应链接中的默认下划线
- 文本对齐默认左对齐，使用text-align可以实现对齐方式的改变
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
