学习CSS2021-07-21

元素显示模式

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

块元素

注意∶
文字类的元素内不能使用块级元素
< p>标签主要用于存放文字，因此< p>里面不能放块级元素，特别是不能放< div>
同理，< h1>~< h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素（内联元素）

< span>标签是最典型的行内元素。

注意∶
链接里面不能再放链接
特殊情况链接< a>里面可以放块级元素，但是给< a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签——< img />、< input />、< td>它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

元素模式总结

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性。比如想要增加链接< a>的触发范围。
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;

单行文字垂直居中的代码

解决方案：行高=盒子高度 height=line-height
行高：上空隙+文字本身高度+下空隙

CSS的背景

背景颜色

background-color:颜色值
一般情况下元素背景颜色默认值是transparent(透明)

背景图片

background-image
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)

背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。
默认是平铺的。

背景图片位置

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
超大背景图片：background-position:center top;

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
超大背景图片：background-position:center top;

参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是×坐标，第二个值是y坐标

背景图像固定（背景附着）

背景图像固定（背景附着）background-attachment
后期可以制作视差滚动的效果

默认是滚动的。

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

背景色半透明