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

看到 http://www.w3school.com.cn/css/css_text.asp 后面还没看

 

第二部分 框模型

从http://www.w3school.com.cn/css/css_boxmodel.asp开始看 ，看完框模型

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 文本每一行的高度