css的值
长度
- 最常见的数字类型是 ,例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝 对长度。重要的是要知道它们之间的区别,以便理解他们控制的元素将变得有多大。
绝对长度单位
-
以下都是绝对长度单位——它们与其他任何东西都没有关系,通常被认为总是相同的大小。
* -
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如,我们通常不会在屏幕上使用cm。惟 一一个经常使用的值,估计就是px(像素)。
修饰字体文字
-
color:字体颜色 font-size:字体大小,通常用像素(px)来定义大小 font-weight:字体粗细 - bold 加粗 - normal 正常 - 100~900为字体指定了 9 级加粗度,数字 400 等价于 normal,而 700 等价于 bold font-famliy:字体 - Serif 字体 - Sans-serif 字体 - Monospace 字体 - Cursive 字体 - Fantasy 字体 font-style:字体风格 - normal - 文本正常显示 - italic - 文本斜体显示 - oblique - 文本倾斜显示 text-decoration:字体加横线 - none 无 - underline 下划线 - overline 上划线 - line-through 贯穿线 - blink 文本闪烁 text-align:字体所处位置 - left - right - center - inherit 继承父元素的text-align属性值 line-height:行高,一般要纵向居中设置为 height 的高度 text-indent:首行字的缩进 建议用em(缩进多少倍数)做为单位 text-shadow:3px 4px 5px #AAA阴影 (CSS3的效果) - 3px向右偏移的像素值 - 4px向下偏移的像素值 - 5px 模糊效果 - #AAA 阴影颜色 vertical-align 设置元素的垂直对齐方式。 - baseline 默认。元素放置在父元素的基线上。 - sub 垂直对齐文本的下标。 - super 垂直对齐文本的上标 - top 把元素的顶端与行中最高元素的顶端对齐 - text-top 把元素的顶端与父元素字体的顶端对齐 - middle 把此元素放置在父元素的中部。 - bottom 把元素的顶端与行中最低的元素的顶端对齐。 - text-bottom 把元素的底端与父元素字体的底端对齐。 /* 溢出文本处理 */ overflow: hidden; /* 溢出部分 隐藏 */ white-space: nowrap; /* 空白部分 不换行 */ text-overflow: ellipsis; /* 溢出的文本变成省略号 */
阴影
-
box-shadow 属性可以设置一个或多个下拉阴影的框
-
box-shadow: h-shadow v-shadow blur spread color inset;
-
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nRyDab4S-1610865382588)(C:\Users\MISS\AppData\Roaming\Typora\typora-user-images\image-20210112190849872.png)]
透明度
- opacity 用于设置元素的透明度, 值的范围是 0~1 。1 为不透明, 0 为完全透明
鼠标样式
-
cursor 属性用于定义鼠标样式,可选值有: pointer 、 wait 、 help 、 copy 、 crosshair 用户也可以自定义一个鼠标样式:
-
cursor: url(xxx),auto;
-
修改滚动条样式
-
::-webkit-scrollbar 滚动条整体部分(宽高等) ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是 垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
-
/* 滚动条整体部分 */ .lyric-container::-webkit-scrollbar{ width: 15px; height: 15px; } /* 定义滚动条的轨道颜色、内阴影及圆角 */ .lyric-container::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; } /* 滚动条里面的小方块 */ .lyric-container::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; } /*定义两端按钮的样式*/ .lyric-container::-webkit-scrollbar-button { background-color:cyan; } /* 滚动条里面的小方块鼠标悬停的样式 */ .lyric-container::-webkit-scrollbar-thumb:hover{ background: #333; }
transform
-
transform 是 css3 的属性,该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放, 移动,倾斜等。
-
transform: none|transform-functions;
-
-
常用的值有
transition
-
transition 属性设置元素当过渡效果,四个简写属性为:
-
- transition-property 指定CSS属性的name,transition效果
- transition-duration transition效果需要指定多少秒或毫秒才能完成
- transition-timing-function 指定transition效果的转速曲线
- transition-delay 定义transition效果开始的时候
-
语法
-
transition: property duration timing-function delay;
-
-
-
transition-timing-function 常用的值有:
动画
-
动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色 定义语法:
-
@keyframes animationName{ from {} to {} }
-
-
使用
-
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-
-
其他属性
列表属性
-
list-style
-
- list-style:none; 没有点的呈现
- list-style: disc; 呈现圆点
- list-style: circle; 空心圆
- list-style: square;正方块
-
透明度
- opacity: 0.8; /属性值 [0-1] 0:完全透明 1:不透明/
光标
-
cursor: pointer; 手型
-
cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子
-
- repeat 水平和垂直方向都重复
- default 默认光标
- help 指示可用的帮助(通常是一个问号或一个气球)
- wait 指程序正忙(通常是一个表或沙漏)
-
设置多余文本省略
-
- white-space:nowrap; //空白文本处理,nowrap不换行
- text-overflow:ellipsis; //超出文本显示为省略号
- overflow: hidden; //超出部分隐藏
布局排版
-
CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节:
-
- 正常布局流
- display 属性
- 弹性盒子
- 网格
- 浮动
- 定位
- CSS 表格布局
- 多列布局
-
正常的布局流
-
正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。
-
<body> <p>I love my cat.</p> <ul> <li>Buy cat food</li> <li>Exercise</li> <li>Cheer up friend</li> </ul> <p>The end!</p> </body>
-
-
默认情况如下图显示
-
HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。
-
当你使用css创建一个布局时,你正在离开正常布局流,但是对于页面上的多数元素,正常布局流将完 全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要,因为你可以按照默认的方式 来搭建页面,而不是自己发明轮子。
浮动
-
float 属性最初只用于在成块的文本内浮动图像,但是现在它已成为在网页上创建多列布局的最常用 工具之一。
-
使用float来让图片周围的文本浮起来。
-
img { float: left; margin-right: 30px; }
-
-
注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右 侧的文字紧贴着图片。
多列浮动
-
div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } /* nth-of-type(n) 选择器匹配同类型中的第n个同级兄弟元素 */
清除浮动
-
我们很快就会碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装,如果 没有处理这些元素,就会变得很糟糕。
-
clear 属性,当你把这个应用到一个元素上时,它主要意味着"此处停止浮动"——这个元素和源码中后 面的元素将不浮动,除非将一个新的 float 声明应用到此后的另一个元素。
-
footer { clear: both; }
-
-
clear可以取三个值
-
- left :停止任何活动的左浮动
- right :停止任何活动的右浮动
- both :停止任何活动的左右浮动
-
-
小总结
-
- 脱离文档流,不占原来的文档流位置
- 浮动元素在父元素中所占的面积的有效高度为0
- 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间
-
注意:如果有浮动,一定要定义一个父容器,而且一定要定义父容器宽和高。
-
定位
静态定位
- 静态定位指的是将元素放在他的文档布局流中的正常位置上
- 如果所有的父元素都没有定义
position
属性,那么所有的父元素都默认position属性都是static
相对定位
- 相对定位占据在正常的文档流中,除非你修改他的位置或者让他与其他元素重叠
- 如果单单给元素加上
position:relative;
并不会改变元素的位置,即需要使用top,bottom,left,right属性 - 相对定位是相对于正常位置进行定位
- 如果单单给元素加上
绝对定位
-
position:absolute;
-
生成绝对定位的元素,是相对于static定位以外的第一个父元素行进定位。
-
绝对定位的元素不在正常文档布局流中.
-
固定元素相对于元素或距离其最近的定位祖先
固定定位
- 固定定位固定元素是相对于浏览器视口本身定位
- fixed固定定位
z-index
- z-index是对Z轴的参考
- 默认情况下z-index是auto
- 正值将它往上移动,负值向下移动
- 解决元素重叠问题
position:sticky
- 相对定位与绝对定位的混合体
- 允许被定位的元素表现和相对定位一样,知道滚动到某个阈值点(比如说:规定距离顶部100像素,到达改为之后则固定不动了。)