HTML和CSS笔记

1. html标签分类：
   1. 行级标签（display: inline）（可以在一行共同存在，内容决定大小不能改变宽高）：span, a, strong, em, del, 伪元素(::before, ::after) 。
   2. 块级标签（display: block）（独占一行的标签，可以改变宽高）：div, p, ol, ul, li, form 。
   3. 行级块元素（display: inline-block）（内容决定大小但可以改变宽高）：img 。
      display: inline-block 可以触发 bfc。
      css中设置了绝对定位 position: absolute; ，或设置了浮动 float: left/right; 的元素，系统会自动把这个元素变成行级块元素。
       
2. css选择器和写法。（下面答案按优先级排序）
   css选择器的分类和写法：（权重是256进制的）
   1. !important（写在属性对后面），权重 Infinity 。
   2. 行间样式（写在标签内），权重 1000 。
   3. id选择器（ #id ），权重 100。
   4. 类选择器/伪类选择器/属性选择器（ .类名/:hover/[标签属性名] ），权重 10 。
      （伪类选择器见笔记补充第1点）
   5.  元素选择器/伪元素选择器 （ 标签名/::before,::after），权重 1 。
      （伪元素选择器见笔记补充第2点）
   6. 通配符选择器（ * ），权重 0 。
      body, ul, li, p, h1~h6 等很多标签都有默认的margin或padding值（如body的margin默认就是8px），所以写之前一般都要用通配符选择器把默认的margin和padding清0。
      写法是：
      * {

margin: 0px;

padding:0px;

}
 

选择器组合的知识点：

1. 父子选择器（也叫派生选择器）
   写法是多个选择器中间加空格。如：div span 。不一定是标签选择器，任何选择器都可以，只要他们有父子关系。
   直接父子选择器的写法是两个选择器中间加大于符号 >  。如：div>span 。
   父子选择器在系统内部是从右往左遍历的，因为这样效率高。
2. 并列选择器
   写法是多个选择器直接写在一起，中间不加空格。如：div.demo 。标签一般写在前面。
   并列选择器可以在父子选择器中使用。
3. 分组选择器
   写法是多个选择器中间加逗号。如：div, p 。表示div和p都应用这个样式。
    
4. css权重计算方法：
   在一行的直接把权重加起来，不管是什么父子还是并列。
   权重值一样的，谁在后面显示谁的，因为后面的把前面的覆盖了。
   Infinity是一个定量，所以 Infinity+1 比 Infinity 权重值更大。
   
    

 

1. 字体相关属性：
   1. 字号（字体大小）：font-size 。这个设置的是字体的高。
   2. 字宽：font-weight 。
   3. 字样式：font-style 。如：font-style: italic; 就表示斜体，也是em标签的系统写法。
   4. 字体：font-family 。如：font-style: arial; 表示用arial字体。
   5. 字体颜色：color 。
   6. 对齐属性：text-align 。
   7. 文本行高：line-height 。
   8. 文本缩进：text-indent 。如：text-indent: 2em; 表示首行缩进两字符。
   9. 文本装饰样式：text-decoration 。它有 line-through, under-line, overline, none 这四个值，分别表示 删除线，下划线，上划线，清除文本的线。
      如给a标签设置 text-decoration: none 表示清除a标签链接的下划线。
2. 单行文本水平，垂直都居中
   如淘宝和百度的搜索键中的字。
   写法：
   1. 水平居中：text-align: center;  。
   2. 垂直居中：line-height: height值; 。如：line-height: 50px; 。
      
       
3. 颜色
   写法：
   1. 英语单词式：color: red; 。
   2. 颜色代码：color: #ff0000; 或 color: #f00; 。
   3. 颜色函数：color: rgb(255, 0, 0) 。

4. 颜色知识的补充：

5. 透明色： color: transparent; 。
6. 三个颜色是 红，绿，蓝。
7. #000是黑色，#fff是白色。
8. 透明度：opacity属性。如： opacity: 0.5; 表示半透明。用这个属性可以看到底层的元素。
   
    
9. border 边框属性
   1. border 是一个复合属性，如：border: 1px solid red; 。
      它的三个子属性分别是 border-width, border-style, border-color 。
   2. 有关border还有一个 border-radius 属性，可以使边框变成圆角，值是百分比。如果值是 50% ，则表示圆环边框。
   3. border可以单独设置每个边。如：border-left: 2px solid black; 。
   4. 不同边的border的交界处是一条斜线。
      利用这个知识点，可以完成画三角行的题目。
      如：画一个红色三角形：
      html代码：<div></div>
      css代码：
      div {

10. width: 0px;

    height: 0px;

    border: 100px solid transparent;

    border-left: 100px solid red;

    }
     

11. 盒模型
    1. 盒模型的样子：
13. 盒子的组成，由四部分组成：
    1. 外边距 margin 。
    2. 边框 border 。
    3. 内边距 padding 。
    4. 内容： width+height 。
14. 对盒子属性值写法的补充：
    1. margin, border, padding 这些属性都是复合属性。
       写一个值代表了上下左右四个方向的统一值。如：padding: 2px; 。
    2. 写四个值表示可以按 顺时针 上右下左 的顺序写四个方向的值。如：padding: 2px 5px 7px 9px; 。
    3. 这些属性还可以写两个值，第一个值表示 上下 的值，第二个值表示 左右 的值。如： padding: 5px 10px; 。
    4. 这些属性还可也写三个值，第一个值表示 上 的值，第二个值表示 左右 的值，第三个值表示 下 的值。如：padding: 3px 5px 10px; 。
    5. 这些属性可以写负值。表示向相反方向移动多少。
15. 面试常考：求可视区域的宽高。一般margin都是看不到的所以不算，margin, border, padding 都要记得分左右和上下（所以一般都要加两次）。
    
     
16. 层模型position
    1. position的几个值：（position都是和 top/right/bottom/left 搭配使用）
       1. position: static; 默认值。
       2. position: absolute; 绝对定位。

17. 特点是：

18. 脱离原来位置进行定位。（但只有写了 top/right/bottom/left 值，并且绝对定位了，它才会脱离原来位置。如果只写绝对定位，则不会动）
19. 相对于最近的有定位的父级定位，没有则相对于文档定位。
20. 绝对定位的元素单独的去了一层，视觉上可以覆盖该坐标的其他层的元素。同时自己原本的位置也没有了，会被后面的元素顶掉。
21. position: relative; 相对定位。
    特点是：
    1. 保留原来位置进行定位。
    2. 相对于原来的位置进行定位。
    3. 相对定位的元素也是单独去了一层，视觉上可以覆盖该坐标的其他层的元素。但自己原本的位置还在。
22. position: fixed; 广告定位。
    特点是：
    1. 不管怎么滚动页面，内容都会一直显示在那个地方。（如淘宝的右侧的 回到顶部 按钮。）
23. 层属性：z-index。
    这个属性只能放在有定位属性元素里面。
    它的值可以是：0,1,2,3等，代表这个元素在第几层。
    值越大越优先显示。没有定位的层数都是 0 。
24. 浮动模型float
    1. float就两个值 left/right 。表示 从左到右排元素 或 从右到左排元素。（float属性是写在要排列的子元素上的）
    2. float属性会产生浮动流。
    3. 浮动流指的是有浮动属性的元素，块级元素看不到他们(只有块级元素看不到)，会把他们的位置顶掉。浮动的元素并没有去其他层，只是块级元素看不到他们了。
    4. 浮动流典型问题：有浮动属性的子元素，父元素div无法包住他们。
    5. 浮动流问题的解决方法：
       1. 用伪元素选择器清除浮动。（最常用）
          清除浮动流三件套：
          父级选择器::after {

25. content: "";

    display: block;

    clear: both;

    }

26. 触发bfc
     
27.  
28. 实际编程中都是用relative作为参照物，用absolute定位。因为如果用absolute做定位，原来的位置没了，页面一下就乱了。其次，absolute可以很轻松改变定位的父级。
29. 一个实例：做一个一直显示在页面中间的框，滚动条滚动也会在中间显示。（代码见笔记补充第 3 点）