一、CSS语法

1.CSS是什么

层叠样式表（Cascading Style Sheets）

HTML	结构层
CSS	表现层（给页面中的HTML标签设置样式）
JavaScript	行为层

2.CSS的引入方式

a.行内样式

直接使用标记的style属性

...
<body>
<div style="color:red;">我是例子</div>
/--<div style="属性名：属性值；"></div>--/
</body>
...

b.内嵌样式

在HTML中，将样式写在<style></style>，双标记要指定type属性为text/css

..
<header>
<style type="text/css">
div{
color:red;
font-size:18px;
}
/--选择器{属性名：属性值；}--/
</style>

</header>
<body>
<div>我是内嵌样式</div>
</body>

..

c.外链式

在HTML文档中使用<link>引入CSS文件，

..
<header>
<link type="text/css" rel="stylesheet" href="css路径">
/--引入的时候要选择正确的路径，才能得到对应的样式--/
</header>
..

3.权重

行内样式优先级最高

权重	id选择器	类选择器	标签选择器
相对值	100	10	1

包含选择器的权重是 权重相加

4.CSS引入方式

导入方式 css的一个标签

@import url(" ")

@import " : ";

5.CSS选择器

标签选择器

标签名 { 属性名：属性值；}

如：div { color：red；}

id选择器

#id值{ }

如：#pink { font-size：32px; }

类选择器

.类名{ }

如：.pink { font-size：32px; }

包含选择器

选择器E 选择器F { }

如：.box .box1 { font-size：32px; }

通配符选择器

* { }

如：* { margin:0;

padding:0; }

分组选择器

具有相同样式，选择器之间用逗号隔开

选择器E，选择器F，….{ }

伪类选择器

：link { } 未访问状态

：visited { } 访问后状态

：hover { } 光标悬停状态

：active { } 鼠标激活状态

二、字体和文本相关样式

1、字体相关样式

font-family 字体系列（指定字体）

注：多个字体之间用逗号隔开，字体名中含有空格的，用引号引起来

..
p{
     font-family:"微软雅黑","宋体","Times New Roman";
}
..

font-size 字体大小

font-style 字体风格

取值：

normal 不倾斜（默认值）

italic 斜体（用的较多）

oblique 倾斜

font-wight 字体粗细

取值：

normal 默认正常

bold 粗体

bolder 加粗

等级

400正常，700加粗

100-300px 细体

400-500px 正常

600-900px 粗体

line-height 段落内部的行高

取值：

数值+单位（px/em）

数值倍数（无单位font-size的倍数）

font 连写

顺序：font: 【font-style值】【 font-weight值】 font-size值/【line-height值】 font-family值

注意：font-size值 font-family值不能省略，加【】的意思是可以省略

选择器

直接子元素选择器(匹配选择器E里的直接子元素选择器F)

选择器E > 选择器F{ }

2、文本相关样式

text-align 文本的对齐方式

取值：

left 默认居左对齐

right 右对齐

center 水平居中对齐

justify 两端对齐

text-indent 段落内容首行缩进

常用单位 em

首行悬挂为负值

text-decoration 文本修饰（文本的装饰效果）

无修饰 none（去掉超链接的线text-decoration:none;）

underline 下划线

cursor:pointer; 小手指

line-through 删除线（中划线）

overline 上划线

text-transform 文本大小写转换

uppercase 全大写

lowercase 全小写

capitalize 每个单词的首字母大写

字词间距

letter-spacing 字母与字母之间的距离（字符间的距离）

word-spacing 单词与单词之间的距离

white-space 空白处理

white-space:nowrap; 禁止文字自动换行

overflow 内容溢出处理

visible 可见默认值

hidden 溢出部分隐藏

text-overflow 显示省略标记

/*单行省略标记*/

white-space: nowrap;        /*不换行*/
overflow：hidden;            /*内容溢出部分隐藏*/
text-overflow：ellipsis;     /*文本溢出显示省略标记*/

多行显示省略标记

word-break: break-all;           /*文本自动换行*/
overflow: hidden;                /*溢出部分隐藏*/
text-overflow: ellipsis;         /*文本溢出省略标记*/
display: -webkit-box;            /*弹性伸缩盒子*/
-webkit-line-clamp: 2;           /*省略标记出现的行数*/
-webkit-box-orient: vertical;    /*子元素垂直排列*/

vertical-align 设置图片与文字的垂直对齐方式

vertical-align：middle；图片与文字方向垂直对齐，给图片添加这个属性

baseline 默认，元素放置在父元素的基线上

top 让元素的顶端与最高元素的顶端对齐

middle ，把此元素放置在父元素的中部

三、盒子模型

3.1盒子模型

影响盒子大小的有内容、边框和内边距，外边距不会影响盒子大小。

标准盒模型 W3C

设置的width，height是内容区域、盒子大小=content+padding+border

怪异盒模型 IE

设置的width ，height是盒子大小、盒子大小=content+padding+border

都包含内容区域、内边距、边框、外边距

overflow 内容溢出处理

（定义内容超过width和height时的显示方式）

overflow-x

overflow-y

scroll 使用滚动条，不论内容是否超出

auto 浏览器自动计算（根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚动条）

hidden 溢出部分被隐藏

visible 默认值，溢出部分可见

padding 内边距（内填充内补丁）

取值

一个值：值代表上右下左内边距

二个值：值1代表上下内边距、值2代表左右内边距

三个值：值1代表上内边距、值2代表左右内边距，值3代表下内边距

四个值：值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距

单边设置

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

border 边框

属性

border-width 边框粗细

border-color 边框颜色

border-style 边框样式

solid 实线

none 无样式

dashed 虚线

dotted 小圆点

double 双实线

连写 border：border-width值 border-style值 border-color值;

单边设置

border-top 上边框

border-right 右边框

border-bottom 下边框

border-left 左边框

margin 外边距

属性

整体让块元素水平居中:margin：0 auto；

取值

margin-top 上外边距

margin-left 左外边距

margin-right 右外边距

margin-bottom 下外边距

外边距的一些问题

（兄弟)给其中的一个就可以

<body>标签的margin代表内容与浏览器边框的距离

两个行内元素的margin-right和margin-left，采用“和”

两个块元素的marign-top和margin-bottom，采用“最大值”

(父子) 根元素，overflow不为visible（大多数会用）会产生BFC

四、背景

4.1 元素的转换

块元素 display：block;

行内（内联）元素 display：inline-block;

行内元素块元素 display：inline;

display：none；隐藏（位置不在，元素也不在）

4.2 背景属性

background-color 背景颜色

background-image 背景图片

background-repeat 背景平铺方式

repeat 默认水平垂直都重复

no-repeat 水平垂直都不重复

repeat-x 水平重复

repeat-y 垂直重复平铺

background-repeat -x

repeat

no-repeat

background-repeat -y

repeat

no-repeat

background-position 背景图片的位置

取值 background-position ： x y

用方位词表示：如取值 background-position ： left center；

数值+px ：取值 background-position ：100px 0；

用百分比表示 background-position ：50% 0；

垂直水平：background-position ：50% 50%；

background-position ：50% ；只写一个值时，这个值代表水平方向的值，第二个值为默认为center。

background-size 修改背景图片大小

数值+px数值+% （是背景区域的百分比）

单词取值

cover 把背景图片扩大到足够大，以使它完全覆盖整个背景区域，可能会引起图片裁剪

contain 把背景图片扩展至最大尺寸，以使它宽度或高度适应背景区域，可能会引起背景区域留白

background-origin 定义背景图片的渲染位置

padding-box 背景图片从内边距开始渲染

content-box 背景图片从内容开始渲染

border-box 背景图片从边框底部开始渲染

background-attachment 定义背景图片是否固定或者随着页面滚动

scroll 默认

fixed 固定不动

简写：background

background：颜色图片图片平铺方式图片位置 /图片大小 …;

五、浮动与定位

float 浮动

none 默认不浮动

left 左浮动

right 右浮动

造成影响

元素浮动后，就会块化

浮动元素会脱离文档流

position 定位

static 默认，正常文档流

relative 相对定位，配合方位词使用【left、top、right、bottom】

absolute 绝对定位，配合方位词使用

fixed 固定定位，特殊的绝对定位

sticky 粘性定位

定位情况

1、默认正常文档流不定位，方位词不管用

2、相对定位

相对于原来自身的位置

3、绝对定位

情况1：包含框（父元素 .container），无定位（正常文档流），相对于浏览器定位 width: 200px;

情况2，当包含框有定位，相对于离自己最近的有定位的包含框定位这种情况使用最多

sticky 粘性（粘滞）定位

在某个阈值内，表现为position：relative,超出某个阈值后，表现为position：fixed

固定定位

垂直居中

方法一：

方法二：

浏览器自动计算

清除浮动 clear

clear :none 默认不清除浮动

clear：left 清除左浮动

clear：right 清除右浮动

clear：both 清除左、右浮动

如何使用

开启BFC

给父元素加高

清除浮动

.clear{ } <div class=”clear”></div>

伪元素

六、CSS3

6.1 选择器

类选择器

类选择器可结合元素选择器来使用

后代选择器 (空格)

E F

选择了E元素的所有后代F元素，中间用空格隔开

子元素选择器 >

E > F

子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素

F仅仅是E的子元素

相邻兄弟元素选择器 +

E + F { }

EF 两元素具有一个相同的父元素，F元素在E元素后面，而且相邻。紧邻E 选择器后的那一个兄弟选择器F

通用兄弟选择器 ~

E ~ F { }

E选择器后的所有兄弟选择器F

属性选择器

E [attr ] { }

完全匹配

E [attr=”value” ] { }

E [attr ~ =”value” ] { }

E [attr ^ =”value” ] { }

E [attr * =”value” ] { }

E [attr | =”value” ] { }

伪类选择器

动态伪类选择器

：link{} 未访问状态
：visited{} 访问后状态
：hover{} 光标悬停状态
：active{} 鼠标激活状态

：focus 用于元素聚焦状态

状态伪类（主要针对HTML中的Form 元素操作）

：enabled { } 可用状态
：disabled { } 不可用状态
：checked { } 具有选中状态的元素（针对单选、复选框）

：nth 选择器

个数

：first-child {} 父元素下方的第一个子元素（个数）
:last-child{ } 最后一个子元素
:nth-child(n){ } 第n个子元素

数字、偶数（even=2n）、奇数（odd=2n+1）

例第偶数个

：nth-child(2n){} = ：nth-child(even){}

类型

：first -of -type { } 同种类型里的第一个元素（类型）
E：first -of -type { } 所有E选择器里的第一个 E选择器
E：last -of -type { } 所有E选择器里的最后一个 E选择器
E：nth -of -type（n） { } 所有E选择器里的第n个 E选择器，n的值可以是数字、表达式（2n、2n+1,3n）、英文单词even、odd

否定选择器 not（）

如：input:not([type=”submit”]){border: 1px solid red;}

伪元素

：：first-letter 首字母

：：first-line 首行

E：：before

在E选择器的内部最前添加一个伪元素

在父元素内容的最前添加一个伪元素

必须设置content属性才能生效，伪元素默认是行内样式

E：：after

在E选择器的内部最后添加一个伪元素

在父元素内容的最后添加一个伪元素

必须设置content属性才能生效，伪元素默认是行内样式

：：selection 改变网页被选中文本的样式

七、CSS3文本样式

不透明度

opacity 整个区域都透明，而rgba是背景颜色的透明度
取值范围（0-1）

文本阴影 text-shadow ：h-shadow v-shadow 【 blur】【color】

取值情况【】代表是可选的

h-shadow 必需。水平阴影的位置。允许负值

当水平为正值时，往右
为负
为0，没有值写0

v-shadow 必需。垂直阴影的位置。允许负值

为正，投下方
为负，投上方
为0，没有值写0

blur 模糊半径可选

值越大，越模糊

color 阴影颜色可选

可以取多重值

边框阴影 box-shadow

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

参数

X轴偏移量必需水平阴影的位置

阴影模糊半径模糊距离

阴影扩展半径阴影尺寸

阴影的颜色，省略默认为黑色

阴影方式设置inset 时为内部阴影方式，默认为外阴影方式

例子：卡片式立体效果

添加属性： box-shadow:0 0 4px rgba(0,0,0,.3) ; transition:.2s;

圆角 border-radius

border-radius: 一个值；

四个角都一样

border-radius: 值1 值2；

值1 是左上角与右下角，值2是右上角与左下角

border-radius: 值1 值2 值3；

值1 是左上角；值2是右上角与左下角；值3是表示右下角

border-radius: 值1 值2 值3 值4；

值1是左上角；值2是右上角；值3是右下角；值4是左下角

自定义字体，建个目录font

定义字体@font-face{ font-family:” 自定义字体名称”；src:url(“”) }

路径不能有汉字，案例路径仅供参考

渐变

线性渐变 background-image：linear-gradient( 方向 ,颜色 , 位置 ,颜色 , 位置…)

方向取值可以是英文单词 to bottom,

从左往右 to right

左上角到右下角 to right bottom

还可以是角度如： 30deg 90 度 90deg

还可以是圆 1 turn 1圆360deg

重复线性渐变

background-image：repeating-linear-gradient( 方向 ,颜色 , 位置 ,颜色 , 位置…)

最后的值不能到百分百，否则不能重复了

径向渐变

background-image: radial-gradient(shape size at position,start );

默认ellipse 椭圆若设置为circle，则为圆形

size 大小

默认farthest-corner 半径大小为从圆心到离圆心最远的角

farthest-side 半径大小为从圆心到离圆心最远的边

cloest-side 半径大小为从圆心到离圆心最近的边

position

英文单词 at center center

数值+单位

百分比

重复径向渐变

background-image: repeating-radial-gradient(shape size at position,start );

没有达到百分比的可以用这个

八、变换与过渡

transform 变换

位移 translate(x偏移量，y偏移量)

只有一个值时，是X轴

translate Y （）

translate X（）

使用移动垂直居中 transform：translate（—50%，50%）

旋转 rotate（角度）绕Z轴旋转

rotateX （角度）绕X轴旋转

单位是deg

rotateY（）绕Y轴旋转

注：要有过渡属性transition

缩放 scale

transform:scale(x轴缩放倍数，y轴缩放倍数)一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放

scale(数字)等比例缩放

＞1放大

小于1，缩小

scaleX() x轴缩放

scaleY() y轴缩放

扭曲skew

skew（角度)x轴方向扭曲

skewX() x轴方向扭曲

skewY() Y轴方向扭曲

transition-property 过渡的属性

多个属性之间用逗号隔开

多个属性可以用all 表示

transition-property:width background

transition-duration 过渡持续时间

单位秒s或毫秒ms

1s=1000ms

transition-timing-function 过渡的速度

linear 匀速

ease 逐渐变慢默认

ease-in-out 先加速后减速

ease-in 加速

ease-out减速

cubic-bezier(x1,y1，x2,y2) 贝塞尔曲线

step 跃阶函数

transition-delay 过渡效果何时开始

transform-origin：x y 变换基点

原点水平位置原点垂直位置

取值

方位名词：left top right bottom center

像素单位数值

百分比（参照盒子自身尺寸计算）

默认基点在中心

九、动画animation

自定义动画

@keyframes “关键帧

@keyframes 动画名称{ from{属性名：属性值； } to {属性名：属性值； } }

@keyframes 动画名称{ 0%{属性名：属性值； } …..{} 100% {属性名：属性值； } }

animation-name：动画名称

自定义动画名称

animation-duration 动画持续时间

animation-timing-function 指定动画将如何完成一个周期

linear 从头到尾的速度是相同的

ease 默认。动画从低速开始，然后加快，在结束前变慢

ease-in 动画从低速开始

ease-out 动画从低速结束

ease-in-out 动画从低速开始和结束

steps( ) 步长

animation-delay 设置动画在启动前的延迟间隔

animation-iteration-count 动画播放次数

数字

infinite 无限次

animation-direction 指定是否应该轮流反向播放动画

normal 默认从开始到结束

reverse 反向结束到开始

alternate 从开始到结束到开始

alternate-reverse 结束 —开始 —结束

animation-play-state 指定动画播放状态

running 默认播放

paused 暂停

十、弹性盒子

容器：display：flex； display：inline-block；

主轴对齐方式

justify-content 设置主轴上的子元素排列方式主轴方向对齐方式

flex-start 默认从头部开始，如果是主轴是x轴，则从左到右左对齐

flex-end 从尾部开始排列右对齐

center 在主轴居中对齐（如果主轴是x轴，则水平居中）

space-around 每一个项目两侧的距离相等

space-between 每两个项目之间的距离相等先贴两边，再平分剩余空间（间距在弹性盒子（子级）之间）

space-evenly 每两个项目之间的距离与边沿项目到容器的距离相等（所有地方的间距都相等）（兼容性不太好）

主轴方向

伸缩流方向 flex-direction 主要用来决定伸缩布局主轴的方向

默认为row 从左到右主轴为水平方向，起点在左侧
row-reverse 从右到左主轴为水平方向，起点在右侧
column 从上到下主轴为垂直方向，起点在上侧
column-reverse 从下到上主轴为垂直方向，起点在下侧

换行

伸缩行换行 flex-wrap 来设置项目是否换行

默认nowrap 不换行项目的换行方式
wrap 换行第一行在上方
wrap-reverse 换行第一行在下方

交叉轴对齐方式

align-items 交叉轴对齐方式

用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式

stretch 交叉轴对齐方式 (默认值) 当项目（子级）未设置高度或高度为auto时，项目会占满父容器
flex-start 居上对齐与交叉轴的起点对齐
flex-end 居下对齐与交叉点的终点对齐
center 垂直居中对齐
baseline 与第一行的文字基线对齐

多根轴线交叉轴的对齐方式

align-content

stretch 默认，多根轴线对齐方式（当不加父容器的高度时，加上这个属性，会占满父容器）
flex-start 整体居上对齐与交叉轴的起点对齐
flex-end 整体居下对齐与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 每两行之间的距离相等
space-around 每一行两侧的距离相等
space-evenly 每两行之间的距离与边缘行到容器的距离相等

项目对应的属性

order 定义项目的排列顺序

默认为0 ，数值越小，排列越靠前

align-self 单个项目在交叉轴的对齐方式

默认继承父容器的align-items的值

flex-start 与交叉轴起点对齐

flex-end 与交叉轴终点对齐

center 与交叉轴中点对齐

flex-grow 定义项目的放大比例

默认为0 不放大容器空间有剩余，不放大

若所有项目的flex-grow属性都为1，则他们将等分剩余空间。

flex-shrink 定义项目的缩小比例

默认为1。如果空间不足，该项目将缩小

如果一个项目的属性为0，其他项目为1，则空间不足时，前者不缩小。

负值对该属性无效

flex-basis

定义分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间

默认auto 即项目的本来大小

flex 是 flex-grow flex-shrink flex-basis 的简写

默认为0 1 auto，后面两个属性可选

两个快捷键

auto （1 1 auto）父容器空间有剩余，等比例放大，空间不足，等比例缩小

none（0 0 auto）父容器空间有剩余，不放大，空间不足，不缩小

flex：1 自适应布局

媒体查询

CSS的笔记就分享到这里了，后续还有补充~

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/46312.html

一个值：	值代表上右下左内边距
二个值：	值1代表上下内边距、值2代表左右内边距
三个值：	值1代表上内边距、值2代表左右内边距，值3代表下内边距
四个值：	值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距

CSS+CSS3 笔记大总结，快来一起复习吧，有你不会的吗

一、CSS语法

1.CSS是什么

层叠样式表 （Cascading Style Sheets）

2.CSS的引入方式

a.行内样式

b.内嵌样式

c.外链式

3.权重

4.CSS引入方式

5.CSS选择器

标签选择器

id选择器

类选择器

包含选择器

通配符选择器

分组选择器

伪类选择器

二、字体和文本相关样式

1、字体相关样式

font-family 字体系列（指定字体）

font-size 字体大小

font-style 字体风格

font-wight 字体粗细

line-height 段落内部的行高

font 连写

选择器

2、文本相关样式

text-align 文本的对齐方式

text-indent 段落内容首行缩进

text-decoration 文本修饰（文本的装饰效果）

text-transform 文本大小写转换

字词间距

white-space 空白处理

overflow 内容溢出处理

text-overflow 显示省略标记

多行显示省略标记

vertical-align 设置图片与文字的垂直对齐方式

三、盒子模型

3.1盒子模型

overflow 内容溢出处理

padding 内边距 （内填充 内补丁）

border 边框

margin 外边距

四、背景

4.1 元素的转换

4.2 背景属性

五、浮动与定位

float 浮动

position 定位

定位情况

2、 相对定位

3、 绝对定位

sticky 粘性（粘滞）定位

固定定位

垂直居中

清除浮动 clear

如何使用

伪元素

六、CSS3

6.1 选择器

伪元素

七、CSS3文本样式

渐变

八、变换与过渡

transform 变换

九、动画animation

十、弹性盒子

主轴对齐方式

主轴方向

换行

交叉轴对齐方式

多根轴线 交叉轴的对齐方式

项目对应的属性

相关推荐

分享到:

层叠样式表（Cascading Style Sheets）

padding 内边距（内填充内补丁）

2、相对定位

3、绝对定位

多根轴线交叉轴的对齐方式