元素显示和背景调试

什么是元素显示模式

如<div>自己占一行。比如一行可以放多个<span>
HTML可以分成块元素和行内元素
常见的块元素为<h1><p><div><ul><ol><li>之中<div>是最典型的块元素
< div>独自一行，可以设置宽和长。如果没有设置就和父类一样长，里面可以设置其他的块元素
注意：像< p>这样的存放文字的，不能放块级元素，特别是不能放< div>
同理< h1>< h5>里面也不能放块级元素
行内元素特点：
a、strong、b、em、i 、del 、s 、ins 、u 、span、
1、相邻行内元素在一行上，一行可以显示多个
2、高、宽直接设置是无效的
3、默认宽度就是它本身内容的宽度
4、行内元素只能容纳文本或其他行内元素
注意：链接里面不能放链接
特殊情况下<a>里面可以放块级元素，但给<a>转换一下块级模式最安全
< img />、< input />、< td>这些属于行内块
元素显示模式转换
一个模式的元素需要转换成另一种模式和特征
< a>链接的接触范围，将其转换成块元素

css 复制代码

<style>
       a {
           width: 34px;
           height: 34px;
           display: block;
           background-color: skyblue;
       }
   </style>
   <body>
   <a href="#">sdhhsdg</a>
   <div>数据的好机会</div>
 
</body>

display: block；是将行内转成块元素
display: inline；是将块元素转成行内
display: inline-block；是将行内元素其转成行内块
让文字垂直居中，让行间距等于height
行高小于盒子高度，文字会偏上
行高大于盒子高度，文字会偏下

css背景

css 复制代码

<style>
    div {
    background-image: url(地址);
    }
</style>
<body>
    <div></div>
</body>

background-image: none;//表示没有
background-repeat：no-repeat；//默认图片都是平铺的，这样设置可以让其不平铺
background-repeat：repeat-x；让其x轴平铺,让其y轴平铺
控制背景图片的位置

css 复制代码

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

如果第一个参数一定是y轴的，顶部对齐。第二个参数x轴是水平居中
可以让图片移动准确的位置
background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动

css 复制代码

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

复制代码

CSS三大特性
层叠性、继承性、优先性
样式冲突，遵循就近原则，样式靠近那个就执行那个样式、
最靠近body里面的就执行那一个，