日常总结(6.17)

1. 标签显示模式（ display ）（重点）

什么是标签的显示模式？

标签以什么方式进行显示，比如 div 自己占一行， 比如 span 一行可以放很多个

作用：

我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。

标签的类型 ( 分类 )

HTML 标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

2.1 块级元素 (block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布 局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（ 1 ）总是从新行开始。

（ 2 ）高度、宽度、行高、外边距以及内边距都可以控制。

（ 3 ）宽度默认是容器的 100% 。

（ 4 ）可以容纳内联元素和其他块元素。

2.2 行内元素 (inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以

设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

行内元素的特点：

（ 1 ）和相邻行内元素在一行上。

（ 2 ）高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直方向的无效。

（ 3 ）默认宽度就是它本身内容的宽度。

（ 4 ）行内元素只能容纳文本或则其他行内元素。（ a 特殊）

2.3 块级元素和行内元素区别

块级元素的特点：

（ 1 ）总是从新行开始。

（ 2 ）高度，行高、外边距以及内边距都可以控制。

（ 3 ）宽度默认是容器的 100% 。

（ 4 ）可以容纳内联元素和其他块元素。

行内元素的特点：

（ 1 ）和相邻行内元素在一行上。

（ 2 ）高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直方向的无效。

（ 3 ）默认宽度就是它本身内容的宽度。

（ 4 ）行内元素只能容纳文本或则其他行内元素。

2.4 行内块元素（ inline-block ）

行内块元素的特点：

（ 1 ）默认宽度就是它本身内容的宽度。

（ 2 ）宽度，高度，行高、外边距以及内边距都可以控制。

2.5  标签显示模式转换 display

块转行内： display:inline;

行内转块： display:block;

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

此阶段，我们只需关心这三个，其他的是我们后面的工作。

2.6 背景总结

属性                                  作用                          值

background-color           背景颜色     预定义的颜色值/ 十六进制 /RGB 代码

background-image         背景图片     url(图片路径 )

background-repeat         是否平铺     repeat/no-repeat/repeat-x/repeat-y

background-position      背景位置    length/position 分别是 x 和 y 坐标， 切记 如果有 精确数值

                                                          单位，则必须按照先 X 后 Y 的写法

background-attachment  背景固定还是滚动   scroll/fixed

背景简写                        更简单           背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们

                                                             没有顺序

背景透明                     让盒子半 透明    background: rgba(0,0,0,0.3); 后面必须是 4 个值

背景缩放                    背景图片的尺寸   长度单位、cover 、 contain