元素显示和背景调试

什么是元素显示模式

• 如

  自己占一行。比如一行可以放多个

• HTML可以分成块元素和行内元素

• 常见的块元素为

  1. 之中
     是最典型的块元素

  2. < div>独自一行，可以设置宽和长。如果没有设置就和父类一样长，里面可以设置其他的块元素

  3. 注意：像< p>这样的存放文字的，不能放块级元素，特别是不能放< div>

  4. 同理< h1>< h5>里面也不能放块级元素

  5. 行内元素特点：

  6. a、strong、b、em、i 、del 、s 、ins 、u 、span、

  7. 1、相邻行内元素在一行上，一行可以显示多个

  8. 2、高、宽直接设置是无效的

  9. 3、默认宽度就是它本身内容的宽度

  10. 4、行内元素只能容纳文本或其他行内元素

  11. 注意：链接里面不能放链接

  12. 特殊情况下里面可以放块级元素，但给转换一下块级模式最安全

  13. < img />、< input />、< td>这些属于行内块

  14. 元素显示模式转换

  15. 一个模式的元素需要转换成另一种模式和特征

  16. < a>链接的接触范围，将其转换成块元素

  17. 
         
         sdhhsdg
         
      数据的好机会
       
      

  18. display: block；是将行内转成块元素

  19. display: inline；是将块元素转成行内

  20. display: inline-block；是将行内元素其转成行内块

  21. 让文字垂直居中，让行间距等于height

  22. 行高小于盒子高度，文字会偏上

  23. 行高大于盒子高度，文字会偏下

  css背景

  • background-image: none;//表示没有

  • background-repeat：no-repeat；//默认图片都是平铺的，这样设置可以让其不平铺

  • background-repeat：repeat-x；让其x轴平铺,让其y轴平铺

  • 控制背景图片的位置

  • background-position: center top;//让其向上对其
    background-position: right center;//让其向右对其
    background-position: center right;//让其向you对其
    background-position: 50px 20px;//

  • 如果第一个参数一定是y轴的，顶部对齐。第二个参数x轴是水平居中

  • 可以让图片移动准确的位置

  • background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动

  • background-attachment： scroll背景图像是随对象内容滚动
    background-attachment：fixed是背景固定
    font: 12px/15px ;12px为字体大小，15px为行间距
    font: 12px/Microsoft yaHei;

  • CSS三大特性

  • 层叠性、继承性、优先性

  • 样式冲突，遵循就近原则，样式靠近那个就执行那个样式、

  • 最靠近body里面的就执行那一个，