背景以及元素类型

一、和背景相关的样式

1.背景的颜色background-color

2.背景图片background-image

    当盒子与图片相等---正好显示
    当盒子比图片大---会平铺
    当盒子比图片小---会裁切（显示不全）

3.背景图片的平铺规则background-repeat

    repeat---平铺，默认值
    repeat-x---横向平铺
    repeat-y---纵向平铺
    no-repeat---不平铺

4.背景图片的位置background-position

    1.写方位名词（left、right、top、bottom、center）
    2.写具体的坐标点
        左上角为(0,0)
        x轴：向右为正
        y轴：向下为正

5.背景图片的固定（了解）

    背景图片的固定background-attachment
    fixed===固定，图片永远固定在这个位置，不会随着浏览器滚走
    scroll===滚动，图片会随着浏览器滚走

简写方式：background:值1 值2;

背景简写再做赋值的时候没有书写顺序

二、省略号的制作

1.加宽度
2.让文字不要自动换行white-space: nowrap;
3.让超出的部分隐藏overflow: hidden;
4.显示省略号 text-overflow: ellipsis;

三、overflow的值

overflow: visible;====超出的部分依然是可见的，默认值
overflow: hidden;===超出的部分隐藏掉（常用）
overflow:scroll:不管内容有没有超出，滚动区域一直存在
overflow：auto:只有当内容超出的时候才会产生滚动区域（推荐，常用）

四、元素类型

1.块元素block

        特点：
            1）独占一行，纵向排列
            2）能设置宽高
            3)一般块元素都作为容器使用，大多情况下可以用来划分布局
        常见标签：div、p、h1-h6、ul、ol、li、dl、dt、dd、hr、form

2.行内元素inline

      特点：
          1）横向排列
          2）不能设置宽高
          3）有时候上下的内外间距‘有可能’加不上。
      常见标签：span、a、b、strong、i、em、u、s、del、sup、sub

3.行内块元素inline-block

      特点：
          1）横向排列
          2）能设置宽高
          3)行内块标签本身自带3-5px的间距（这个间距不是内外间距造成的）
      常见标签：img、input

五、元素类型的转换

display:block;=====转成块元素
display:inline;====转成行内元素
display:inline-block;=====转成行内块

六、元素的显示和隐藏

隐藏：display:none;（元素隐藏之后不占据位置）
显示：只要让display的值不为none即可，推荐写block

七、vertical-align

    vertical-align===调整元素的垂直对齐方式的
		⽤这个属性的前提是：元素类型必须是⾏内块元素（inline-block）

	vertical-align属性的值
   	 	top：顶线对⻬
    	middle：中线对⻬
    	baseline：基线对⻬=====默认值
    	bottom：底线对⻬

	行内块元素为什么带有3-5px的间距？
		因为行内块元素默认和基线对齐
		
	如何解决3-5px间距的问题呢？
    	1.让vertical-align的值不为baseline即可。
   	 	2.浮动
    	3.让盒子的字号调整为0px