前端知识之CSS

基本概念

继承

继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素

无继承性的属性

1. display
2. 文本属性
   • vertical-align
   • text-decoration
   • text-shadow
   • white-space
   • unicode-bidi
3. 盒子模型的属性

   width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、
   border、 border-style、border-top-style、border-right-style、border-bottom-style、
   border-left-style、
   border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、
   border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、
   border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、
   padding-left
4. 背景属性：

   background、background-color、background-image、background-repeat、background-position、background-attachment
5. 定位属性

   float、clear、position、top、right、bottom、left、min-width、min-height、max-width、
   max-height、overflow、clip、z-index
6. 生成内容属性：content、counter-reset、counter-increment
7. 轮廓样式属性：outline-style、outline-width、outline-color、outline
8. 页面样式属性：size、page-break-before、page-break-after
9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性

1. 字体系列属性

   font：组合字体
   font-family：规定元素的字体系列
   font-weight：设置字体的粗细
   font-size：设置字体的尺寸
   font-style：定义字体的风格
   font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写 字体的字母与其余文本相比，其字体尺寸更小。
   font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
   font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2. 文本系列属性

   text-indent：文本缩进
   text-align：文本水平对齐
   line-height：行高
   word-spacing：增加或减少单词间的空白（即字间隔）
   letter-spacing：增加或减少字符间的空白（字符间距）
   text-transform： 控 制 文 本 大 小 写
   direction：规定文本的书写方向
   color：文本颜色 a元素除外
3. 元素可见性：visibility
4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6. 生成内容属性：quotes
7. 光标属性：cursor
8. 页面样式属性：page、page-break-inside、windows、orphans
9. 声音样式属性

   speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性

1. 元素可见性：visibility
2. 光标属性：cursor

内联元素可以继承的属性

1. 字体系列属性
2. 除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性 text-indent、text-align

行内元素和块级元素什么区别，然后怎么相互转换

块级元素:

1. 总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
2. 高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3. 宽度没有设置时，默认为100%；
4. 块级元素中可以包含块级元素和行内元素。

行内元素:

1. 和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
2. 高度、宽度是不可控的，设置无效，由内容决定。
3. 根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。
使用display属性能够将三者任意转换：

1. display:inline; 转换为行内元素
2. display:block; 转换为块状元素
3. display:inline-block; 转换为行内块状元素

盒模型

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

有两种：W3C盒子模型(标准盒模型，box-sizing: content-box;)、IE盒子模型(怪异盒模型，box-sizing: border-box)

• 标准盒模型：盒子总宽度/高度 = width/height（内容区宽度/高度） + padding + border + margin
• IE盒子模型：盒子总宽度/高度 = width/height = 内容区宽度/高度 + padding + border

JS获取盒模型对应的宽和高

1. dom.style.width/height 只能取到行内样式的宽和高（style 标签中和 link 外链的样式取不到）
2. 获取最终渲染后的宽和高
   • dom.currentStyle.width/height （只有IE兼容）
   • window.getComputedStyle(dom).width/height
   • dom.getBoundingClientRect().width/height 大多浏览器支持,IE9 以支持，
3. dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

BFC

BFC: 块级格式化上下文。
BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。
父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

BFC原理（渲染规则 |布局规则）：

• 内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置
• Box 垂直方向的距离由margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
• 每个元素的margin Box 的左边，与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。 即使存在浮动也是如此；
• BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；
• BFC 的区域不会与 float Box 重叠（清浮动）;
• 计算 BFC 的高度时，浮动元素也参与计算。

CSS在什么情况下会创建出BFC（即脱离文档流）

• 根元素，即 HTML 元素是最大的一个 BFC！
• 浮动（ float 的值不为 none ）
• 绝对定位元素（ position 的值为 absolute 或 fixed ）
• 行内块（ display 为 inline-block ）
• 表格单元（ display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )
• 弹性盒（ display 为 flex 或 inline-flex ）
• 默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）

BFC作用（使用场景）

• 自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
• 避免元素被浮动元素覆盖
• 可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内）
• 去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠

IFC

IFC（inline formatting context）：行内格式化上下文。

• 内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置；
• 这些 Box 之间的水平方向的margin，border 和padding 都有效；
• Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-height 与 vertical-align。

样式优先级

样式类型分为三类:

1. 行间
2. 内联
3. 外部

选择器类型:

1. ID #id
2. class .class
3. 标签 p
4. 通用 *
5. 属性 [type="text"]
6. 伪类 :hover
7. 伪元素 ::first-line
8. 子选择器、相邻选择器

权重计算规则

• 第一等：代表内联样式，如: style=””，权值为1000。
• 第二等：代表ID选择器，如：#content，权值为0100。
• 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。

比较规则

• 选择器都有一个权值，权值越大越优先；
• 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
• 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
• 继承的 CSS 样式不如后来指定的 CSS 样式；
• 在同一组属性设置中标有!important规则的优先级最大
  • !important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
• 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

盒子塌陷

即 本应该在父盒子内部的元素跑到了外部

盒子塌陷的几种解决方法：

1. 最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，
   • 这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面。
   • 缺点是非自适应，浏览器的窗口大小直接影响用户体验。
2. 给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。
3. 给父盒子添加 overflow 属 性 。
   • overflow:auto; 会出现滚动条，可能影响美观
   • overflow:hidden; 可能会带来内容不可见的问题
4. 父盒子里最下方引入清除浮动块
   • <br style="clear:both;"/>
   • 引入了不必要的冗余元素
5. 用after伪元素清除浮动
   • 给外部盒子的after伪元素设置clear属性，再隐藏它.这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。
   • 这也是bootstrap框架采用的清除浮动的方法。
   • 这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决CSS盒子塌陷。
6. 给父盒子添加border
7. 给父盒子设置padding-top

为什么会出现盒子塌陷

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。

css 伪类与伪元素区别

伪类(pseudo-classes)：

• 其核心就是用来选择DOM树之外的信息,不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。
• 比如:hover :active :visited :link :visited :first-child :focus :lang等
• 由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
• 由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪元素(Pseudo-elements)：

• DOM树没有定义的虚拟元素
• 核心就是需要创建通常不存在于文档中的元素，
• 比如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。
• 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。用于将特殊的效果添加到某些选择器

行内元素的margin 和 padding

• 水平方向：水平方向上，都有效；
• 垂直方向：垂直方向上，都无效；（padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）

min-width max-width

1. max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
2. min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候；

min-height和max-height同

浏览器是怎样解析CSS选择器的？

note

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在CSS解析完毕后,需要将解析的结果与DOM Tree的内容一起进行分析建立一棵Render Tree，最终用来进行绘图。在建立Render Tree时(WebKit 中的「Attachment」过程)， 浏览器就要为每个DOM Tree中的元素根据CSS的解析结果(Style Rules)来确定生成怎样的Render Tree。

布局

垂直居中的实现方式

1.绝对定位 + transform

.wrap{
    position:relative;
}
.child{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

2.flex布局

.wrap{
   display:flex;
   justify-content:center;
}
.child{
    align-self:center;
}

3.table布局

.wrap{
   display:table;
   text-align:center;
}
.child{
   background:#ccc;
   display:table-cell;
   vertical-align:middle;
}
.child div{
   width:300px;
   height:150px;
   background:red;
   margin:0 auto;
}

三栏布局(平均分布)

1. flex:1 : 设置父级弹性盒，子盒子三个各占1份
   • flex: 1
2. flex 百分比
   • flex: 0 0 33.3%;
3. 流式布局
   • width: 33.33%

BFC

文档流其实分为定位流、浮动流、普通流三种。
普通流 FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
常见的FC有BFC、IFC，还有GFC和FFC。

BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。 是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元 素。

三种文档流的定位方案

常规流:

• 在常规流中，盒一个接着一个排列
• 在块级格式化上下文里面， 它们竖着排列
• 在行内格式化上下文里面， 它们横着排列
• 当position为static或relative，并且float为none时会触发常规流
• 对于静态定位 position: static，盒的位置是常规流布局里的位置；
• 对于相对定位 position: relative，盒偏移位置由top、bottom、left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

浮动:

• 左浮动元素尽量靠左、靠上，右浮动同理
• 这导致常规流环绕在它的周边，除非设置 clear 属性
• 浮动元素不会影响块级元素的布局
• 但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局
• 最高点不会超过当前行的最高点、它前面的浮动元素的最高点
• 不超过它的包含块，除非元素本身已经比包含块更宽
• 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的

绝对定位:

• 绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
• 它的定位相对于它的包含块
• 如果元素的属性position为absolute或fixed，它是绝对定位元素；
• 对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

属性

清除浮动

清除浮动其实叫做闭合浮动更合适，因为是把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

.wrap {
   clear: both;
}
/*
属性值为left,清除左侧浮动的影响
属性值为right,清除右侧浮动的影响
属性值为both,同时清除左右两侧浮动的影响
*/

清除浮动方法：

1. 给父盒子添加 overflow 属性。
   • overflow:auto; 会出现滚动条，可能影响美观
   • overflow:hidden; 可能会带来内容不可见的问题
2. 父盒子里最下方引入清除浮动块
   • <br style="clear:both;"/>
   • 引入了不必要的冗余元素
3. 用after伪元素清除浮动

   .clearfix::after{
        content: "."; /*尽量不要为空，一般写一个点 */
        height: 0; /*盒子高度为0，看不见*/
        display: block; /*插入伪元素是行内元素，要转化为块级元素*/
        visibility: hidden;
        clear: both;
   }
4. 使用before和after双伪元素清除浮动,完全符合闭合浮动思想的方法。 父元素中加一个类名为clearfix

   .clearfix::before, .clearfix::after {
      content: "";
      display: table;
   }
   .clearfix::after {
       clear: both;
   }
   .clearfix {
       /* 兼容IE6、7  */
       *zoom: 1
   }

padding , margin 百分比单位依据

margin与padding的百分比指定值时，一律参考包含盒的宽度。即所有padding和margin均是相对于块的宽度。

css字体大小设置 em rem px

• px（绝对长度单位）

• em（相对长度单位）

  • 浏览器的默认字体都是16px，那么1em=16px，以此类推计算12px=0.75em，10px=0.625em,2em=32px；
  • 这样使用很复杂，很难很好的与px进行对应,也导致书写、使用、视觉的复杂(0.75em、0.625em全是小数点)；
  • 为了简化font-size的换算，我们在body中写入一下代码

    body {
      font-size: 62.5%; 
    } 
    /* 公式16px*62.5%=10px */
  • 这样页面中1em=10px,1.2em=12px,1.4em=14px,1.6em=16px，使得视觉、使用、书写都得到了极大的帮助。

em缺点

• em的值并不是固定的
• em会继承父级元素的字体大小（参考物是父元素的font-size）所以如果一个设置了font-size:1.2em的元素在另一个设置了font-size:1.2em的元素里，而这个元素又在另一个设置了font-size:1.2em的元素里，那么最后计算的结果是1.2X1.2X1.2=1.728em

• rem（相对长度单位）
  • 浏览器的默认字体都是16px，那么1rem=16px，以此类推计算12px=0.75rem，10px=0.625rem，2rem=32px
  • 这样使用很复杂，很难很好的与px进行对应,也导致书写、使用、视觉的复杂(0.75rem、0.625em 全是小数点)
  • 类似于 em ，为了简化font-size的换算，我们在根元素html中加入font-size: 62.5%; （16px*62.5%=10px）这样页面中1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助；

特点

• rem单位可谓集相对大小和绝对大小的优点于一身
• 和em不同的是rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。
• rem支持IE9及以上，意思是相对于根元素html（网页），不会像em那样，依赖于父元素的字体大小，而造成混乱。使用起来安全了很多。
• 如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

CSS3新特性

边框

border-radius 边框圆角

语法： border-radius : length length;
length： 由浮点数字和单位标识符组成的长度值（如：10px）。不可为负值。第一个值设置其水平半径，第二个值设置其垂直半径，如果第二个值省略则默认第二个值等于第一个值。

border-radius 是4个角的缩写方法。
四个角的表示顺序与border类似按照border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius的顺序来设置：

div{
   border: 1px solid;
   /* 
    如果 / 前后的值都存在，那么 / 前面的值设置其水平半径，/ 后面值设置其垂直半径，
    如果没有 / ，则水平和垂直半径相等 
   */
   border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
   /* 上面写法等价于下面的写法，第一个值是水平半径，第二个值是垂直半径 */
   border-top-left-radius: 10px 20px;
   border-top-right-radius: 15px 30px;
   border-bottom-right-radius: 20px 10px;
}

border-radius 指定不同数量的值遵循对角相等的原则，即指定了值的取指定值，没有指定值的与对角值相等，对角相等模型

边框阴影 box-shadow

语法：box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor
box-shadow:[投影方式] X轴偏移量 Y轴偏移量 模糊半径 阴影扩展半径 阴影颜色

边框图片 border-image

/* border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat */
/* border-image ： none | image [ number | percentage]{1,4} [ / border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2} */

背景

background-size 属性

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以设置背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。可以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

background-origin 属性

规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域，

background-clip 属性

规定背景颜色的绘制区域，区域划分与background-origin 属性相同。

多重背景图片

CSS3 允许为元素设置多个背景图像 background-image: url(1.png), url(2.png);

文本效果

text-shadow 属性

给文本添加阴影，可以设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

text-wrap 属性

设置区域内的自动换行
可选值：

• normal 只在允许的换行点进行换行。
• none 不换行。元素无法容纳的文本会溢出。
• break-word 在任意两个字符间换行。
• suppress 压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

字体

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。 但是通过 CSS3，web 设计师可以使用任意字体。当找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上， 它会在需要时被自动下载到用户的计算机上。字体需要在 CSS3 @font-face 规则中定义。

2D 转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，转换是使元素改变形状、尺寸和位置的一种效果。

transfrom: xxx

translate() 方法

通过 translate(x, y) 方法，元素根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数从其当前位置移动，x为正值向右移动，为负值向左移动；y为正值向下移动，为负值向上移动；

rotate() 方法

控制元素顺时针旋转给定的角度。为正值，元素将顺时针旋转。为负值，元素将逆时针旋转

scale() 方法

根据给定的宽度（X 轴）和高度（Y 轴）参数，控制元素的尺寸的增加、减少。

skew() 方法

根据给定的水平线（X 轴）和垂直线（Y 轴）参数设置元素翻转给定的角度。

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许旋转、缩放、移动以及倾斜元素。

3D 转换

rotateX() 方法

设置元素围绕其 X 轴以给定的度数进行旋转

rotateY() 旋转

设置元素围绕其 Y 轴以给定的度数进行旋转

过渡

transition : transition-property | transition-duration | transition-timing-function | transition-delay;

动画

CSS3 中通过@keyframes 规则来创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式（动画开始前的样式）逐渐改为新样式（需要变到的样式）的动画效果。

• 通过from , to关键字设置动画发生的时间
• 通过百分比设置动画发生的时间

添加到要加动画的选择器上面，使用 animation 属性：
animation 是除了 animation-play-state 属性所有动画属性的简写属性。
语法： animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction

多列

• column-count 属性规定元素应该被分隔的列数。
• column-gap 属性规定列之间的间隔。
• column-rule 属性设置列之间的宽度、样式和颜色规则。

用户界面

• 在 CSS3中 resize 属性设置是否可由用户调整元素尺寸。
• box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
• outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

inline-block 的 div 之间的空隙，原因及解决

display:inline-block 布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性 即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行 符/空格间隙问题”。 如果inline-block元素间有空格或是换行产生了间隙，那是正常的，应该的。

解决方法：

1. display属性改成block
2. 把div中的字体大小设为0
3. 如果是img，修改img的vertical-align属性
4. 移除标签间的空格

<ul>
    <li>这是一个li</li>
    <li>这是另一个li</li>
    <li>这是另另一个li</li>
    <li>这是另另另一个li</li>
</ul>

<!-- 方式二：在标签结束处消除换行符 -->
<ul>
    <li>这是一个li
    </li><li>这是另一个li
    </li><li>这是另另一个li
    </li><li>这是另另另一个li</li>
</ul>

<!-- 方式三：HTML注释标签 -->
<ul>
    <li>这是一个li</li><!--
    --><li>这是另一个li</li><!--
    --><li>这是另另一个li</li><!--
    --><li>这是另另另一个li</li>
</ul>