前端学习笔记——CSS基础

参考学习路线：https://zhuanlan.zhihu.com/p/324351537

对前端初恋的感觉——绿叶学习网：http://www.lvyestudy.com/

CSS基础补充DLC（持续跟进学习）

display常见三种及特点

display:block(块级元素)：

会独占一行

可设其宽、高、margin、padding属性

可容纳内联元素与其他块元素

display：inline(行内元素)：

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display：inline-block（行内块元素）：

既可设置宽、高，又默认不换行

可设置vertical-align属性

在字体大小不为零的情况下，会产生元素间的空隙，可在父元素设置 font-size：0 ，也可用letter-spacing设为负值去除此空隙

浮动是用display：inline-block(即将块元素套在内联元素里，对内联元素进行浮动)

inline-block对布局的理解：https://www.cnblogs.com/Ry-yuan/p/6848197.html

对CSS的认识

CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。我们知道，前端最核心的3个技术是：HTML、CSS、JavaScript，三者的关系：

HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。

css引入方式

在一个页面引入CSS，有以下3种方式。（忽略@import）

（1）外部样式表
（2）内部样式表
（3）行内样式表

外部样式表

外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般都是使用外部样式表。所谓的外部样式表，指的是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。

当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，就可以通过更改一个CSS文件来改变整个网站的外观。

外部样式表在单独文件中定义，然后在HTML文件的标签对中使用link标签来引用：

<link rel="stylesheet" type="text/css" href="文件路径" />

rel即relative的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件（即CSS文件）。

type属性取值也是固定的，即"text/css"，表示这是标准的CSS。

href属性表示CSS文件的路径。

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>

外部样式表，使用link标签来引入，而link标签是放在head标签内。

内部样式表

内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。

<style type="text/css">
    ……
</style>


如：
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
    <div>好好学习。</div>
    <div>天天向上。</div>
</body>
</html>

内部样式表，CSS样式必须在style标签内定义，style标签是放在head标签内的。

行内样式表

行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

<body>
    <div style="color:red;">好好学习天天向上。</div>
</body>

三种引用方式：

如果使用内部样式表，样式只需要写一遍；但是如果使用行内样式，则每个元素要单独写一遍。

行内样式是在每一个元素内部定义的，冗余代码非常多，并且每次改动CSS的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。

对于这三种样式表，在实际开发中，一般都是使用外部样式表。

CSS选择器

元素的id和class属性

在HTML中，id和class是元素最基本的两个属性。一般，id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作。

id属性

id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。

如：

<div id="2233" >test</div>

同一个页面中，不允许出现两个相同id的元素。在不同页面中，可以出现两个id相同的元素。

class属性

class，”类“。为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。

<p class="6666">test</p>

在同一个页面中，允许出现两个相同class的元素。可以对具有相同class的多个元素，定义相同的CSS样式。

css选择器

入门：5种实用的选择器：

（1）元素选择器（2）id选择器（3）class选择器（4）后代选择器（5）群组选择器

元素选择器

元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式。

语法：

div{colr:blue;width:100px}
元素符号{属性：属性值；}



<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:blue;}
    </style>
</head>
<body>
    <div>南翊</div>
    <p>南翊</p>
</body>
</html>

div{color:blue;}表示把页面中所有的div元素选中，然后定义它们文本颜色为蓝色。

元素选择器就是选择指定的相同的元素，而不会选择其他元素。上面例子中的p元素没有被选中，因此这两个元素文本颜色就没有变蓝。

id选择器

为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。在同一个页面中，是不允许出现两个相同的id的。

对于id选择器，id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表示这是一个id选择器。

语法示例：

<style type="text/css">
        #NANIVY{color:red;}
    </style>



<div id="NANIVY">TEST </div>

选中id为NANIVY的元素并定义文本为红色。

class选择器 .

类选择器。对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。

class名前面必须要加上前缀英句号（.），否则该选择器无法生效。类名前面加上英文句号，表明这是一个class选择器。

 <style type="text/css">
        .ivy{color:red;}

  <div class="lvy">绿叶学习网</div>
  <div class="lvy">绿叶学习网</div>

要为两个或多个元素定义相同的样式，建议使用class选择器，因为这样可以减少大量重复代码。

后代选择器

后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素

父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素。

<head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">
        #father span{color:blue;}
    </style>
</head>

<body>
    <div id="father">
        <p>test</p>
        <p>test</p>
        <span>test</span>
    </div>
</body>

#father span{ color:blue;}表示选择“id为father的元素”下的所有span元素，然后定义它们文本颜色为蓝色。

用”类“语法同理如：

.sks span{color:green;} ——sks类下的span全部绿色。

群组选择器

群组选择器，指的是同时对几个选择器进行相同的操作。对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效。

<style type="text/css">
    h3,p,span{color:red;}
</style>

等价于
<style type="text/css">
    h3{color:red;}
    p{color:red;}
    span{color:red;}
</style>

群组选择器中加入#.等选择器同样适用。

CSS字体

字体相关css属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

font就是字体的意思：理解性记忆，根据英文理解，事半功倍。

font-family：字体类型

font-family: 字体1,字体2,……字体n;

一般浏览器默认”宋体“；还有微软雅黑啊什么的，，，，

对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。

比如： “微软雅黑”、 “Times New Roman”或是Georgia、Arial这样就不用引号。

另外： p{font-family:A,B,C;}

p元素优先使用“A字体”来显示，如果电脑没有装“A字体”，那就接着考虑“B字体”。……以此类推。如果都没有安装，那么p元素就会以默认字体（即宋体）来显示。

实际开发，比较美观的中文字体有微软雅黑、苹方，英文字体有Times New Roman 、Arial和Verdana。

font-size：字体大小

font-size: 像素值;

font-size属性取值有两种：

①“关键字”，如small、medium、large等；

②“像素值”，如10px、16px、20px等。（谷歌默认16px）

px即像素（pixel），一般采用像素作为单位。还有em、百分比了解下就行。

font-weight：字体粗细

font-weight: 取值;

同上，也是有两种取值，关键字和数值：

关键字如：normal（正常）、lighter（较细）、bold（较粗）、bolder（很粗）。常用 bold（较粗）。

数值：100-900的取值（400-100-700-900）和上关键词依次对应。

font-style：字体风格

font-style: 取值;

取值：

normal（正常）、italic（斜体）、oblique（斜体）

两个斜体效果几乎一样，只不过两者的区别是对字体的支持不一样；有些没有italic属性，这时就能通过oblique让没有italic属性的字体也能够有斜体效果。

color：字体颜色

color: 颜色值;

入门的两种取值：关键字、16进制RGB

关键字：就是英文单词red，blue，pink等等，vscode有代码提示。

RGB值：如#000000、#FFFFFF等形式的取值，可自行了解

tips：浏览器解析css是按一定顺序来，后来的可能会覆盖前面的

CSS文本样式

文本是文本，文字是文字。

常见文本样式：

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写转换
line-height	行高
letter-spacing	字母间距
word-spacing	词间距

text-indent：首行缩进

为了替代之前说的p标签的六个& nbsp;来进行首行缩进。使用css中的text-indent属性来定义p元素的首行缩进。

text-indent: 取值;

取值有多种单位，入是推荐使用像素px作为单位；按照设定的字体大小，即font-size的两倍，即开头空两个字了。

text-align：水平对齐

text-align: 取值;

该属性用于控制文本水平方向上的对齐方式。

入门学习取值： left（左对齐，默认属性）、center（居中对齐）、right
（右对齐）。该属性对图片（img）也有效。

text-decoration：文本修饰

入门学习

text-decoration: 取值;

取值：underline（下划线）、line-through（中划线）、overline（顶划线，不常见）、none（默认，无划线）

虽然可以使用s、u等标签，但还是尽量把结构和样式分开好。

同时可以使用none去掉超链接的下划线，如：

 a{text-decoration:none;}

text-transform：大小写转换

text-transform: 取值;

取值：

none（默认，无），uppercase（转换为大写），lowercase（转换为小写），capitalize（只把每个英文单词首字母大写）。

line-height：行高（行间距）

line-height: 像素值;

取值，10px、20px等等。

letter-spacing：字间距

letter-spacing: 像素值;

取值，2px、5px等等。

调整每个字之间的间距，一个字母算一个字。

word-spacing：词间距

word-spacing: 像素值;

单词间距，针对英语单词的间距。

CSS边框样式

几乎所有的元素都可以定义边框。

div元素可以定义边框，img元素可以定义边框，table元素可以定义边框，span元素同样也可以定义边框等等……

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border-color属性才会有效果。

border-width：边框的宽度

border-width属性用于定义边框的宽度，取值是像素值。

border-style：边框的外观

入门取值：none（无）、dashed（虚线）、solid（实线）

border-color：边框的颜色

border-color属性用于定义边框的颜色，取值可以是“关键字”或“16进制RGB值”。

示例&简写：

 div{
            border-width:1px;
            border-style:solid;
            border-color:red;
    }

简写形式：

img{border: 1px solid red;}

局部样式边框

如：

上边框：border-top

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;

简写：
border-top: 1px solid red;

上边框border-top、下边框border-bottom、左边框border-left、右边框border-right

混合使用：

div
{
border:2px solid green;
border-bottom:10px dashed red;
border-top:0px;
}

左右绿色实线，下红色虚线,上线取消

关于取消单边的线：border-bottom:0px;、border-bottom:0;和border-bottom:none;是等价的。

CSS列表样式

list-style-type

list-style-type: 取值;


例子：
 <style type="text/css">
        ol{list-style-type:lower-roman;}
    </style>

不管有序列表还是无序列表都能用这个；（针对ol/ul元素）

一般ol（有序列表）取值：

decimal（默认，阿拉伯数1，2，3.。。）

lower-roman/upper-roman（小写/大写罗马：i、ii、iii…/I、II、III…）

lower-alpha/lower-alpha( 小写/大写英文字母)

none（无，去掉）

ul（无序列表）取值：

disc（实心圆●，默认值）

circle（空心圆○）

square（正方形■）

none（无，去掉）

例子（有序，大写罗马）：

one
two
three

  <ol style="list-style-type:upper-roman;">        <li>one</li>   
  <li>two</li>   
  <li>three</li>  
  </ol>

list-style-image

list-style-image: url(图片路径);

使用图片代替列表项符号；如：

 <ul style="list-style-image:url(https://cdn.jsdelivr.net/gh/0NanIvy0/cdn@1.3/ico/favicon.ico);"> 
 <li>one</li>    
 <li>two</li>        
 </ul>

CSS表格样式

caption-side：表格标题位置

caption-side: 取值;
例子：
 table{caption-side:bottom;}
           ^
           |
 <caption>表格标题</caption>   标题会在底部

取值：top（标题在顶部，默认） bottom（标题在底部）

在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的。

border-collapse：表格边框合并

border-collapse: 取值;

border-collapse属性是在table元素中定义的。

取值：

separate（默认，边框分开）

collapse（边框合并，无空隙）

border-spacing：表格边框间距

border-spacing: 像素值;

border-spacing属性是在table元素中定义的。

在不合并边框的情况下来控制边框间距.

CSS图片样式

定义图片大小

width: 像素值;
height: 像素值;


img
        {width: 20px;height: 30px;}

图片边框

border: 1px solid red;

img{border: 1px solid red;}

参考css边框样式，同理。

对齐方式

水平对齐：

text-align: 取值;

取值：left,center,right

图片对齐不在img中，而在父元素中进行：

 #duiqi{ text-align: center; }

 <div id="duiqi">
        <img src=" img/girl.gif" alt=""/>
    </div>

垂直对齐：

vertical-align: 取值;            vertical（垂直的）

取值：

top（顶部），middle（中部），bottom（底部）,baseline（基线）

四种对齐方式展示：

bilibili哔哩哔哩干杯！~~~

图片文字环绕

float: 取值;

取值：left（图片靠左浮动），right（图片靠右浮动）

在img元素中定义。

CSS背景样式

background-color：背景颜色

定义元素的背景颜色

background-color: 颜色值;

 div{background-color: pink;}

关键字/16RBG等等……

可以给文本加背景色，就像书本上被荧光笔标记了一样（加上的效果类似于被选中的感觉）如：

黄绿色背景

猛男色背景

background-image：背景图片样式

background-image: url(图片路径);

 div{background-image: url(xxx.XXX.XXX);}

 引入图片后也要设置width和height才会显示背景图片。
 即：
 div{width:233px;height:233px;background-image: url(xxx);}
 或者
  body
        {
            background-image:url(xxx);
        }

效果：

哔哩哔哩干杯！

background-repeat：背景图片重复

background-repeat: 取值;

取值：

repeat（默认：水平，垂直方向都平铺）

repeat-x（只在水平（x轴），平铺）

repeat-y（垂直平铺）

no-repeat（不平铺）

元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果。如：300*150px只在水平平铺

哔哩哔哩干杯！

background-position：背景图片位置

background-position: 像素值/关键字;

像素：background-position: 水平距离 垂直距离;
background-position:233px 666px

关键字：background-position: 水平距离（行：上中下） 垂直距离（列：左中右）; 划分为3*3格

关键字：top ，center， bottom ，left， right

示例：

哔哩哔哩干杯！

background-attachment：背景图片固定

background-attachment: 取值;

取值：scroll（默认；随元素一起滚动），fixed（固定不动）

会决定背景图片会不会随着元素一起滚动。

CSS超链接样式

超链接CSS伪类

定义超链接在鼠标点击的不同时期的样式

a:link{…}        定义a元素未访问时的样式
a:visited{…}    定义a元素访问后的样式
a:hover{…}        定义鼠标经过a元素时的样式
a:active{…}        定义鼠标点击激活时的样式

定义时一定要按以上顺序依次进行，不然可能浏览器会出错。

如：

<style type="text/css">
        a{text-decoration:none;}
        a:link{color:pink;}
        a:visited{color:purple;}
        a:hover{color:red;}
        a:active{color:green;}
    </style>

但也不是什么时候都需要把4个都定义了

未访问状态颜色也可以直接在a中定义了，如：

    a
        {
            color:blue;
            text-decoration: none;
        }
        a:hover
        {
            color:pink;
            text-decoration:underline;
        }

：hover

除了用于超链接，同样适用其他标签，即鼠标经过时候的样式：

   div:hover
        {
            background-color: hotpink;
        }
        如经过div时出现背景色
 img:hover
        {
            border:2px solid red;
        }
        经过图片时显示边框

鼠标样式

浏览器鼠标样式

（电脑自带样式？）

cursor: 取值;

div{cursor:pointer;}
<div>珈 窝 刊 梅 洋 洋 洗 枣</div>

记住default（默认鼠标），pointer（指向鼠标，一只手点击的样子），text（选中文本的样子）就行，扩展自行百度。

自定义鼠标样式

cursor: url(图片地址), 属性值;

图片后缀一般为cur，属性值如上记住3个重点即可。

CSS盒子模型

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

记住，所有的元素都可以看成一个盒子。（body都是）

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

内容区（content）

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他3个部分都是可选的。

内边距（padding）

内边距，指的是内容区和边框之间的空间。

外边距（margin）

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

边框（border）

同之前学的边框。

内容：宽（width）高（height）

元素的宽度和高度是针对内容而定；只有块元素才可以设置width和height，行内元素无法设置width和height。

如：

div{width:100px;height:50px;}

若想为行内元素设置宽高，可用display属性把行内元素转化为块元素，css入门先不管。、

display:inline-block;

把元素转化为inline-block元素。

边框：border

border: 1px solid red;

前面的笔记有详细。

内边距：padding

又被称为“补白”，指的是内容区到边框之间的一部分。内边距都是在边框内部的。

padding局部样式

同边框一样，可以分上下左右四个边进行分别调节：

padding-top: 值;
padding-right: 值;
padding-bottom: 值;
padding-left: 值;

padding的简写

有三种简写方式：

padding: 值;
padding: 值1 值2;
padding: 值1 值2 值3 值4;

第一种，即4个方向都是一个值。取值前期还是考虑像素px。

第二种，表示上下为值1，左右为值2。

第三种，表示从上开始顺时针方向：上右底左依次是1234对应值。

外边距：margin

边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部的。

margin局部样式

同内边距，分为上下左右四个部分。

margin-top: 值;
margin-right: 值;
margin-bottom: 值;
margin-left: 值;

margin简写形式

margin: 值;
margin: 值1 值2;
margin: 值1 值2 值3 值4;

介绍同上padding

CSS浮动布局

浮动

在之前图片样式里面已经提到过“环绕-float了”。

浮动是CSS布局的利器，通过浮动来灵活地定位页面元素，以达到布局网页的目的。

如我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。

float: 取值;

取值：left，right。

如：将div设置为浮动元素，则其对应的宽度将不在延申，而是由内容决定宽度，同时会相邻的下一个div会紧贴该元素，这就是浮动二引起的效果。

清除浮动

浮动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，可以使用clear属性来清除浮动带来的影响。

clear: 取值;

取值：left，right，both（去除左，右，同时去掉浮动）

一般直接简单除暴clear：both清除该元素的兄弟元素浮动之后带来的影响。

<div>
       <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div class="clear"></div>
</div>

一般增加一个空元素来专门clear.除了clear还有其他方式，这里入门先接触一个。

CSS定位布局

定位布局可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。定位布局共有4种方式。

固定定位：fixed

所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。用来做”回到顶部“挺好。

position: fixed;
top: 值;
bottom: 值;
left: 值;
right: 值;

position:fixed;是结合top、bottom、left和right这4个属性一起使用的。其中，position:fixed使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。一般不会四个都用。

比如left：40px就是在距浏览器左部的40px；top：400px就是离顶部400px的位置。

相对定位：relative

相对定位，指该元素的位置是相对于它的原始位置计算而来的。

position: relative;
top: 值;
bottom: 值;
left: 值;
right: 值;

绝对定位：absolute

一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。

position: absolute;
top: 值;
bottom: 值;
left: 值;
right: 值;

取值同固定定位，但会随滚动条滚动。

静态定位：static

在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static。

一般情况下我们使用不到position:static的，不过在使用JavaScript来控制元素定位时，如果想要使得元素从其他定位方式变成静态定位，就需要使用position:static来实现。

CSS基础补充DLC（持续跟进学习）

display常见三种及特点

对CSS的认识

css引入方式

外部样式表

内部样式表

行内样式表

三种引用方式：

CSS选择器

元素的id和class属性

id属性

class属性

css选择器

元素选择器

id选择器

class选择器 .

后代选择器

群组选择器

CSS字体

font-family：字体类型

font-size：字体大小

font-weight：字体粗细

font-style：字体风格

color：字体颜色

CSS文本样式

text-indent：首行缩进

text-align：水平对齐

text-decoration：文本修饰

text-transform：大小写转换

line-height：行高（行间距）

letter-spacing：字间距

word-spacing：词间距

CSS边框样式

border-width：边框的宽度

border-style：边框的外观

border-color：边框的颜色

示例&简写：

局部样式边框

CSS列表样式

list-style-type

list-style-image

CSS表格样式

caption-side：表格标题位置

border-collapse：表格边框合并

border-spacing：表格边框间距

CSS图片样式

定义图片大小

图片边框

对齐方式

水平对齐：

垂直对齐：

图片文字环绕

CSS背景样式

background-color： 背景颜色

background-image：背景图片样式

background-repeat：背景图片重复

background-position：背景图片位置

background-attachment：背景图片固定

CSS超链接样式

超链接CSS伪类

：hover

鼠标样式

浏览器鼠标样式

自定义鼠标样式

CSS盒子模型

盒子模型

内容：宽（width）高（height）

边框：border

内边距：padding

padding局部样式

padding的简写

外边距：margin

margin局部样式

margin简写形式

CSS浮动布局

浮动

清除浮动

CSS定位布局

固定定位：fixed

相对定位：relative

background-color：背景颜色