小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

CSS基础篇_margin-left:auto

作者：小小林熬夜学编程 | 2024-05-27 09:36:18

踩

margin-left:auto

一、CSS的代码风格

1、规范化

a、紧凑模式

h3 {color :deeppink;font-size:20px;}

b、展开模式


h3 {
  color:pink;
  font-size:20px;
}

c、空格规范

（1）属性值前面，冒号后面，保留一个空格。

（2）选择器（标签）和后面大括号中间保留空格。

2、选择器

a、选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器

基础选择器是由单个选择器组成的
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器。

（一）、标签选择器：

是指用html标签作为选择器，并且使页面中同一选择器指定CSS的样式

（1）语法：


标签名{
  属性1：属性值1；
  属性2：属性值2；
  属性3：属性值3
}

（2）优点：能快速为页面中同类的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前的标签

（二）、类选择器

（1） class


.red{
  color:red;
  }

<p class="red">变红色</P>

不要用纯数字、中文等命名，命名要有目的，使别人一目了然。

(2)多类名使用方式

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

A、多类选择器的格式

a、在标签class属性中写多个类名

b、多个类名中间必须用空格隔开

c、这个标签就可以分别具有这些类名的样式

B、多类名开发中使用场景

a、可以把一些标签元素相同的样式（共同部分）放到一个类里面

b、这些标签里面都可以调用这个公用的类，然后再调用自己独有的类。

c、从而节省了CSS代码，统一修改也非常方便。

（三）id选择器

只调用一次，被人切勿使用，样式：#定义


 <style>
    #ludan{
      color:pink;
    }
  </style> 
   
 
<body>
<h1 id="ludan">xiange1</h1>
</body>

A、id选择器与类选择器的区别

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

（四）、通配符选择器

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

语法：


*{
属性1：属性值1
}

通配选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后期讲）

（五）、总结

3、字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

font-family定义文本字体系列


 p{ font-family: "微软雅黑";}
    div{font-famil:Arial,"Microsoft YaHei","微软雅黑";}

各种字体之间必须使用英文状态的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带的字体，保证在任何用户的浏览器都能正确显示
最常见的几个字体：div{font-famil:Arial,"Microsoft YaHei",tohoma，arial，‘Hiragino Sans GB’;}

字体粗细


p{
     font-weight: bold;
   }

文本样式


 p{
     font-style:normal;
   }

字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码


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

使用font属性时，必须按上面语法格式的顺序书写，不能更换顺序，并且各个属性之间以空格隔开

不需要设置的属性可以省略（取默认值）但必须保留font-size和font-family属性，否则font属性不起作用

CSS文本属性

可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色color


  p{
     color:red
   }

对齐文本


div{
   text-align:center;
 }

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。


div{
   text-decoration:underline;
 }

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线（不常见)

文本缩进

text-indent属性用来文本的一行的缩进，通常是将段落的首行缩进。


  <style>
 div{
   text-index:10 px;
 }
  </style>

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。


 <style>
 div{
   text-index:2 em;
 }
  </style>

em是一个相对单位，就是当前元素（font-sie）1个文字的大小。

行间距

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

文本属性的总结

css的引入方式

内部样式表


<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
 div{
   text-index:2 em;
 }
  </style>
</head>

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定的CSS样式。适合于修改简单的样式。


<body>
<h1 style="color:red;font-size:12px">xiange1</h1>
 
</body>

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到css文件中，之后html引入css文件

在html用<link>标签引入。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="we2.css">
</head>

总结

Emment语法

快速度格式化代码

Vscode 快速格式化代码：shift+alt+f

也可以设置当我们报存页面的时候自动格式化代码

只需要设置一次，以后就都可以用。

CSS的复合选择器

1、后代选择器

2、子选择器

3、并集选择器

4、链接伪类选择器

注意事项：

1)为了确保生效，请按照LVHA的顺序声明：link-：visited-:hover-：active

2）记忆法：连看复活

5、：focus 伪类选择器

：focus 伪类选择器用于选取获得焦点的表单

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也要针对表单元素来说。

6、复合选择器的总结

CSS的元素显示模式、

块元素、行元素

元素显示模式的分类

1、块元素

最常见的块元素有<h1>、<p>、<div>、<ul>、<li>

块元素的特点：

（1）比较霸道，独占一行

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

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

（4）是一个容器及盒子里面可以放行或者块元素。

注意：

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

行内元素

特点：

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是<a>转换一下块级模式最安全。

行内块元素

在行内元素中有几个特殊的标签------<img/>、<input>、<td>,它们同时具有块元素和行内元素的特点

行内块元素的特点：

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

总结

元素显示模式的相互转换

方法

转化为块元素：display：block
转化为行内元素：display：inline；
转化为行内块元素：display：inline-block

单行文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

CSS的背景

背景可以设置背景以背景颜色，背景图片地址，背景平铺，背景图像滚动、背景图片位置（一般顺序也为这个）等

背景颜色

background-color属性定义了元素的背景颜色

background-color：颜色

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰的小图片或者超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

background-image：none|url（url）

背景图片平铺

不平铺

background-repeat:no-repeat;

平铺

background-repeat:repeat;

沿着x轴平铺

background-repeat:repeat-x;

沿着y轴平铺

background-repeat:repeat-y;

背景图片位置

利用background-position属性可以改变图片在背景中的位置

backgroun-position：x y；

参数代表：x坐标和y坐标。可以使用方位名词或者精确单位

参数是方位名词

如果指定的两个值都是方位名词，则两个值的前后顺序无关，比如left top和top left
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数是精确单位

如果参数是精确坐标，那么第一个肯定是x坐标，第二个是y坐标
如果指定一个数值，那么数值一定是x坐标，另一个默认垂直居中

参数是混合的单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment后期可以制作视差滚动的效果

background-attchment：scroll | fixed

背景色半透明

总结

css的三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性的主要解决样式冲突的问题

层叠性的原则：

样式冲突：遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

继承性

css中的继承：子标签就会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

行高的继承性

dody{

font:12px/1.4 Microsoft YaHei;

}

行高可以跟单位也可以不单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是当前元素的文字大小*1.5
body行高1.5这样写法最大优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

css盒子模型

所谓的盒子模型就是把html页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

boder：边框

content：内容

padding：内边距

margin：外边距

border（边框）

边框的概念

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法

border：border-weith|| border-style|| border-color

border-weith:边框的宽度

border-style：边框的样式（ solid：实线边框； dashed：虚线边框；dotted：点线边框）

border-color：边框的颜色

边框的复合写法

css边框属性允许你指定一个元素边框的样式和颜色

边框简写：

border：1px solid pink；（没有顺序)

边框的分开写法：

borrder-top：1px solid pink；//上边框

border-bottom：1px solid red；//下边框

border-left：1px solid pink；//左边框

border-right：1px solid pink；//右边框

盒子为200*200，上边框为红色，其余为蓝色


 <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            border-top: 1px solid red;
        }
    </style>

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框

语法：

border-collapse：collapse;

collapse:单词是合并的意思
border-collapse：collapse （合并相邻的边框）

边框会影响盒子的实际大小

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

1、测量盒子大小的时候，不量边框

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

内边距（padding）

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

注：内边框也会影响盒子的大小

解决方案：

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

案例：

效果图：

代码：


  <style>
        .nav {
            border-top: 3px solid #ff850f;
            height: 41px;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
        }
        
        .nav a {
            font-size: 12px;
            display: inline-block;
            height: 21px;
            padding: 10px 20px;
            color: #4c4c4c;
            text-decoration: none;
        }
        
        .nav a:hover {
            background-color: #edeef0;
        }
    </style>
</head>
 
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪客户端</a>
        <a href="#">我的</a>
        <a href="#">关注我</a>
    </div>
</body>

如果一个盒子没有给定宽度/高度或者继承满父亲的宽度/高度，则padding 不会影响本盒子大小。

外边距（margin）

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

外边距典型应用

外边距可以让盒子模型水平居中，但是需要两个条件：

（1）盒子必须指定了宽度（width）

（2）盒子左右的外边距都设置为：auto(auto的意思是自动）

.header{width:960px;margin:0 auto;}

常见的写法，以下三种都可以：

margin-left：auto；margin-right：auto
margin:auto;
margin:0 auto;

注：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加

text-aligin即可

外边距合并

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

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

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的比较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。

解决方案：

定义为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow-hidden

清除内外边距

圆角边框（重点）

语法

boder-radius:10px;

radius:半径（圆的半径）原理：椭圆与边框的交集形成圆角的效果；

若要设置成圆形，则要设置boder-radius的length为正方形宽度的一半。也可以设置成百分比 50%
设置成圆角矩形：设置为高度的一半
该属性是一个可以简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。分别写开为：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

盒子阴影

顺序不能更换

语法

box-shadow：h-shadow v-shadow blur spre color insert；

文字阴影

浮动

网页的三种布局方式

标准流（普通流、文档流）：就是标签默认规定排列方式
浮动：可以改变标签默认的排序方式。
定位：

浮动的典型应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

第二准则：先设置盒子大小，之后设置盒子的位置。

浮动的概念

float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

语法：

选择器{float：属性值；}

浮动的特性：

1.浮动元素会脱离标准流（脱标）

脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
浮动的盒子不再保留原先的位置。

2.浮动元素会一行内显示并且元素顶部对齐。

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注：

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3.浮动的元素会具有行内块元素的特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素的相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小由内容决定。
浮动的盒子中间是没有缝隙的，是紧挨在一起的
行内元素同理。

浮动

1、浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的政策是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

2、常见的网页布局

清除浮动

1、为什么要清除浮动

由于父盒子很多情况下，不方便给高度，但是子盒子的浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的的元素排版产生影响。

2、清除浮动

语法：

选择器{clear：属性值；}

我们在实际工作中，几乎只用clear：both；

清除浮动的策略是：闭合浮动。

清除浮动的方法

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

额外标签会在浮动元素末尾添加一个空标签。例如<div style="clear.both"></div>,或者其他标签（如<br/>等）

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化比较差。

这个新标签必须是块级元素

总结：

清除浮动的本质：

清除浮动的本质是清除浮动元素脱离标准流造成的影响。

2.清除浮动的策略

闭合浮动·，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

3.额外标签法

隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式。

2、父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto、scroll

注意是给父级添加代码

3、父级添加after元素

4、父级添加双伪元素

总结：

定位

定位的组成：

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式：用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

为什么需要定位：

1、定位模式

定位模式绝对元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

2、边偏移

边偏移就是定位的盒子到最终位置。有top、bottom、left、right四个属性

静态定位static

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器{position：static；}

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

相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说

语法

选择器{position：relative；}

相对定位的特点

1、它是相对于自己原来位置的移动的（移动位置的时候参照点是自己原来的位置）、

2、原来在标准流的位置继续占有，后面的盒子仍然以标准的方式对待它。（不脱标，继续保留原来位置）

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹。

需要定位的原因

标准流或浮动都无法快熟快速实现，此时需要定位来实现

所以：

1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

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

绝对定位 absolute（重要）

语法

选择器{ position：absolute；}

绝对定位的特点：（务必记住）

1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）

2、如果祖先元素有定位（相对、绝对、固定定位），则最近一级的有定位祖先元素为参考点移动位置。

3、绝对定位不再占有原先位置（脱标）

自绝父相的由来

子绝是绝对定位的话，父级要用相对定位。

子级绝对定位，不会占用位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父级只能为相对定位

所以，相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此时相对定位，子盒子不需要占有位置，则是绝对定位

固定定位 fixed（重要）

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

语法

选择器 {position：fixed；}

固定定位的特点：

1、以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动

2、固定定位不在占有原先的位置

固定定位也是脱标的，其实固定定位也可以看做事一种特殊的绝对定位。

固定定位小技巧：固定在版心右侧位置。

小算法：

1、固定定位的盒子left：50%，走到浏览器可视区（也可以看做版心）的一半位置

2、让固定定位的盒子 margin-left：版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位 sticky（了解）

粘性定位可以被认为事相对定位和固定定位的混合。Stick 粘性的

语法

选择器{ position ：sticky ；top：10px；}

粘性定位的特点：

1、以浏览器的可视窗口为参照点移动元素（固定定位的特点）

2、粘性定位占有原先的位置（相对定位）

3、必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持

定位的叠放次序 z-index

在使用定位布局时，可能出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）

语法

选择器 {z-index：数字；}//哪个数字大谁就在上面

数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上。
数字后面不能加单位
只有定位的盒子才有z-index这个属性

定位的扩展

绝对定位的盒子居中法


<style>
        .box {
            position: absolute;
            /* 1\left 走50%，父容器宽度的一半 */
            left: 50%;
            /* 2、margin 负值 往左边走，自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="box"></div>

定位的特殊性

行内元素添加绝对或固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外外边距合并的问题

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准的盒子，但是不会压住下面标准流盒子的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有内容。

浮动之所以不会压住文字，因为浮动产生的目的的最初是为了做文字环绕效果的，文字会围绕浮动元素。

总结

恰当的使用继承可以简化代码，降低css样式的复杂性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

元素的显示与隐藏

作用：让一个元素在页面中隐藏或者显示出来

有三种：

1、display：显示隐藏

2、visibility：显示隐藏

3、overflow 溢出显示隐藏

1、display属性

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

display：none；隐藏对象
display：block；除了转化位块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

后面应用及其广泛，搭配js可以做很多的网页特效。

2、visibility 可见性

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

visibility：visible ；元素可视
visibility：hidden；元素隐藏

visibility 隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来的位置，就用visibility：hidden；

如果隐藏元素不需要占有原来的位置，就用 diaplay：none；（用处更多，重点）

overflow 溢出

overflow 属性指定了如果内容溢出了应该元素的框（超过其指定高度及宽度）时，会发生什么

一般情况下，我们不想让溢出的内容显示出来，因为溢出的部分会影响布局

但是如果有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余的部分。

精灵图

精灵图（sprites）的使用

总结：精灵图主要针对小的背景图片的使用，主要借助背景的位置来实现-----background-position

一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴也同理）

字体图标

字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常见的一些小图标

精灵图是由诸多优点的，但是去欸但很明显：

1、图片文件还是比较大的

2、图片本省放大和缩小会失真

3、一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好的解决了以上的问题，就是字体图标 iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

轻量级：一个图标要比一系列图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求。
灵活性：本质其实是文字，可以很随意的改变文字的颜色，产生阴影、透明效果、旋转等；
兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵图的技术，只是对工作中的图标部分技术的提升和优化

总结：

1、如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2、如果晕倒一些结构和样式复杂一点的小图片，就用精灵图。

引入字体图标分为：

1、字体图标的下载

2、字体图标的引入（引入到我们的html页面中）

3、字体图标的追加（一行添加性的小图标）

字体文件格式

字体图标的引入

字体的追加

CSS三角

CSS用户样式

1、鼠标样式

2、轮廓线

给表单教outline：0；或者 outline：none；样式之后，就可以去掉默认的蓝色边框

input {outline：none；}

3、防止拖拽文本域 resize

textarea{ resize：none；}

4、vertical-aligin 属性应用

1、图片、表单和文字对齐

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

溢出文省略号显示

1、单行文本

2、多行文本

常见的布局技巧

1、margin 负值的运用

2、文字围绕浮动元素

3、行内块的巧妙运用

4、css三角化

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】

CSS基础篇_margin-left:auto

一、CSS的代码风格

1、规范化

2、选择器

（一）、标签选择器：

（二）、类选择器

（三）id选择器

（四）、通配符选择器

（五）、总结

3、字体属性

字体大小

字体粗细

文本样式

字体复合属性

CSS文本属性

文本颜色color

对齐文本

装饰文本

文本缩进

css的引入方式

Emment语法

CSS的复合选择器

1、后代选择器

2、子选择器

3、并集选择器

4、链接伪类选择器

5、：focus 伪类选择器

6、复合选择器的总结

CSS的元素显示模式、

元素显示模式的分类

1、块元素

行内元素

行内块元素

总结

元素显示模式的相互转换

方法

背景颜色

背景图片平铺

背景图片位置

背景图像固定（背景附着）

css的三大特性

层叠性

继承性

行高的继承性

优先级

css盒子模型

border（边框）

边框的概念

边框的复合写法

表格的细线边框

边框会影响盒子的实际大小

案例：

外边距（margin）

外边距典型应用

外边距合并

圆角边框（重点）

盒子阴影

文字阴影

浮动

浮动的概念

浮动的特性：

浮动

1、浮动元素经常和标准流父级搭配使用

2、常见的网页布局

清除浮动

1、为什么要清除浮动

2、清除浮动

清除浮动的方法

总结：

定位

定位的组成：

1、定位模式

2、边偏移

静态定位static

相对定位relative（重要）

相对定位的特点

绝对定位 absolute（重要）

自绝父相的由来

固定定位 fixed（重要）

定位的叠放次序 z-index