DAY 7

CSS元素显示模式

元素显示模式就是元素（标签）以什么方式显示。HTML标签一般分为块标签和行内标签两种类型，也称为块元素和标签元素。

块元素

/*常见的块元素有*/
    <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
/*最典型的块元素*/
    <div>

块级元素的特点：

独占一行。
高度、宽度、内外边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内块或者块级元素。

注意事项：

文字类块级元素（比如h1~h6，p）内不能存放块级元素。p标签主要用于存放文字，里面就不能放块级元素，尤其是div。

行内元素

/*常见的行内元素有*/
  <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
/*最典型的行内元素*/
  <span>

行内元素特点：

相邻行内元素在一行上，一行可以显示多个。
宽、高度设置无效。
宽度默认取决于它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意事项：

链接里面不能再放链接。
特殊情况下链接里可以放块级元素，但安全起见最好先给a用display转换成块级模式。

Q:如何转换元素显示模式？

元素显示模式转换display

块级转行内：display:inline;
行内转块级：display:block;
块、行内元素转换为行内块：display: inline-block;

在选择器里选择标签设置disp，可以完成元素模式的转换

a{
   display:inline-block;
   /*将链接转换为行内块模式*/
  }

Q：什么是行内块元素？

行内块元素

行内元素中有几个特殊的标签：img、input、td，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。行内块元素特点：

和相邻行内元素或行内块在一行上，但是元素之间会有空白间隙，一行可以显示多个。（行内元素特点）
宽度默认取决于它本身内容的宽度。（行内元素特点）
高度、宽度、内外边距都可以控制。（块级元素特点）

三种显示模式总结：

CSS背景属性

CSS的背景属性用于控制元素背景色、背景图片等，同时可以设置背景图片的排列方式（平铺、重复等）。

背景颜色

background-color属性用于设置元素的背景颜色，默认取值是transparent（透明）。

body{
   background-color:transparent;
}

h1{
  background-color:#00ff00;
}

背景图片

background-image属性为元素指定背景图像。默认情况下，背景图像放置在元素的左上角，并重复垂直和水平方向。需要注意的是，为防止背景图像不可用，在设置background-image的时候也要设置background-color，使用背景色带代替背景图像。

body 
{
   background-image:url('https://static.runoob.com/images/mix/paper.gif');
   background-color:pink;
}

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要忘记加引号。

背景平铺

background-repeat设置如何平铺背景图像（前提是背景图像比所在容器小）。默认情况下，背景图像将水平和垂直重复，如下图：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景附着

background-attachment属性决定背景图像在元素的内容进行滚动时是应该跟着滚动还是静止在一个固定的位置。默认值是scroll，即跟着元素滚动。另一个取值是fixed，即背景图像固定，可实现水印的效果。

background-attachment : scroll | fixed

背景图片位置

background-position属性可以改变图片在背景中的位置。取值方式有三种：

指定图像左上角距离左边、上边的边距，通常以像素为单位。

backgroun-position: 10px 20px;  /*图像左上角距容器左边距为10px，上边距为20px*/

2.使用水平和垂直方向的百分比来指定位置。

backgroun-position: 100% 100%x; /*图像位于右下角*/

3.使用关键字来描述水平和垂直方向的位置。水平方向上的关键字为：left、center和right，垂直方向上的关键字为top、center和bottom。

backgroun-position: top rigth; /*图像位于右上角，写right top等效*/

注意：如果只设置了一个关键字，那么第二个关键字将默认为center。若想设置图像位于中心，写一个center即可，

背景位置关键字定位方式

背景复合写法

为了简化代码，可以将背景相关属性合并写在一个background属性里。使用简写属性时，没有特定的顺序，可以按照下列习惯约定的顺序：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background: transparent url(image.jpg) repeat-y fixed top ;

CSS基础（3）| 青训营笔记