【Html】06-元素转换以及背景样式

元素相互转换

元素的特点

1.显示样式（display）

​ 块级元素：（负责结构）display : block;

​ 常见的块级元素：div p ul ol h1等；

特点：

1. ​ 独占一行

2. ​ 支持宽高：margin padding ；

3. ​ 设置宽度时，默认宽度是父级的100%；

4. ​ 可以容纳其他的任意元素；

5. ​ p标签 不能包裹块级元素。

2.行级标签：（负责内容）：display: inline；

常见的行级标签：span img a i等

特点：

1. ​ 多个行内元素，能够横排显示；

2. ​ 不支持宽高；不支持上下margin，不支持margin：auto；

3. ​ 支持左右padding，内联样式只对自身有效无视块级元素；

4. ​ 行级元素不能包裹块级元素；

5. ​ a标签不能嵌套a标签；

6. ​ a标签可以包裹块级元素；

3.行内块元素：dispaly：inline-block;

特点：

1. ​ 不支持margin：auto；

元素的隐藏

（隐藏元素）

1. ​ display：none；元素消失，不占据位置；

2. ​ visibility：hidden；元素消失，占据位置；

3. ​ opacity：0~1；元素消失，占据位置；（透明度设置：连带内容一起改变样式）

4. ​ display：block；（显示元素）

背景样式

背景颜色

background-color：

背景颜色是延伸到border的下方的

值：

1. （十六进制）;

   background-color:#cff;
   

2. rgb()/rgba();

   background-color:rgba(205,205,205,.5)
   

3. transparent;

   background-color:transparent;
   

背景图片

background-image:

背景图片是延伸到border的下方的

值：

1. none；（默认值）

   background-image:none;
   

2. url();

   background-image:url(img/1.jpg)
   

背景颜色

background-repeat：

值：

1. repeat：重复（默认值）

   background-repeat:repeat;
   

2. no-repeat：不重复

   background-repeat:no-repeat;
   

3. repeat-x：x轴平铺

   background-repeat:repeat-x;
   

4. repeat-y：y轴平铺

   background-repeat:repeat-y;
   

背景图大小

background-size：

值：

1. 数值：width height；（只写一个值 第二个默认为auto）

   background-size: 200px 200px;
   

2. 百分比

   background-size:100% 100%;
   

3. cover（图片等比缩放到刚好覆盖整个背景区域）

   background-size:cover;
   

4. contain（图片等比缩放到刚好有一边与背景相等）

   background-size:contain;
   

背景基点

background-origin

值：

1. content-box（图片的起点从内容开始）

   background-origin:content-box;
   

2. padding-box（默认值）：（图片的起点冲内边距开始）

   background-origin:padding-box;
   

3. border-box：（图片的起点从边框开始）

   background-origin:border-box;
   

背景裁剪区域

background-clip：控制元素背景显示区域

值：

1. content-box:（背景从content区域向外裁剪，超过context区域的背景将被裁剪掉）

   background-clip:content-box;
   

2. padding-box：（背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉）

   background-clip:padding-box
   

3. border-box（默认值）：（背景从border区域向外裁剪，也就是超出部分将被裁剪掉）

   background-clip:border-box;
   

背景图片关联依附

background-attachment：

值：

1. fixed:(背景相对于浏览器视口固定)；

   background-attachment:fixed;
   

2. local（默认值）(背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。)

   background-attachment:local;
   

3. scroll(背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动)

   background-attachment:scroll;
   

背景定位

background-position

值：

使用方位名词时给一个值得时候；另外一个值默认居中；

background-position:100px 100px;

background-position:top left;

背景复合样式

可以同时使用多张背景图片

background: color image repeat position/size

颜色 图片 平铺 定位/大小

overflow样式

值：

1. visible;(溢出内容不会被修剪，会呈现在元素框之外。)

   overflow:visible;
   

2. hidden;(溢出内容会被修剪，并且其余内容是不可见的。)

   overflow:hidden;
   

3. scroll;(溢出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。)

   overflow:scroll;
   

4. auto;(如果溢出内容被修剪，则浏览器会显示滚动条以便查看其余的内容。)

   overflow：auto;
   

---

END