CSS基础知识（三）

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 属性设置元素当过渡效果，四个简写属性为：

  • 1. transition-property 指定CSS属性的name，transition效果
    2. transition-duration transition效果需要指定多少秒或毫秒才能完成
    3. transition-timing-function 指定transition效果的转速曲线
    4. 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

  • 1. list-style:none; 没有点的呈现
    2. list-style: disc; 呈现圆点
    3. list-style: circle; 空心圆
    4. list-style: square;正方块

透明度

• opacity: 0.8; /属性值 [0-1] 0：完全透明 1：不透明/

光标

• cursor: pointer; 手型

• cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子

  • 1. repeat 水平和垂直方向都重复
    2. default 默认光标
    3. help 指示可用的帮助（通常是一个问号或一个气球）
    4. wait 指程序正忙（通常是一个表或沙漏）

设置多余文本省略

• 1. white-space:nowrap; //空白文本处理，nowrap不换行
  2. text-overflow:ellipsis; //超出文本显示为省略号
  3. overflow: hidden; //超出部分隐藏

布局排版

• CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节：

  • 1. 正常布局流
    2. display 属性
    3. 弹性盒子
    4. 网格
    5. 浮动
    6. 定位
    7. CSS 表格布局
    8. 多列布局

正常的布局流

• 正常布局流(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可以取三个值

  • 1. left ：停止任何活动的左浮动
    2. right ：停止任何活动的右浮动
    3. both ：停止任何活动的左右浮动

• 小总结

  • 1. 脱离文档流，不占原来的文档流位置
    2. 浮动元素在父元素中所占的面积的有效高度为0
    3. 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

  • 注意：如果有浮动，一定要定义一个父容器，而且一定要定义父容器宽和高。

定位

静态定位

• 静态定位指的是将元素放在他的文档布局流中的正常位置上
• 如果所有的父元素都没有定义position属性，那么所有的父元素都默认position属性都是static

相对定位

• 相对定位占据在正常的文档流中，除非你修改他的位置或者让他与其他元素重叠
  • 如果单单给元素加上position：relative；并不会改变元素的位置，即需要使用top,bottom,left,right属性
  • 相对定位是相对于正常位置进行定位

绝对定位

• position:absolute;
  

• 生成绝对定位的元素，是相对于static定位以外的第一个父元素行进定位。

• 绝对定位的元素不在正常文档布局流中.

• 固定元素相对于元素或距离其最近的定位祖先

固定定位

• 固定定位固定元素是相对于浏览器视口本身定位
• fixed固定定位

z-index

• z-index是对Z轴的参考
• 默认情况下z-index是auto
• 正值将它往上移动，负值向下移动
• 解决元素重叠问题

position:sticky

• 相对定位与绝对定位的混合体
• 允许被定位的元素表现和相对定位一样，知道滚动到某个阈值点（比如说：规定距离顶部100像素，到达改为之后则固定不动了。）