CSS的元素显示模式以及背景

CSS元素显示模式

就是元素（标签）以什么方式进行显示，如<div>自己占一行，比如一行可以放多个<span>。
作用：网页标签很多，不同地方用不同类型的标签，了解他们的特点可以更好地布局我们的网页。
HTML元素一般分为块元素和行内元素两种类型。

块元素

块级元素的特点：

注意：

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

行内元素

行内元素特点：

注意：

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

行内块元素

行内块元素的特点：

元素显示模式总结

显示模式的转换
特殊情况下，需要元素模式的转换。
比如想要增加链接<a>的触发范围。
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;

小工具的使用snipaste
是一个简单但强大的截图工具，可以让你将截图贴回到屏幕上。
常用快捷方式：

单行文字垂直居中
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中。
line-height=height。

CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景颜色、背景图片、背景平铺、背景图片位置、背景头像固定等。
背景颜色
background： transparent;一般情况下北京元素默认值是transparent（透明）。

背景图片
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片。
优点是非常便于控制位置。
background-image

不要拉下url。

背景平铺
在HTML页面上对背景图像进行平铺
用background-repeat


背景图片的位置
background-position

x坐标和y坐标，可以使用方位名词或者精准单位。

1、参数是方位名词

• 如果指定的两个值都是方位名词，则两个值的顺序无关。
• 只指定一个方位名词，另一个值省略，则第二个值默认居中对齐。
  2、参数是精确单位
• 如果参数值是精确坐标，那么x、y不能乱位置。
• 如果只指定一个数值，那么一定是x坐标，另一个默认垂直居中。
  3、参数是混合单位
  精确单位和方位名词混合使用，x、y不能调换位置。

背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随页面其余部分滚动。
后期可以制作视差滚动的效果

背景属性复合写法
简化背景属性的代码，写到同一个background里面
没有特定的书写顺序，习惯顺序为
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
复合前

复合后：

背景颜色半透明

• 最后一个alpha透明度，取值范围在0~1之间。
• 习惯把0.3的0省略掉，写为.3
• 背景色半透明，盒子里面的内容不受影响
• CSS3新增属性，IE9+版本浏览器才支持
• 实际开发不太关注兼容性，可以放心使用

背景总结