zbwer's Blog

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等等）、图片的外形（宽高，边框样式，边距等等）以及版面的布局和外观显示样式。HTML做结构，CSS美化网页，实现结构与样式分离。

Notice

该笔记是笔者在 B站观看黑马程序员前端入门教程所写，该教程发布于 2019 年，部分概念与布局方式可能已经过时，还请读者自行甄别。

语法规范

html

<style>
    选择器 {属性:值;}
    给谁修改样式 {改成什么样式}
    p {color: pink;font-size: 19px;}	紧凑格式
    P {
        color: pink;
        font-size: 19px;
    }展开格式（推荐使用）
</style>
写在<body>之前

CSS规则由两个主要部分组成：选择器与声明。

选择器用于指定修改的HTML标签，大括号内是具体样式
声明中，属性与属性值已“键值对”的形式出现，;分号隔开不同声明。

基础选择器

根据需求找到指定的HTML页面元素，选择标签。

1.标签选择器

html

<style>
    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
    h2 {color: red;text-align: center;}
</style>

以HTML标签名作为选择器，优点是可以把某一类标签全部选择出来；缺点是不能设计差异化样式。

2.类选择器

html

.类名  {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
<p class='类名'> </p>

以.开头，紧跟类名。可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。开发最常用

class注意事项：

不要纯数字、中文等命名，尽量使用英文字母来表示。
长名称或词组可以使用-来为选择器命名,例如user-name。
多类名中间用空格隔开例如class="red big"，使用场景：把不同类名中的相同样式，拿出来放到一个新的类名之下，以节省代码。

3.id选择器

html

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>

以#开头，紧跟要选择元素的id值，使用方式与类选择器类似，一般搭配js使用，两者不同点在于：

元素的id值好比身份证号码，是唯一的，只能对应于文档中某一个具体的元素。
class好比人的名字，一个人可以有多个名字，一个名字也能被多个人使用

通配符选择器

html

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

*就是选择所有标签，能匹配页面中的所有元素。

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用。

例如下面代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

html

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

字体属性

[font-size]

写法示例：p { font-size:20px; }用于设置字体大小。

px指像素大小。不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小。

[font-family]

写法示例：p { font-family:"微软雅黑","宋体",Arial;}用于设置字体类型。

可以指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准。多个字体之间用,逗号间隔。

常见应用场景：为页面统一设置字体大小与字体类型。选择器选择body标签,但标题标签需要单独设置字体大小。

[font-weight]

属性值	描述
normal	默认值（不加粗）
bold	粗体（特别重要）
100~900	normal等同400，bold等同700，数字越大(开发建议用数字)

[font-style]

属性值为italic表示设置为斜体。属性值为normal表示正常效果。

复合属性

主要用于节约代码。

使用前：

html

<style>
    ho{
        font-size: 20px;
        font-family: '宋体';
        font-weight: 400;
        font-style: italic;
    }
</style>

使用后：

html

<style>
    p {
        /* 格式要求：斜体，粗体，大小或行高 字体 */
        font: italic 700 18px "宋体";
    }
</style>

使用font复合属性时，必须按照格式书写，不能更换顺序，属性之间用空格隔开
不需要设置的属性可以省略，但必须保留size和family.

文本属性

1.[color]

定义文本的颜色。其取值方式有以下三种，实际工作中较为常见的写法是十六进制

表示方法	属性值
预定义的颜色值	red,green,blue等等
十六进制	#FF0000,#ff6600,#29D794
RGB代码	rgb(255,0,0)

2.[text-align]

设置文本对齐方式：left（靠左）,right（靠右）,center（居中）；默认值为左对齐。

注意：是让盒子里面的文本内容居中对齐，而不是让盒子居中对齐。

行高等于盒子高度即可实现文字垂直居中

3.[text-decoration]

设置文本装饰：underline下划线，overline上划线,line-through删除线，none默认值无装饰

使用场景:删除<a>标签自带的下划线；添加下划线。

4.[text-indent]

设置文本首行缩进：属性值可为不同单位的数值，绝对单位px,或者相对单位em。

例如：2em代表当前元素 2 个文字大小的距离,text-indent=2em就是首行缩进2个字。

5.[line-height]

设置文本行间距：属性值可为不同单位的数值，一般情况下，行距比自豪大7-8像素即可。

CSS引入方式

1.内部样式表

html

<style>
	填写相关样式。
    由于<srtle>还是包含在HTML文件中，故称为内部样式表，也叫“嵌入式”
</style>

可以方便控制整个页面中的元素样式设置
代码结构清晰，但没有实现结构与样式完全分离

2.行内样式表

在元素标签内部的style属性中设定CSS样式，适用于修改简单样式。

html

<div style="color:red; font-size=16px;">
    人的一生很短暂，如白驹过隙转瞬即逝，但这种心情却很长，如高山大川，连绵不绝。
</div>

在双引号中间，写法要符合CSS规范，;间隔不同属性,:键值对用冒号连接。
可以控制当前标签的样式，对其他标签不起作用
结构样式不分离且结构繁琐，不推荐大量使用。

3.外部样式表

最为常用：适用于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中。

新建后缀名为.css的样式文件，把所有CSS代码都放入此文件中
在HTML页面，使用<link>标签导入这个文件。

html

<head>
    ...
    <link rel="styleshtt" href="css路径">
    rel定义当前文档与被链接文档之间的关系，此处"stylesheet"表示被链接的文件是一个样式表
</head>

复合选择器

复合选择器由多个基础选择器通过不同方式组合而成，可以更准确高效地选择目标标签。

1.后代选择器

html

元素1 元素2 {样式声明}
<style>
    ul li {样式}
    /*选择ul里面的所有li元素*/
</style>

上述语法表示选择元素1里面的所有元素2。

元素之间用空格隔开。
元素可以是任意的基础选择器。
元素2可以是儿子也可以是孙子，只要是1的后代即可。

2.子元素选择器

html

元素1>元素2 {样式声明}
<style>
    div>a {样式}
    /* 选择div里面所有最近一级的a标签元素 */
</style>

只能选择某元素的直接后代元素2。

元素之间用大于号隔开。
元素2必须是亲儿子，可以称之为亲儿子选择器。

3.并集选择器

html

元素1,元素2 {样式声明}
<style>
    div,p {样式}
    /* 选择div和p标签 */
</style>

能够选择多组标签，同时为他们定义相同的样式，通常用于即题声明

元素之间用逗号隔开。
元素可以为任意的基础选择器。
约定的语法规范：并集选择器一般竖着写。

4.链接伪类选择器

html

<style>
    a:link {样式}			/*选择所有未被访问的链接*/
    a:visited {样式}		/*选择所有已被访问的链接*/
    a:hover {样式}		/*鼠标悬浮的链接*/
    a:active {样式}		/*鼠标按下但未弹起的链接*/
</style>

用于向某些选择器添加特殊的效果,比如鼠标悬浮到元素上的效果，或者选择第n个元素。

:冒号是伪类选择器的标志。
为了确保生效，请按照LVHA的顺序声明。

5.focus伪类选择器

html

<style>
    input:focus {样式}
    /* 修改获得光标的input元素的样式 */
</style>

用于选取获得焦点（光标）的表单元素。

元素显示模式

网页的标签非常多，不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。

元素显示模式就是元素（标签）以什么方式进行显示，HTML元素一般分为块元素和行内元素。

块元素

常见的块元素有：<div>,<p>,<ul><ol><li>,<h1>~<h6>等。

独占一行
高度宽度，内外边距都可以控制
宽度默认与容器（父级宽度）一致
是一个容器以及盒子，里面可以放行内元素以及块元素
文字类块元素里面不能放其他元素

行内元素

常见的行内元素有：<a>,<span>,<strong>等

相邻行内元素在一行上，可以显示多个。
高、宽直接设置是无效的，默认宽度就是本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
链接里面不能再放链接，但可以放块级元素。

行内块元素

在行内元素中有几个特殊的标签：<img>,<input>,<td>同时具有块元素和行内元素的特点。

都在一行上，但是他们之间会有空白间隙。（行内元素特点）
默认宽度就是内容宽度。（行内元素特点）
高度，行高，内外边距可以控制。（块级元素特点）

元素显示模式转换

在某些情况下，需要让行内元素转换为块级元素（或者反过来）。比如想要增加链接<a>的除法范围；

html

<style>
    /* 把链接标签转为块级元素 */
    a {display:block}   
    /* 把div转为行内元素 */
    div {display:inline}
    /*转为行内块元素*/
    span {display:inline-block}
</style>

背景属性

1.背景颜色

写法：background-color:颜色值，默认值为transparent（透明）。

2.背景图片

写法：background-image: url(""),默认值为 none。引号内填绝对地址或相对地址。

描述元素的背景图像。实际开发中常见于logo或者一些装饰性的小图片或是超大的背景图片，有点事便于控制位置。

3.背景平铺

写法：background-repeat: 属性值，默认值为repeat(平铺)。

其余值为no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺。

4.背景图片位置(重要)

写法：background-position: 方位词或具体坐标

参数	值
方位词	top \| center \| bottom \| left \| right(设置水平，垂直对齐方式，先后顺序无影响)
具体坐标	百分数

如果只指定了一个方位名词，另一个值默认居中对齐。
如果是精确坐标，其顺序为x,y不可更改，只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中。
如果指定的两个值，混合使用，则第一个值是x坐标，第二个值是y坐标

5.背景固定

写法：background-attachment，取值fixed （固定），scroll（滚动）。

设置背景图像是否固定，或者随着页面的其余部分滚动，可用于制作视差动画。

复合属性

html

<style>
    div {
        没有特定书写顺序，一般约定为：
        background: 背景颜色 图片地址 背景平铺 背景固定 背景位置;
    }
    body {
        background: pink url("2.jpg") no-repeat fixed center bottom;
    }
</style>

CSS三大特性

1.层叠性

所谓层叠性是指，多种CSS样式的叠加，是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

html

<style>
    div {
        color = pink;
        font-size = 18px;
    }
    div {
        color = red;
    }
</style>

例如上述代码，同一个div的color被定义了两次，即出现了样式冲突。此时遵循就近原则，哪个样式离结构近，就执行哪个样式：这里div执行的是color=red这个样式。没有冲突的样式则不会重叠，即这里的font-size=18px,不会被覆盖掉，仍然发挥作用。

2.继承性

所谓继承性是指,子标签会继承父标签的某些样式(子承父业)，如文本颜色和字号。

html

<style>
    body {font: 18px/1.5 "宋体";}
    div {color: pink;font-size: 20px;}
</style>
<body>
    <!-- 子承父业,div是body的儿子,会继承body的样式,冲突的样式按就近原则处理 -->
    <div>一个人只要知道自己去哪里，全世界都会给他让步。</div>
</body>

恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

3.优先级

当同一个元素被多个选择器同时指定时，就会有优先级的产生。选择器相同，则执行重叠性；选择器不同，则根据选择器权重执行。

选择器	选择器权重
继承或者通配符 **	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important 重要的(强制提升优先级)	无穷大

**选择器指定的越明确，优先级越高。**选择范围：通配符>标签>类>独有id>行内样式。优先级则相反。
继承的权重最低，如果该元素没有被直接选中，继承父元素的优先级最低。

盒子模型

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

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

组成：border边框，content内容，padding内边距(内容到边框的内容)，margin外边距(盒子与盒子的距离)。

1.盒子边框

html

<style>
    div {
        width: 300px;
        height: 200px;
        /* 边框粗细 */
        border-width: 5px;
        /* 边框样式:
        solid 实线边框  dashed虚线边框  dotted 小圆点 */
        border-style: dotted;
        /* 边框颜色 */
        border-color: pink;
        /* 复合属性写法，没有顺序要求*/
        border: 5px solid pink;
    }
</style>

属性	作用
border-width	定义边框粗细，单位为px
border-style	边框的样式:solid 实线边框 dashed虚线边框 dotted 小圆点
border-color	边框颜色

复合写法：border:border-width | border-style | border-color(顺序无要求)

样式	作用
border	对所有边框设置
border-top	仅对上边框设置
border-bottom	仅对下边框设置
border-left	仅对左边框设置
border-right	仅对右边框设置

合并相邻边框：border-collapse: collapse;

边框和内边距会影响盒子大小，没有设置宽度padding就不会撑开盒子。
盒子大小：内容+边框+内边距。

2.内外边距

padding内边距：即盒子中内容到盒子边框的距离。

margin外边距：即盒子与盒子之间的距离。

常规写法：

html

<style>
	div {
        padding-left: 32px;		左
        padding-right: 2px;		右
        padding-top: 2px;		上
        padding-bottom: 2px;	下
    }
</style>

复合写法：padding

值的个数	描述
padding:5px;	1个值，代表上下左右内边距都是5像素
padding:5px 10px;	2个值，上下5像素，左右10像素
padding:5px 10px 20px;	3个值，上5像素，左右10像素，下20像素
padding:5px 10px 20px 30px;	4个值，上、右、下、左的顺序（顺时针）

水平居中

块级元素：margin:0 atuo;。
行内元素或行内块元素：父级元素设置text-align=center;。

垂直外边距合并

1. 相邻元素

当上下相邻的两个块元素相遇时,上面的元素有margin-top，且下面的元素有margin-bottom,则他们之间的垂直间距不是两者之和，而是两者的最大值。

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

2.嵌套元素

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

解决方案：

1.为父元素定义上边框。2.为父元素定义上边界。3.为父元素添加overflow:hidden。

清除边距

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

html

<style>
    * {
        margin:0;
        padding:0;
    }
</style>

行内元素通常只设置左右边距。

去除li前编号

list-style: none;

3.圆角与阴影

1.圆角

语法:border-radius: 数值;单位为px或百分数，数值越大，圆角弧度越大。

如果是正方形，将数值设为高度(50%)的一半，可以得到圆形。
如果是矩形，将数值设为高度(50%)的一半，可以得到==圆角矩形==。
该属性为简写属性，可以跟四个值，分别代表：左上，右上，右下，左下（顺时针）。
单独分开写：border-top-left-radius等等。

2.盒子阴影

语法:box-shadow: offset-x offset-y [blur [spread]] [color] [inset]

参数	描述
offset-x	阴影水平偏移量。正数向右，负数向左。
offset-y	阴影垂直偏移量。正数向下，负数向上。
blur	可选。阴影模糊距离，数值越大，阴影越模糊。
spread	可选。阴影大小。
color	可选。阴影颜色。
inset	可选。阴影表示方式，inset为内阴影，默认为outset外阴影。

3.文字阴影

语法:text-shadow:offset-x offset-y blur color

参数含义与盒子阴影相同，但只有四个参数。

浮动

0.传统布局方式

1.标准流：块级元素会独占一行，从上向下顺序排列；行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
2.浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
3.定位：将盒子定在浏览器的某一个位置。CSS 离不开定位，特别是后面的 js 特效。

==网页布局第一准则==：纵向标准流，横向用浮动。

==网页布局第二准则==：先设置盒子大小，再设置盒子位置。

1.作用

让多个盒子水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等。
浮动最早是用来控制图片，实现文字环绕图片的效果。

2.语法

float:属性值

属性值	描述
none	不浮动（默认值）
right	元素向右浮动
left	元素向左浮动

3.特性

脱离标准流控制，移动到指定位置，俗称”脱标“。
浮动的盒子不再保留原先的位置，被其他标准流元素占据。
浮动元素是互相贴靠（不会有缝隙）在一起的，并且顶端对齐。
float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，与行内块类似。
为了约束浮动元素的位置，通常采用的策略是：==先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置。==
浮动的盒子只会影响后面的标准流，不会影响之前的标准流。

4.清除浮动

因为父级盒子很多情况下，不方便给确定的高度（例如商品页面，商品数量会更新），但是子盒子浮动后就不占有位置，导致父级盒子高度为0，就影响了后面的标准流盒子。

清除浮动的本质是解决父级元素因为子级浮动而导致内部高度为0的问题。

清除浮动后，父级会根据浮动的子盒子自动检测高度。

语法：选择器 {clear:属性值}

属性值	描述
left	清除左侧浮动影响
right	清除右侧浮动影响
both	清除全部影响(实际工作最常用)

4.1 额外标签法

在浮动元素末尾添加一个空的块级标签，并将标签的浮动清除。

例如：<div style="clear:both"></div>或<div class="clear"></div>(并给clear设置样式)

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签,结构化差。

4.2 父元素[overflow]

可以给父级添加： overflow: hidden| auto| scroll 都可以实现。

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

4.3 伪元素

1.[after],相当于额外标签法的升级版。给父元素添加clearfix

html

<style>
	.clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    /* 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 */
    .clearfix {
       *zoom: 1;
    }
</style>

<div class=".clearfix">

2.[双伪元素]，给父元素添加

html

<style>
	.clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
       *zoom: 1;
    }
</style>

优点：复合闭合浮动思想，结构语义化正确（不用写额外标签）

定位

[0.简介]

将盒子定在某一个位置,自由的漂浮在其他盒子(标准流和浮动)的上面。

布局机制的上下顺序：标准流(最底层),浮动(中间层),定位(最上层)。

定位是用来布局的，它有两部分组成： 定位=定位模式+边偏移，==二者联合使用，单独使用无效==

html

<style>
	.box{
		position:absolute;还有static,relative,stiky,fixed
		top = 20px;还有bottom,left,right.
	}
</style>

边偏移：定义元素相对于其父元素的边线的距离。

top,bottom表示上下边线(不可同时使用),left,right表示左右边线(不可同时使用)。

[1.定位类型]

[静态定位 static]

静态定位是元素的默认定位方式，相当于屋顶为。
静态定位按照标准流疼醒摆放位置，没有边位移
在布局时几乎不使用静态定位。

[相对定位 relative]

相对于它原来在标准流中的位置来说,即边偏移是以标准流中原位置为参考
原来在标准流的区域继续占有，后面的盒子任然以标准流的方式对待它

[绝对定位 absolute]

绝对定位边偏移是以带有定位的父级元素为参考，若父元素没有定位则以浏览器为准定位。
绝对定位完全脱标，不占有任何位置
布局常用口诀： 子绝父相，给父级元素设置相对定位，子元素设置绝对定位。

[固定定位 fixed]

不随页面滚动而移动，应用场景：页边广告。
以浏览器可视窗口为参考.
小技巧，固定在版心右侧：left=50%，先走一半,margin-left=宽度一半,再多走版心宽度一半。

[粘性定位 stiky]

移动到设置的位置时固定住，应用场景：头部锁定。
以浏览器的可视窗口为参考
粘性定位会占有原来的位置

[堆叠顺序 z-index]

在使用「定位」布局时，可能会「出现盒子重叠的情况」。

加了定位的盒子，默认「后来者居上」，后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以「调整盒子的堆叠顺序」

语法：z-index= 整数，数值越大，盒子越靠上。

数字后面不能加单位
只适用于相对,绝对,固定定位的元素，对其他定位,浮动,标准流无效。

定位特殊特性

行内元素添加绝对或固定定位，可以直接设置宽高。
块级元素添加定位后，默认宽高为内容大小。
脱标的盒子(浮动，绝对定位)元素都不会触发外边距合并的问题。

布局总结

标准流：让盒子上下排列，垂直的块级盒子就用标准流布局。
浮动：让多个块级元素一行显示或左右对齐盒子，多个块级元素水平显示就用浮动。
定位：让盒子前后叠压显示，如果元素再盒子内自由移动就用定位。

显示与隐藏

[display]

display用于设置一个元素应如何显示,常见的取值有:none(隐藏对象),block(块级元素).

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

[visibility]

常见取值:visible元素可视，hidden元素隐藏。

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

[overflow]

用于指定如果内容溢出一个元素的边界时，会发生什么。

属性值	描述
visible	默认,不剪切也不滚动
hidden	不显示溢出的内容
scroll	不管是否溢出,都滚动
auto	溢出自动滚动

语法规范 ​

基础选择器 ​

1.标签选择器 ​

2.类选择器 ​

3.id选择器 ​

通配符选择器 ​

字体属性 ​

[font-size] ​

[font-family] ​

[font-weight] ​

[font-style] ​

复合属性 ​

文本属性 ​

1.[color] ​

2.[text-align] ​

3.[text-decoration] ​

4.[text-indent] ​

5.[line-height] ​

CSS引入方式 ​

1.内部样式表 ​

2.行内样式表 ​

3.外部样式表 ​

复合选择器 ​

1.后代选择器 ​

2.子元素选择器 ​

3.并集选择器 ​

4.链接伪类选择器 ​

5.focus伪类选择器 ​

元素显示模式 ​

块元素 ​

行内元素 ​

行内块元素 ​

元素显示模式转换 ​

背景属性 ​

1.背景颜色 ​

2.背景图片 ​

3.背景平铺 ​

4.背景图片位置(重要) ​

5.背景固定 ​

复合属性 ​

CSS三大特性 ​

1.层叠性 ​

2.继承性 ​

3.优先级 ​

盒子模型 ​

1.盒子边框 ​

2.内外边距 ​

水平居中 ​

垂直外边距合并 ​

1. 相邻元素 ​

2.嵌套元素 ​

清除边距 ​

去除li前编号 ​

3.圆角与阴影 ​

1.圆角 ​

2.盒子阴影 ​

3.文字阴影 ​

浮动 ​

0.传统布局方式 ​

1.作用 ​

2.语法 ​

3.特性 ​

4.清除浮动 ​

4.1 额外标签法 ​

4.2 父元素[overflow] ​

4.3 伪元素 ​

定位 ​

[0.简介] ​

[1.定位类型] ​

[静态定位 static] ​

[相对定位 relative] ​

[绝对定位 absolute] ​

[固定定位 fixed] ​

[粘性定位 stiky] ​

[堆叠顺序 z-index] ​

定位特殊特性 ​

布局总结 ​

显示与隐藏 ​

语法规范

基础选择器

1.标签选择器

2.类选择器

3.id选择器

通配符选择器

字体属性

[font-size]

[font-family]

[font-weight]

[font-style]

复合属性

文本属性

1.[color]

2.[text-align]

3.[text-decoration]

4.[text-indent]

5.[line-height]

CSS引入方式

1.内部样式表

2.行内样式表

3.外部样式表

复合选择器

1.后代选择器

2.子元素选择器

3.并集选择器

4.链接伪类选择器

5.focus伪类选择器

元素显示模式

块元素

行内元素

行内块元素

元素显示模式转换

背景属性

1.背景颜色

2.背景图片

3.背景平铺

4.背景图片位置(重要)

5.背景固定

复合属性

CSS三大特性

1.层叠性

2.继承性

3.优先级

盒子模型

1.盒子边框

2.内外边距

水平居中

垂直外边距合并

1. 相邻元素

2.嵌套元素

清除边距

去除li前编号

3.圆角与阴影

1.圆角

2.盒子阴影

3.文字阴影

浮动

0.传统布局方式

1.作用

2.语法

3.特性

4.清除浮动

4.1 额外标签法

4.2 父元素[overflow]

4.3 伪元素

定位

[0.简介]

[1.定位类型]

[静态定位 static]

[相对定位 relative]

[绝对定位 absolute]

[固定定位 fixed]

[粘性定位 stiky]

[堆叠顺序 z-index]

定位特殊特性

布局总结

显示与隐藏