CSS入门到进阶知识总结

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

一、CSS样式的使用

1.三种样式

1. 内联样式
	 * 在标签内使用style属性指定css代码
	 * 如：<div style="color:red;">hello css</div>
2. 内部样式
	* 在head标签内，定义style标签，style标签的标签体内容就是css代码
	* 如：
		<style>
	        div{
	            color:blue;
	        }
	
	    </style>
		<div>hello css</div>
3. 外部样式
	1. 定义css资源文件。
	2. 在head标签内，定义link标签，引入外部的资源文件
	* 如：
		* a.css文件：
			div{
			    color:green;
			}
		<link rel="stylesheet" href="css/a.css">
		<div>hello css</div>
		<div>hello css</div>

* 注意：
	* 1,2,3种方式 css作用范围越来越大
	* 1方式不常用，后期常用2,3
	* 3种格式可以写为：
		<style>
	        @import "css/a.css";
	    </style>

二、选择器分类

选择器分为基础选择器和复合选择器两个大类

1. 基础选择器

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

1.标签选择器

语法：

标签名{
    
    
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}

优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式，只能选择全部的当前标签。

2. 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
语法：

.类名 {
    
    
	属性1: 属性值1;
	...
}

注：我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签.
如：

<div class="red font20">亚瑟</div>

多类名应用场景：

(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便

3. id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
语法：

#id名 {
    
    
	属性1: 属性值1;
	...
}

注意：id 属性只能在每个 HTML 文档中出现一次。

id 选择器和类选择器的区别

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

4. 通配符选择器

在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
语法:

* {
    
    
	属性1: 属性值1;
	...
}

注:

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，如清除所有的元素标签的内外边距

 * {
    
    
	margin: 0;
	padding: 0;
}

基础选择器总结

在这里插入图片描述

2. 复合选择器

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1. 后代选择器 (☆)

语法:

元素1 元素2 {
    
    
		样式声明
		}

表示选择元素 1 里面的所有元素 2 (后代元素)。
注意:

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

2. 子代选择器

语法:

元素1 > 元素2 {
    
     样式声明 }

表示选择元素1 里面的所有直接后代(子元素) 元素2。

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

3. 并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
语法:

元素1,元素2 {
    
     样式声明 }

表示选择元素1 和元素2。
注:

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声

4. 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
如:①连接伪类选择器:链接伪类选择器link,:visited,:hover,:active。

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
    
    
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

②:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说.
如:

input:focus {
    
    
	background-color:yellow;
}

复合选择器总结

在这里插入图片描述

三、CSS属性

1. 字体属性

     font-size：字体大小
     font-family:字体
     font-weight:  粗细 nromal(默认值,不加粗的,400)/bold(加粗的,700)/ 100-900  
     font-style:字体样式  italic:倾斜, normal:正常

字体复合属性

body {
    
    
	font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

2. 文本属性

	color：文本颜色2
		属性值:RGB,十六进制,英文颜色
	text-align：置元素内文本内容的水平对齐方式。
		属性值:left,right,center
	text-decoration :规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
		属性值:none  默认,没有装饰线; underline: 下划线; overline: 上划线;  line-through: 删除线.
	text-indent : 用来指定文本的第一行的缩进，通常是将段落的首行缩进。
	line-height：用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

注:

text-indent的使用

//使用px
div {
    
    
	text-indent: 10px;
}
//使用em  通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
p {
    
    
	text-indent: 2em;
}
//em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元
素的 1 个文字大小。

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p {
    
    
	line-height: 26px;
}

图解:
在这里插入图片描述

3. 背景样式

background-color:颜色值;  默认为transparent
background-image : none | url (url)
background-repeat: repeat | no-repeat | repeat-x | repeat-y 
	背景平铺:在纵向和横向平铺,不平铺,在横向上平铺,在纵向上平铺.
background-position: x y;
	参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词(top/center/bottom/left/right) 或者 精确单位(像素/百分数)
background-attachment : scroll | fixed
	背景图像是否固定或者随着页面的其余部分滚动。
背景色复合写法:
background: transparent url(image.jpg) repeat-y fixed top ;
			背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: rgba(0, 0, 0, 0.3); 背景颜色半透明
	* 最后一个参数是 alpha 透明度，取值范围在 0~1之间
	* 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
	* 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

注意:

页面元素既可以添加背景颜色也可以添加背景图片,只不过背景图片会压住背景颜色.

四、CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如<‘div’>自己占一行，比如一行可以放多个 span。
HTML 元素一般分为块元素和行内元素两种类型。

1. 块状元素

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

特点:

① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
⑤ 高度由子元素撑开
注意:

 1. 文字类的元素内不能使用块级元素
 2. <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
 3. 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2. 行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等.
其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意:
链接里面不能再放链接
特殊情况链接 <‘a’> 里面可以放块级元素，但是给 <‘a’> 转换一下块级模式最安全
行内元素是否可以设置padding和margin?
1.inline元素设置width,height无效
2.inline元素的padding和margin可以设置.但padding垂直方向上padding-top,padding-bottom会合并;margin垂直方向上无效;
综上incline元素水平方向上的padding和margin有效.

3. 行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

4. 元素显示模式总结

在这里插入图片描述
注意:

特殊:p元素内不能放div元素

特殊:a元素里面可以放块状元素

text-align:center仅对行内元素或行内块元素有效.但对p也有效.

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素

5. 元素的显示模式转换

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

6. 一个妙用—单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.
解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
在这里插入图片描述
简单理解: 行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下

五、盒子模型

页面布局要学习三大核心, 盒子模型, 浮动和定位
网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容.
网页布局的核心本质：就是利用 CSS 摆盒子。

1. 盒子模型组成

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容.
在这里插入图片描述

边框（border）

border : border-width || border-style || border-color
			宽度 样式 颜色
border-collapse:collapse; 表示相邻边框合并在一起

border-style 可以设置如下值

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

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

测量盒子大小的时候,不量边框.

如果测量的时候包含了边框,则需要 width/height 减去边框宽度

内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。

padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距

padding 属性（简写属性）可以有一到四个值。
在这里插入图片描述
当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
虽然padding内边距可以撑开盒子,我们可以做非常巧妙的运用.

因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适.

外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
margin 简写方式代表的意义跟 padding 完全一致。

典型应用:
外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

2.外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
在这里插入图片描述
解决方案：
尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。在这里插入图片描述
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题.可以参考的博客.

3. 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
    
    
	padding:0; /* 清除内边距 */
	margin:0; /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。如果想要设置转换为块级和行内块元素就可以了

4. 圆角边框

CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法:

border-radius:length;

注意:

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%(如果想要设置一个半圆,直接设置两个50%就行)
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

5. 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：

box-shadow: h-shadow v-shadow blur spread color inset;

在这里插入图片描述
注:

默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
盒子阴影不占用空间，不会影响其他盒子排列。

6. 文字阴影

CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：

text-shadow: h-shadow v-shadow blur color;

在这里插入图片描述

六、浮动

1. 传统网页布局的三种方式

网页布局的本质——用 CSS 来摆放盒子。把盒子摆放到相应位置
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

普通流（标准流）
浮动
定位

标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列.

块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。

2. 浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
语法:

选择器 {
    
     float: 属性值; }
     属性值:none,left,right

3. 浮动特性

浮动元素会脱离标准流(脱标)
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性.

4.浮动布局注意点

浮动布局注意点

浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余的兄弟元素也要浮动。即一浮全浮
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
举例:
当第一个盒子不浮动,第二个浮动,第三个不浮动,则第二个会压住第三个.
当第一个盒子浮动,第二个不浮动,第三个浮动,则第一个会压住第二个,第三个会在第二个下面排列

5.清除浮动

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
语法:

选择器{
    
    clear:属性值;}
    属性值:left,right,both;

我们实际工作中，几乎只用 clear: both;
方法:

额外标签法也称为隔墙法，是 W3C 推荐的做法。

父级添加 overflow 属性

父级添加after伪元素

父级添加双伪元素

额外标签法

在浮动元素末尾添加一个空的标签。例如

 <div style=”clear:both”></div>，或者其他标签（如<br />等）。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差,所以不建议使用
注意：要求这个新的空标签必须是块级元素。

父级添加 overflow

可以给父级添加 overflow 属性,将其属性值设置hidden、 auto 或 scroll 。
子不教,父之过,注意是给父元素添加代码

优点：代码简洁
缺点：无法显示溢出的部分

:after 伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加

.clearfix:after {
    
    
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
    
     /* IE6、7 专有 */
*zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

双伪元素清除浮动

也是给给父元素添加

.clearfix:before,.clearfix:after {
    
    
content:"";
display:table;
}
.clearfix:after {
    
    
clear:both;
}
.clearfix {
    
    
*zoom:1;
}

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

七、定位

定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

1. 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。这四个属性仅存在于定位当中

2. 四种定位模式

静态定位 static（了解）

语法：

选择器 {
    
     position: static; }

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

相对定位 relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：

选择器 {
    
     position: relative; }

相对定位的特点：（☆）

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

绝对定位 absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
语法：

选择器 {
    
     position: absolute; }

绝对定位的特点：（☆）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）
所以绝对定位是脱离标准流的.
子绝父相 :子级是绝对定位的话，父级要用相对定位

固定定位 fixed （☆）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：

选择器 {
    
     position: fixed; }

固定定位的特点：（☆）

以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
固定定位不在占有原先的位置

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。它的定位是相对于浏览器窗口的.

3. 元素的显示与隐藏

display 属性

display 属性用于设置一个元素应如何显示。

display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。

visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用 visibility：hidden
如果隐藏元素不想要原来位置，就用 display：none

overflow 溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
在这里插入图片描述
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

八、 CSS高级技巧

1.CSS 用户界面样式

更改用户的鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

li {
    
    cursor: pointer; }

在这里插入图片描述

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {
    
    outline: none; }

防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的2

textarea{
    
     resize: none;}

2.vertical-align 属性应用

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：

vertical-align : baseline | top | middle | bottom

在这里插入图片描述

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：

给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）
把图片转换为块级元素 display: block;

3. 溢出的文字省略号显示

单行文本溢出显示省略号–必须满足三个条件

/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)

4.常见布局技巧

margin负值运用
文字围绕浮动元素
行内块巧妙运用:做网页低端的换页方格.