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

标签显示模式(display)block(块级元素)inline(行内元素)inline-block(行内块元素)显示模式转换 背景样式(background)background-color(背景颜色)background-image(背景图片)background-repeat(背景平铺)background-position(背景位置)background-attachment(背景附着)background(背景简写)

标签显示模式(display)

block(块级元素)

常见块级元素特点h1-h6 标题标签独占一行 高度宽度内外边距均可手动控制 宽度默认为容器的100% 作为容器以及盒子 可存放行内或者块元素p 段落标签div 容器ul ol li 列表标签

在严谨领域内<p></p>标签中需要存放的是文字 因此p标签中不能存放块级元素特别是div

若出现如下所示的错误 <p> <div>文字</div> </p> 浏览器在解析时会把代码解析成 <p> </p> <div>文字</div> <p></p>

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

inline(行内元素)

常见行内元素特点a 链接标签一行可显示多个 高宽设置无效 默认宽度为内容宽度 行内元素只能容纳文本或其他行内元素 链接标签内不能再放链接strong 强调标签 b 加粗标签 em 强调斜体标签 i 倾斜标签 del 强调删除标签 s 删除线样式标签 ins 强调下划线标签 u 下划线样式标签 span 容器

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

inline-block(行内块元素)

常见行内块元素特点img 图标标签可以和相邻的元素显示在一行但是会有空白间距一行可显示多个 默认宽度为内容宽度 宽度 高度 行高 内外边距均可以设置input 表单标签 td 表格标签(单元格)

显示模式转换

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(背景平铺)

属性解释repeat(默认值)背景纵向横向均为平铺no-repeat 不平铺(原图)repeat-x 横向平铺repeat-y纵向平铺

background-position(背景位置)

必须指定background-image属性

属性说明x值 y值 (精确单位)例如 10px 20px 写了精确单位 第一个值为X 第二个值为y 只写了一个精确单位 默认该精确单位为X y为center 方位名词 方位名词 (精确单位) 例如 top center 指定了两个方位名词 两个值的前后顺序不影响效果 right top 和top right显示效果是一样的 只写了一个方位名词 另一个默认为center 混合单位 例如 10px center 写为混合单位 x的位置是什么就是什么 同理y也一样

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也可以不写 因为是默认的