前端学习记录7-CSS-标签显示模式,背景样式
标签显示模式(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也可以不写 因为是默认的