CSS - 自学笔记
2018-12-14 -----
1 所有元素的锚点默认就是它的物理中心
2 改变锚点位置的方法： transform-origin: x-axis y-axis z-axis;
3 ps里在层级里选择对象，右键可以copy css
4 devicePixelRatio 设备像素比 在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.
第一部分
1 css 指层叠样式表
2 用来定义 html的显示
3 为了解决内容和表现分离
4 多个样式可层叠为一 ， 后面各项优先级依次增高：浏览器默认设置 外部样式表 内部样式表（在head标签内部的），内联样式（在Html元素内部）
5 外部样式可提高工作效率
6 格式： selector{property:value}
7 比如 h1{ color:red ; font-size:14px ; }
8 颜色的值还可以是 #ff0000， 也可以有缩写形式 #f00
9 也可以用RGB p{color:rgb(255,0,0)} 或者 p{color:rgb(100%,100%,0)}
10 如果值为若干单词，则要加引号，比如 p{ font-family: "sans serif"}
11 用分号隔开多个声明
12 文本对齐 text-align: center;
13 所有的标题元素都是绿色的：
h1,h2,h3,h4,h5,h6 {
color: green;
}
14 通常子元素会继续父元素的属性
15 派生选择器 控制列表中的粗体
li strong {
font-style: italic;
font-weight: normal;
}
16 id选择器
17 border: 1px dotted #000; 拥有一个像素宽的黑色点状边框
18 padding: 10px; 周围会有 10 个像素宽的内边距 内部空白
19 类选择器 用点号来显示 比如 .center{text-align: center}
20 td.fancy {
color: #f60;
background: #666;
}
类名为 fancy 的表格单元将是带有灰色背景的橙色
21 属性和值选择器
22 背景是透明的 margin: 0px; padding: 0px;">23 背景图片 background-image: url(/i/eg_bg_04.gif)
24 背景平铺 background-repeat: repeat-y ; no-repeat repeat-x. 默认是全场景x和y向全部repeat
25 背景定位：background-position: center left right bottom top (一般会同时出现两个) 或者是两个百分数，或者是两个数值
26 背景图像固定 background-attachment:fixed 不随滚动而滚动
27 文本缩进 text-indent: 20vw
28 注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动
29 text-indent还可以为负值
30 text-indent也可以设置为两个百分比值
31 text-align left right center inherit justify这个比较恶心
32 word-spacing 单词间的间距
33 letter-spacing 字母间的间距
34 text-transform 字母的大小写 有三个值 uppercase lowercase capitalize
35 text-decoration
-
none
-
underline
-
overline
-
line-through
-
blink
36 white-space:normal 合并空白符
pre 保持原状
nowrap 不换行
pre-wrap
pre-line
37 文本方向 direction ltr rtl
第二部分 框模型
38 css框模型 element padding border margin
39 padding可以是正数，或百分比， 上右下左, 也可以分开写成 padding-left padding-top padding-bottom padding-right 内边距！！好好理解
40 padding值为百分比时表示相对于父容器宽度的百分比
41 border有样式，宽度，颜色
42 border在padding内边距之上
43 border-style 比如 outset就像按钮, 4个值可以同时设置4个边
44 可以定义单边样式 比如 border-top-style:
45 border-width 可以设置成 thin thick medium 或者具体的数值
46 必须设置border-style 否则就看不到边框
47 border-color一次可接受4个值，数据可以是命名，十六进制，或是rgb
48 border-color : thick double red, 也可以把宽度 样式 颜色这些简写到一个属性里
49 margin是外边距，它可以是数值，百分比，和负值
50 margin为百分比时，其数值是相对于父级的
51 css如果有属性是支持四个值的，则有值复制特性
52 单边外边距属性 margin-left
53 外边距合并
第三部分 css定位 positioning
1 块级元素：div h1 p
2 行内元素：span strong, 行内框
3 一切皆为框
4 有三种定位机制：普通流 浮动流 绝对定位
5 行框 LineBox ，行内框，这个不太懂
6 position可能的值有
absolute ， 相对于static定位以外的第一个父元素进行定位，元素的位置用left top right botttom属性进行规定. 互相会覆盖， 设置为绝对定位的元素框从文档流完全删除
fixed 生成绝对定位的元素 相对于浏览器窗口进行定位，元素的位置用left top right botttom属性进行规定.
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值，没有定位，元素出现在正常的流中。
inherit 继续父元素的position
7 padding-top 是相对于其邻居， 这句不一定对. 2018-12-1今天做了实验，这句是对的
top是相对于父亲
8 padding-top是百分比时分母是父级的值
top是百分比时，分母是父级纵向高度。
left是百分比时，分母是父级横向高度。
9 定位属性有 position top right bottom left overflow clip vertical-align z-index
有position属性的元素设置z-index才有效。
10 overflow: 性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible.
11 overflow的值有 scroll visible hidden
12 clip:rect(上切 宽 高 左切)
13 img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
14 line-height 文本每一行的高度
