第一篇笔记--CSS学习笔记1-CSDN博客

本文链接：https://blog.csdn.net/weixin_43829782/article/details/100127128

CSS学习笔记

ID选择器，用#来表示，例如
123
，在我们于CSS中要选择的时候为

<style>
	#divTitle{
		background-color:red;
	}
</style>

注意点
<1> ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
<2> ID属性只能在每个 HTML 文档中出现一次，不能有重复的ID
Position关键字（定位）
- Static 默认定位，不会受到top, bottom, left, right影响
- Fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
- Relative 可以将其移动走，但是原来所占空间保留
- Absolute 可以将其移动走，原来位置不保留，可能造成与填空位置的元素重叠
- z-index 后跟数值，可以是正也可以是负，以此来决定元素重叠时，到底哪个元素应显示靠上，数值越大越靠上，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。-
  注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
Overflow关键字
指定如果内容溢出一个元素的框，会发生什么
- visible 默认值。内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
- inherit 规定应该从父元素继承 overflow 属性的值
- overflow-x 规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话
  - visible、hidden、scroll、auto同上
  - 特殊存在：
    - no-display 如果内容不适合内容框，则删除整个框
    - no-content 如果内容不适合内容框，则隐藏整个内容
- overflow-y 同上，是对上/下边缘裁剪
- Resize 指定一个div元素，允许用户调整大小，选项有 none、both、horizontal、vertical
- table-layout 为表设置表格布局算法
  auto 默认。列宽度由单元格内容设定
  fixed 列宽由表格宽度和列宽度设定
  inherit 规定应该从父元素继承 table-layout 属性的值
- text-algin
  left、right、center、justify（两端对齐）、inherit
- text-shadow 向文本设置阴影
  - h-shadow 必需。水平阴影的位置。允许负值。
  - v-shadow 必需。垂直阴影的位置。允许负值
  - blur 可选。模糊的距离
  - color 可选。阴影的颜色
- text-transform 控制文本的大小写
  - none 默认。定义带有小写字母和大写字母的标准的文本
  - capitalize 文本中的每个单词以大写字母开头
  - uppercase 仅有大写
  - lowercase 仅有小写
  - inherit 继承
- vertical-align
  baseline 默认。元素放置在父元素的基线上。
  sub 垂直对齐文本的下标。
  super 垂直对齐文本的上标
  top 把元素的顶端与行中最高元素的顶端对齐
  text-top 把元素的顶端与父元素字体的顶端对齐
  middle 把此元素放置在父元素的中部。
  bottom 把元素的顶端与行中最低的元素的顶端对齐。
  text-bottom 把元素的底端与父元素字体的底端对齐。
  length
  % 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
  inherit 规定应该从父元素继承 vertical-align 属性的值。
- white-space 指定元素内的空白怎样处理
  - normal 默认。空白会被浏览器忽略
  - pre 空白会被浏览器保留。其行为方式类似 HTML 中的
```
 标签。
```
  - nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
    标签为止。
  - pre-wrap 保留空白符序列，但是正常地进行换行
  - pre-line 合并空白符序列，但是保留换行符
  - inherit
- background

属性	说明	CSS版本
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像	1

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
local 背景图片随滚动元素滚动
background-size
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
Float 定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止