前端学习记录7-CSS-标签显示模式,背景样式

• 标签显示模式(display)
• block(块级元素)
• inline(行内元素)
• inline-block(行内块元素)
• 显示模式转换

• background-color(背景颜色)
• background-image(背景图片)
• background-repeat(背景平铺)
• background-position(背景位置)
• background-attachment(背景附着)
• background(背景简写)

标签显示模式(display)

block(块级元素)

在严谨领域内

<p></p>

若出现如下所示的错误
<p>
<div>文字</div>
</p>

浏览器在解析时会把代码解析成
<p>
</p>
<div>文字</div>
<p></p>

因此p标签中不能存放块级元素特别是div
同理h1-h6 dt 中也最好存放其他块级元素 在前端显示不会出现上图错误 但到后台就出问题了

inline(行内元素)

链接标签作为比较特殊的内容
在某一些情况下可以存放块级元素
但是首先要把 a标签转换成为行内块元素

inline-block(行内块元素)

显示模式转换

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

背景样式(background)

background-color(背景颜色)

此样式如同color(文字颜色),属性值均相同,默认值为transparent(透明色)
可使用预设颜色值，也可以使用十六进制颜色值，rgb颜色，rgba颜色

background-color:#333;

background-image(背景图片)

属性值为url(‘地址’),可使用相对定位地址，也可以使用绝对定位地址 默认值为none(无内容)

background-image:url('images/tu.jpg');
这个单引号可加可不加，在sublime里默认添加了单引号，
并且只有加单引号后地址才会高亮显示，
加插件BracketHighlighter后可修改让其在不加单引号也高亮显示。
但是我建议还是加，可以省去不必要的麻烦
别那么死脑筋，也可以用服务器里的地址。

background-repeat(背景平铺)

background-position(背景位置)

必须指定background-image属性

background-attachment(背景附着)

background-attachment:scroll; 	滚动(默认值)
background-attachment:fixed;	固定

这两个在视觉上的区别是 当有滚动条的时候 scroll样式为 设定的背景会随滚动条的移动逐渐消失
而设定为fixed 则不会消失并且一直保持一个样子

background(背景简写)

此样式与font不同，font有明确规范，而background没有
建议样式为:

background:背景颜色 背景图片 背景平铺 背景滚动 背景位置
background:#CCC url('images/tu.jpg') no-repeat scroll center top;
此处的scroll也可以不写 因为是默认的