css总结

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

什么是标签的显示模式？

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

• 作用：我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。
• 标签的类型(分类)：HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

1.1 块级元素(block-level)

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

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

 块级元素的特点：

1. 总是从新行开始。
2. 高度、宽度、行高、外边距以及内边距都可以控制。
3. 宽度默认是容器的100%。
4. 可以容纳内联元素和其他块元素

 1.2 行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以 设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span>标签最典型的行内元素。

行内元素的特点：

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

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

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

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

注意：

1. 只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他 们都是文字类块级标签，里面不能放其他块级元素。

2. 链接里面不能再放链接。

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

块级元素的特点：

（1）总是从新行开始。

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

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

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

行内元素的特点：

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

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

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

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

1.4 行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />>可以对它们设置宽高和对齐属性，有些资料可能会
称它们为行内块元素。

行内块元素的特点：

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

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

1.5、标签显示模式转换 display

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

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

2.背景样式

2.1背景颜色

属性名	background-color
属性值	合法的颜色的名，比如： red ；十六进制值，比如： #ff0000 ；RGB 值，比如： rgb(255,0,0)
默认值	transparent
描述	设置背景颜色。

如下：

.box {
/* 下面3种写法是等价的 */
background-color: red;
background-color: rgb(255, 0, 0);
background-color: #ff0000;
}

2.2 背景图片

属性名	background-image
属性值	图片所在路径
默认值	none
描述	设置背景图片

如下：

.box {
background-image: url("./cat.jpg");
}

 2.3 图片重复方式

属性名	background-repeat
属性值	repeat | repeat-x | repeat-y | no-repeat
默认值	repeat
描述	设置背景图片

 属性值：

值	描述
repeat	默认，背景图像将在垂直方向和水平方向重复
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

如下：

.box {
/* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}

2.4 CSS精灵技术（sprite) 重点 

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需 要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

我们需要使用CSS的

• background-image
• background-repeat
• background-position属性进行背景定位
• 其中最关键的是使用background-position 属性精确地定位

 精灵技术使用的核心总结

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

1. 精确测量，每个小背景图片的大小和 位置。

2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

2.5 图片附着

属性名	background-attachment
属性值	scroll | fixed
默认值	scroll
描述	设置背景图像是否固定或者随着页面的其余部分滚动

如下：

.box {
/* 背景图随着页面内容滚动 */
background-attachment: scroll;
/* 背景图不会随着页面内容滚动 */
background-attachment: fixed;
}

 2.6 简写属性

属性名	background
属性值	color image repeat attachment position
默认值	每个属性的默认值
描述	设置背景图片是否随内容滚动

如下：

.box {
background: #00ff00 url("index.png") no-repeat fixed center;
}

 2.7 背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

 最后一个参数是alpha 透明度 取值范围 0~1之间

 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

 4.8 背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适 配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我 们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

温馨提示：background-size属性一定要写在background属性后面。

3. 盒子模型（CSS重点)

其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要 学的非常精通。

3.1 看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程， 就是网页布局。

3.2 盒子模型（Box Model）

所谓盒子模型：

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框 （border）、内边距（padding）、实际内容（content）四个属性。

首先，我们来看一张图，来体会下什么是盒子模型。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元 素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大 小和位置。

3.3 盒子边框（border）

语法：

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

                     边框属性—设置边框样式（border-style）

                     边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

  小提示：我们在开发中，经常把表单原本的边框去掉，然后添加任意的样式。（border: 0）