html,css学习笔记

1. 行内块元素图片和行内元素文字对齐问题：和基线有关，因为浏览器会把行内块，行内标签都         当 作文字处理

2. 图片和文字垂直居中 实现方法：加vertical-align：middle；

    vertical-align 行内块和行内垂直方向对齐方式

3. 文字控制属性具有继承性，可以继承给子级，写给父级就行

4. 块级元素 宽度是父级的百分百   比如：p就是块级元素

        行内元素的宽度是由它的内容决定的        span和strong都是行内元素 i标签是行内元素                  伪元素是行内元素

5. a标签元素是行内元素，默认上下内边距跟上下外边距不起作用；

    a标签有默认字体颜色

6. flex布局侧轴默认是拉伸的

7.  input标签搜索框点中后会有黑色的焦点框，解决方法：css中加outline-none：

        outline-none作用：去掉表单控件的焦点框

8. ：：placeholder 选中就是 placeholder 属性文字样式

9. 给父级加了display：flex 子级变成弹性盒子 例如：ul li a 此时给ul加了display：flex li标签变成       弹性盒子，但是li标签里面的a没有变弹性盒子，因为这里面的a的父级是li a标签此时要想加宽高     生效，需要转显示模式，最好是转块级元素

10. 标题加内容样式用 dl标签 dt是标题 dd是内容

11. 多少人数字之类的可以用 i 标签 i 是行内元素，加宽高不生效

12. 相对定位特点： 改变位置的参照物是 自己原来的位置 不脱标，占位 标签显示模式特点 不变

        绝对定位特点： 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，        参照浏览器可视区该位置 脱标，不占位 显示模式特点改变：宽高生效（具备行内块特点）

       固定定位特点： 脱标，不占位 参照物：浏览器的窗口 显示模式特点：具备行内块特点

13. 网页中出现很多小图可以用css精灵实现，还有字体图标

        如果图标是简单，纯色的那就用字体图标来实现。如果图片很复杂，又是多色的，那句用css         精灵实现

14. input标签有默认宽度 设置不了宽度 width：0；重置默认宽度

        浏览器优先生效input标签的默认宽度，所以flex：1 不生效 解决办法：重置input默认宽度         width：0

15. right定位右对齐：如果文字多了，向左撑开，可能盖住其他的内容

        left定位左对齐：如果文字多了，想你右撑开，不会盖住其他的内容

16. flex布局，父级宽度不够，子级被挤小，不想挤小，增大父级尺寸

17. 大背景图，默认状态html和body的宽度是0，所以导致cover缩放背景图不成功。

18. 视口标签，规定HTML的尺寸，让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度

19. vw和vh是相对视口宽高计算结果，可以直接实现移动端适配效果

20. object-fit ：cover； 作用：缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形

21. 固定定位的盒子，宽度靠内容撑开，希望宽度100% 加width：100% 固定定位盒子 脱标，不        占位置