背景的属性,元素的显示模式7.25

背景的属性:

1. 背景图像 :url背景图片的路径, bgi;

• background-image: url(./heka.jpg);

1.  background-repeat: no-repeat;

• repeat 默认值 水平和垂直平铺 ;

• no-repeat 不平铺;

• repeat-x 水平方向平铺;

• repeat-y 垂直方向垂直;

1.  background-position: 300px 200px;

• 背景定位<位置> 控制背景图片的位置:

•  1.写方位名词 left right center top bottom  必须要写两个;

          background-position:  right top;

    2.写具体的数值 第一个值是往x轴<水平>的数值 第二个是y轴<垂直>的数值:

          background-position: 200px 100px;

     3.方位名词和数值混用  :

          注意: 第一个词只能写表示水平方向的 第二个词只能写表示垂直方向的;

          注意:如果有的只写一个值 那么另一个值代表的是默认center;

背景连写属性:

• 背景属性连写要求: 尽量按照颜色 ,图片, 平铺, 定位的顺序来写 ,如果不写的话就按默认值处理了;

•              background: #ccc url(./heka.jpg) no-repeat left top;
  

 背景颜色:

•  背景颜色 :默认值是transparent,

• 背景颜色 :背景图片撑不起宽高, 所以要设置宽高;

.box {
            background-color: rgb(128, 47, 47);
            font-size: 30px;
        }

•  用div的话这一行都会有颜色,如果用span的话, 只会选的字上有颜色的;

标签的嵌套规范:

• 块元素里边可以嵌套文字 ,块元素, 行内元素, 行内块元素;
• 注意:p和h1-h6里边不要嵌套块元素,   div里边可以嵌套任意标签;

继承性的特殊情况:

• a标签不会继承父元素的文字颜色;

• h1-h6不会继承父元素的文字大小;

• 子元素会继承父元素的某些样式 font-,text-, color,line-height;

行高的问题:

• 一行文字 :

• 行高和盒子高度相等的时候,这行文字垂直居中;

• 行高>盒子高度的时候,这行文字偏向下显示;

• 行高<盒子高度的时候,这行文字偏向上显示;

元素的水平居中:

• 块元素水平居中 ,设置宽度 ,自己添加margin:0 auto;

<div class="father"></div>
    <p>中国人民</p>

•  文字,行内元素,行内块元素, 给它们水平居中 ,需要给它们父元素设置text-align: center;

• <a href="#">北京</a>
          <input type="text ">

• 元素的显示模式:

1. div块元素 ,input行内元素;

2. 其他模式转块元素 :

3. display: block;

4. 其他模式转行内块元素:

5. display: inline-block;

块元素:

• 常见代表div,p,h1-h6,ul,ol,dl,li,dt,dd,table,form;

1. 特点:独占一行;

2. 块元素不设置宽高的时候 ,默认父元素的宽度, 不设置高度的时候, 默认高度为0,内容会撑开高度;

3. 可以设置宽高 ;

行内元素:

• 常见代表:a,span,em,i,strong,b ,del,s, ins,u;

1. 特点:一行显示多个;

2. 不能设置宽高;

3. 行内元素默认宽高值为零 ,内容会撑开,注意:代码换行会形成缝隙;

行内块元素:

• 常见代表:img,input,button,textarea;

1. 特点:一行可以显示多个;

2. 可以设置宽高;

3. 有默认宽高,代码换行会形成缝隙;

层叠性:

• 样式冲突时侯,后边的样式会把前边的样式覆盖<层叠>掉 就近原则;