抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

CSS学习总结

一、CSS引入方式

1.外部引入

在HTML文件头部信息内(<head></head>标签内)通过<link>标签引入外部CSS文件:

1
<link rel="stylesheet" href="文件的路径" type="text/css" />
  • 此处的rel属性必写且值必须为stylesheet

  • type属性可省略,若不省略则属性值必须为text/css

2.内部写入

在HTML文件头部信息内的<style></style>标签内写入CSS代码:

1
2
3
4
5
6
7
...
<style>
div {
...
}
</style>
...

<style></style>标签的media属性可为不同的设备规定不同的样式:

属性值 说明
media="screen" 计算机屏幕(默认值)
media="tty" 电传打字机以及使用等宽字符网格的类似媒介
media="tv" 电视类型设备
media="print" 打印预览模式/打印页
media="all" 适合所有设备
media="aural" 语音合成器
media="braille" 盲人用点字法反馈设备
media="handheld" 手持设备(小屏幕、有限的带宽)
media="projection" 投影仪/放映机

同时使用多个属性值则用逗号分隔:

1
2
3
<style media="screen, tv">

</style>

3.行内嵌入

直接在元素属性区域写入style属性即定义css样式:

1
2
3
<P style="color: pink; font-size: 20px;">
日暮伯劳飞,风吹乌桕树。
</P>

二、语法规范

1
2
3
4
selector {
属性01: 属性值01 属性值02;
属性02: rgba(255,255,255,1) solid 1px;
}

三、CSS选择器

  • 基础选择器是由单个选择器构成的;
  • 基础选择器包括标签/元素选择器、类选择器、id选择器和通配符选择器。

1.标签/元素选择器

标签选择器 (元素选择器) 是 指用 HTML 标签名称 作为选择器,按标签名称分类,为页面中某一类标签指定

统一的 CSS 样式。

标签选择器直接写不带尖括号的标签名即可:

1
2
3
4
5
6
7
8
9
10
11
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}

p {
color: pink;
font-size: 10px;
}

2.类选择器和id选择器

id属性只允许运用于一个元素,选择器用#id名的语法规则进行选择;

class属性运用于多个元素,一个标签可以同时定义多个class属性,多个class名之间用空格分开!选择器用.类名的语法规则进行书写!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<style>
/*id选择器*/
#div01 {
...
}

#div02 {
...
}

/*class选择器*/
.div {
...
}

.big {
...
}

.big, .blue { /*多个选择器之间用半角逗号加空格或换行分隔开*/
...
}
</style>
</head>
<body>
<div id="div01" class="div big blue">
div01
</div>
<div id="div02" class="div big">
div02
</div>
<div id="div03" class="div blue">
div03
</div>
</body>
</html>

3.通配符选择器*

在 CSS 中,通配符选择器使用“ * ”定义,它表示选取页面中所有元素(标签)。

举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之通配符选择器</title>
<style>
* {
color: red;
}
/* 这里把 html body div span li 等等的标签都改为了红色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>

4.属性选择器

根据属性或属性值选择某类标签,语法:

(1)选择具有指定属性的元素

1
2
3
4
5
6
[属性名]{

}
[属性名="属性值"]{

}

(2)属性和多个值选择器

[attr~=val]

该选择器仅选择具有attr属性的元素,而且要求val值是attr值包含的被空格分隔的取值列表里的其中一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
[class~="cxk"]{
margin: 20px;
width: 60%;
}
[class~="c01"]{
color: blueviolet;
}
[class~="x02"]{
border: 1px solid blueviolet;
}
[class~="k03"]{
background-color: antiquewhite;
}
</style>

<p class="c01 x02 k03 cxk">
你是我的
</p>
<p class="c01 x02 cxk">
我是你的谁
</p>
<p class="x02 k03 cxk">
再看一眼
</p>
<p class="c01 k03 cxk">
多一眼
</p>
<p class="c01 cxk">
就会爆炸
</p>
imageb3b50f49408a7788.png
[attr|=val]

选择attr属性的值中,第一个值val或值以val-开头的元素(注意这里的 “-” 不要忽略!!!)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
[class~="cxk"]{
margin: 20px;
width: 60%;
}
[class|="c"]{
color: chocolate;
}
[class|="x"]{
border: 1px solid blueviolet;
}
//该项不会生效,因为没有元素的该属性值中第一个是以"k-"开头的!
[class|="k"]{
background-color: antiquewhite;
}
</style>

<p class="c-01 x-02 k-03 cxk">
你是我的
</p>
<p class="c-01 x-02 cxk">
我是你的谁
</p>
<p class="x-02 k-03 cxk">
再看一眼
</p>
<p class="c-01 k-03 cxk">
多一眼
</p>
<p class="c-01 cxk">
就会爆炸
</p>
image85a6333ff3008655.png
③[attr^=val]

选择attr属性的值以val开头(包括val)的元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
[class~="cxk"]{
margin: 20px;
width: 60%;
}
[class^="c"]{
color: chocolate;
}
[class^="x"]{
border: 1px solid blueviolet;
}
[class^="k"]{
background-color: antiquewhite;
}
</style>

<p class="c-01 x-02 k-03 cxk">
你是我的
</p>
<p class="c-01 x-02 cxk">
我是你的谁
</p>
<p class="x-02 k-03 cxk">
再看一眼
</p>
<p class="c-01 k-03 cxk">
多一眼
</p>
<p class="k-01 cxk">
就会爆炸💥
</p>
image2ce16692bcba747a.png
④[attr$=val]

选择attr属性的值以val结尾(包括val)的元素。

⑤[attr*=val]

选择attr属性的值中包含子字符串val的元素。

四、CSS高级/复合选择器

在 CSS 中,可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器 ,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。

1.后代选择器:

选择父元素下的所有某类子元素,包括子、孙、重孙等:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
父元素 子元素 {
样式声明
}

<head>
<style>
/*选择了最外面<div>里的所有<p>元素*/
<div> <p> {
...
}
</style>
</head>
<body>
<div>
<p>
<h1>

</h1>
</p>
<div>
<h1>
<p>

</p>
</h1>
</div>
</div>
</body>

2.子/层级选择器:>

1
元素一>元素二 {...}	//中间用大于号连接,无空格!

只选择元素一下一级的所有元素二(只选择儿子这一层,不涉及孙子等),更深一层的元素不会选择到!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
<style>
/*选择所有<div>下一级的所有<p>元素,因此下面代码运行结果是感叹号和问好都是红色!*/
div>p {
...
}
</style>
</head>
<body>
<div>
<p>
<h1>

</h1>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
<div>
<h1>
<p>

</p>
</h1>
<p>
?????????????????????????
</p>
</div>
</div>
</body>

3.并集选择器:,

选择满足任一选择器的元素

多个选择器之间用半角逗号分开(出于习惯常常在逗号后面带一个空格):

1
2
3
div, p, #id01, .allDiv {
...
}

4.交集选择器

选择同时满足多个选择器的标签。

交集选择器中如果有标签选择器,那么标签选择器必须位于最前面!

选择器之间是紧挨着的,没有任何东西分隔!

1
2
3
divh1h2 {
...
}

5.兄弟选择器

选择相同父元素的相邻兄弟元素:

~表示选择后续所有兄弟,而+表示只选择后面的一个兄弟:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p class="c-01 x-02 k-03 cxk" id="cxk">
你是我的
</p>
<p class="c-01 x-02 cxk" id="c-01">
我是你的谁
</p>
<p class="x-02 k-03 cxk" id="x-02">
再看一眼
</p>
<p class="c-01 k-03 cxk">
多一眼
</p>
<p class="k-01 cxk" id="k-03">
就会爆炸💥
</p>
1
2
3
4
5
6
7
[class~="cxk"]{
margin: 20px;
width: 60%;
}
#cxk + p{
background-color: antiquewhite;
}
image8ac6f3530c5a7359.png
1
2
3
4
5
6
7
[class~="cxk"]{
margin: 20px;
width: 60%;
}
#cxk ~ p{
background-color: antiquewhite;
}
imagecc95eedb063d56df.png

五、伪类和伪元素

伪类和伪元素也是一种选择器。

伪类和伪元素是预定义的、独立于文档元素的,它们获取元素的途径不是基于id、class或属性这些基础的元素特征,而是根据元素是否处于某种特殊状态(伪类),或者是元素中特别的内容(伪元素)。

1.伪类

伪类是一种选择器,CSS伪类用于向某些选择器添加特殊效果,伪类选择元素基于当前元素处于的状态,或者说元素当前所具有的特性。

(1)超链接伪类

语法:

1
2
3
4
a:link{}			//未访问时的属性
a:visited{} //访问后的属性
a:hover{} //鼠标悬浮在上面时的属性
a:active{} //鼠标按下没有松开的属性

如果对一个链接要定义上面四种属性,那么定义的顺序必须是上面那样,不可改变!

(2)结构性伪类

结构性伪类会在元素存在某种结构上的关系时选择相应的元素应用CSS样式:

伪类 作用
E:root 选择元素E所在文档的根元素,在HTML中根元素永远是HTML
:not(selector) 选择非selector元素的每个元素
:empty 选择没有任何子元素的元素(包括text文字节点)
:target 在链接中URL用锚点#idname可以指向相对应的id值的元素,该伪类用于选取锚点元素的目标元素

(3)子元素伪类

伪类 说明
E:first-childE:last-child E作为某元素的第一个/最后一个元素时被选中
E:only-child E作为某元素的唯一一个元素时被选中
E:nth-child(n) E作为某元素的第n个元素时被选中
E:nth-last-child(n) E作为某元素的倒数第n个元素时被选中
E:first-of-type E同级的第一个元素也是E的话,选中这里的第一个E
E:last-of-type E同级的最后一个元素也是E的话,选中这里的最后一个E
E:only-of-type 选择所有仅有一个子元素为E的元素
E:nth-of-type E同级的第n个元素也是E的话,选中这里的第nE
E:nth-last-of-type(n) E同级的倒数第n个元素也是E的话,选中这里的倒数第nE

如:

E:first-child:如果元素E是任意元素的第一个子元素,那么选中它。

F>E:first-child:选择所有F元素的儿子中的第一个E元素。

注:可与其他选择器混合使用:

1
2
3
.jiaKuan:only-of-type{
color: darkorange;
}

(4)UI伪类

伪类 说明
:hover 鼠标悬浮在其上时
:active 鼠标按下未抬起时
:focus 元素获得焦点时
:enabled 选择所有启用的表单元素
:disabled 选择所有禁用的表单元素
:read-only 元素处于只读状态时
:read-write 可读可写状态时
:checked 选择所有选中的表单元素
:default 当页面打开时默认处于选取状态的单选按钮或复选框
:indeterminate 当页面打开时,如果一组单选按钮都没有设定为选取状态,则选择这组按钮。如果用户选取了其中一个按钮,则该选择器中的样式会失效。
::selection 当元素处于选中时的状态
:invalid 选择所有未通过表单校验的元素
:valid 选择所有通过了表单校验的元素
:required 选择所有正确设定了required属性的inputselecttextarea元素
:optional 选择所有未指定required属性的inputselecttextarea元素
:in-range 元素输入值在规定范围内时选择该元素
:out-of-range 元素输入值不在规定范围内时选择该元素

注:不同浏览器对UI伪类支持情况有差异!

2.伪元素

伪元素用于对某些元素中的特定内容进行操作。

伪元素 说明
::first-letter 将特殊样式添加到文本的首字符
::first-line 将特殊样式添加到文本的首行
::before 在元素之前插入某些内容,和content属性一起使用
::after 在元素之后插入某些内容,和content属性一起使用

(1)::first-letter

用于将特殊样式添加到文本的首个字符,只能应用于块级元素。

该伪元素支持应用以下属性:fontcolorbackgroundword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear

(2)::first-line

用于将特殊样式添加到一段文本的首行,不论文本在屏幕上如何调整如何缩放或换行,该样式始终作用于文本的第一行。

该伪元素支持应用以下属性:fontcolorbackgroundtext-decorationvertical-align(当floatnone时)、text-transformline-heightclearmarginpaddingborderfloat

3.内容属性

CSS内容属性与::before::after伪元素一起使用,用于插入内容,默认是内联内容。

(1)content属性

说明
none 不生成任何值
normal 默认值,与none相同
<attr> 插入标签属性值
<url> 插入一个外部资源,如图像视频或浏览器支持的其他任何资源
<string> 插入字符串
counter(name) 使用已命名的计数器
counter(name, list-style-type) 使用已命名的计数器并使用list-style-type指定标号的种类
close-quote 插入quotes属性的后标记
open-quote 插入quotes属性的前标记

(2)counter-increment属性

用于设定计数器和增加的值,计数器的name参数可任意命名,用在counter(name)属性值或counter(name, list-style-type)方法上。

增加的值默认为1,可以设为负值,如:

1
2
3
li{
counter-increment: cil 2;
}

(3)quotes属性

quotes属性为content属性的open-quote和close-quote值定义标记,两个为一组,如:

1
2
3
li{
quotes: "(" ")";
}

六、CSS样式

0.CSS常用单位

CSS常用相对长度单位:

单位 简介
em 相对于父元素字体的大小
ex 相对于字符“x”的高度,通常为字体高度的一半,即1ex≈0.5em
ch 相对于数字“0”的宽度
rem 相对于根元素(html)元素字体大小,若未设置则相对于浏览器默认字体大小,一般为16px
vw 视口宽度的1%
vh 视口高度的1%
vmin 视口高度和宽度中最小值的1%
vmax 视口高度和宽度中最大值的1%

CSS常用绝对长度单位:

单位 简介 单位 简介
px 像素点 in 英寸
pt cm 厘米
pc 派卡 mm 毫米

CSS常用时间单位:

单位 简介 单位 简介
s ms 毫秒

CSS常用角度单位:

单位 简介 单位 简介
deg 度° rad 弧度,一个完整的圆是2πrad
grad 梯度,一个完整的圆是400grad turn 转/圈,一个完整的圆是1turn

CSS常用分辨率单位:

单位 简介 单位 简介
dpi 每英寸长度内的像素点数 dppx, x 每像素单位的点数
dpcm 每厘米长度内的像素点数

CSS常用颜色值:

颜色值 说明
color keywords CSS预设颜色名称,共有一百多个:
https://www.runoob.com/cssref/css-colornames.html
#rrggbb, #rgb 井号后面跟三位十六进制数或六位十六进制数
rgb(r,g,b), rgba(r,g,b,a) 取值为正整数(0-255)或百分数,a表示Alpha透明度,取值为0-1
hsl(h,s,l), hsla(h,s,l,a) 工业界的色彩标准
transparent 完全透明
currentColor 表示原始的color属性值,一般用于继承了原来元素属性的元素
  • calc()函数:

    用于执行一些简单的计算,如:

    1
    width: calc(100% - 80px);

    使用注意:一般只进行加减乘除简单运算,运算符前后都必须有空格隔开!

  • attr()函数:

    用于获取指定元素的属性值:

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    .image-box {
    background-image: url(attr(data-src));
    }
    </style>

    <div class="image-box" data-src="path/to/image1.jpg"></div>
    <div class="image-box" data-src="path/to/image2.jpg"></div>

    限制与注意事项

    • 浏览器兼容性:虽然现代浏览器广泛支持 attr()content 的结合,但其他用途的支持度可能参差不齐,特别是用于非 content 属性时。
    • 性能考量:频繁使用 attr() 特别是在大型项目中,可能会对页面渲染性能造成影响。
    • 不能直接运算:提取的属性值为纯字符串,无法直接在CSS中参与数学运算或逻辑判断,需要借助其他CSS功能或JavaScript辅助。

1.常用文字样式

1
2
3
4
5
6
7
8
9
10
11
div {
color: #ffffff; //字体颜色,HEX值;

font-size: 50px; //字体大小,单位一般为px(像素);

font-weight: 500; //字体粗细,可选1001000之间的十个整百数,100最细1000最粗;或选择normal/bold;

font-style: italic; //字体斜体

font-family: '微软雅黑'; //字体类型,使用自己电脑安装了的字体,用半角引号包起来才能被识别!
}

2.文本格式设置

1
2
3
4
5
6
7
8
9
10
11
text-align:						//文字水平对齐方式,可选left、center、right;还可对<img>标签生效!

text-decoration: //设置文字上下划线和删除线,可选:顶overline、删除线line-through、底underline、无任何划线none,此处none可应用于去除链接文字的下划线;

text-transform: //转换英文文本的大小写,对中文无影响,可选none(无转换)、uppercase(变大写)、lowercase(变小写)、capitalize(只将每个单词的首字母变大写);

text-indent: //控制文本首行的缩进值,新手用像素值如:text-indent: 20px;;

font-varient: //将英文设置为小型大写字母,对汉字无影响,属性值为normal时不转换,为small-caps应用生效;

line-height: //设置行高而不是行间距!新手用像素单位,如:line-height: 30px;;

3.元素边框样式

只需记忆如下常用属性即可:

1
2
3
4
5
border-width:					//边框宽度,单位px;

border-style: //边框样式,有实线solid,虚线dashed,dotted点状线,double双线

border-color: //边框颜色;

一键设置:

1
border: 1px solid blue;			//此处属性前后顺序随意,不影响效果!

边框样式使用图片进行填充:

属性 说明
border-image 简写属性,定义边框样式使用图案进行填充
border-image-source 图像边框使用的图像路径
border-image-slice 图像分割方式
border-image-width 边框宽度
border-image-outset 图像边框背景图的扩展
border-image-repeat 图像边框是否平铺repeat、铺满round或拉伸strech

4.元素背景图片

1
2
3
4
5
6
7
8
9
background: skyblue;				//设置背景颜色,当背景图片和背景颜色同时被设置时图片会覆盖在背景颜色上面!

background-image: url(); //定义图片路径,绝对路径和相对路径都行,路径写在url()的括号内;

background-repead: no-repeat; //设置图片是否平铺/重复,可选no-repeat不平铺、repeat-x方向平铺、repeat-y方向平铺、默认值repeat两个方向都平铺;

background-position: center; //设置图片的放置位置,属性值可为这五个关键词:left right top bottom center,可单个或混合任意两个搭配使用如:center居中对齐,top居中顶对齐,bottom right右下对齐,center bottom居中底对齐;属性值也可为像素值,第一个值为left效果的左边距,第二个值为top效果的上边距如:center 50px效果为垂直居中对齐距离上边框50px

background-attachment: fixed; //设置背景图片是否随屏幕内容滚动,属性值fixed为固定,scroll为滚动;
image-20220607153600135

背景样式的复合写法:

1
2
3
4
5
/*此处属性前后顺序随意!*/
background: 背景颜色 背景图片地址 背景图片平铺 背景图片滚动 背景图片方位;

background: rgba(255,255,255,0.5) url(./img/01.png) no-repeat fixed center;
background: rgb(240,240,240) left center fixed url(./img/网站.png) no-repeat;

5.图片样式

(1)图片尺寸和图片边框

1
2
3
4
5
6
7
8
9
10
img {
width: 100px;
height: 100px;
border-width: 1px;
border-style: solid;
border-color: red;
border: 1px solid red;
}

<img src="./img/01.jpg" />

(2)图片设置水平和垂直对齐

水平对齐可用text-align: left/center/right设置,注意是设置图片的父标签,就会应用到<img>标签上,如果设置在图片标签上则不生效!

1
2
3
4
5
6
7
#id05 {
text-align: center;
}

<div id="id05">
<img src="img/画板.png" />
</div>

垂直对齐细嗦:

垂直对齐:vertical-align属性
vertical-align属性取值 说明
top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐
Vertical-align对齐方式

解决图片底部默认空白缝隙问题:
bug:图片底侧会有一个空白缝隙,原因是行内块元素(图片)会和文字的基线对齐。
主要解决方法有两种:
给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
把图片转换为块级元素 display: block;

6.列表项前符号样式

选择列表中的<li>标签,用list-style-type属性可以自定义项前符号样式:

一般对有序列表应用这些样式:

list-style-type属性值 说明
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
lower-greek 小写希腊字母

一般对无序列表应用这些样式:

list-style-type属性值 说明
disc 实心圆
circle 空心圆
square 实心方块

还可以自定义图片为样式:

1
2
3
li {
list-style-image: url(./imgs/01.png);
}

此处的图片尺寸为100%,原图大小,因此选择图片时要注意尺寸!

注:以上所有样式都可以应用到无序列表项和有序列表项,但自定义列表不会生效!

7.表格样式

(1)表格边框

1
2
3
table, th, td {
border: 1px solid black;
}
image-20220607175326062

像这样加了边框之后table和td的边框会显得不美观,这时我们可以给table标签设置border-collapse: collapse属性来合并相邻边框:

1
2
3
4
table td {
border-collapse: collapse;
border: 1px solid black;
}
image-20220607181255378

Bug:最顶部的边框变粗了!?

(2)宽度、高度、边框间距

1
2
3
4
5
6
7
table {
width: 100px;
}

tr {
height: 100px;
}

在CSS中,我们使用border-spacing属性来定义表格边框间距。
语法:
border-spacing:像素值;
说明:
该属性指定单元格边界之间的距离,只需要在table元素设置就可以生效。当只指定了1个像素值时,这个值将作用于横向和纵向上的间距;当指定了2个length值时,第1个作用于横向间距,第2个作用于纵向间距。

1
2
3
table {
border-spacing: 5px;
}

(3)表格标题位置

caption-side: bottom;该属性可定义表格标题位置,可选属性值有topbottom,定义在table或者caption中都能生效:

1
2
3
4
5
6
7
table {
caption-side: bottom;
}

caption {
caption-side: bottom;
}

8.CSS盒子模型

所有HTML元素可以看作盒子,盒子模型不是指定某一个元素,而是囊括所有的HTML的块级元素。

在CSS中,”box model”这一术语是用来设计和布局时使用。

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

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

下面的图片说明了盒子模型(Box Model):

img

(1)盒子边框border

边框由三部分组成,分别是边框线宽border-width、线条样式border-style、线条颜色border-color

名称 描述
border-width 边框线宽
border-style 边框线条样式,有以下四种:无边框none、实线solid、虚线dashed、点线dotted
border-color 边框颜色

以上三个属性可单独设置,也可统一设置:

1
2
3
4
5
6
7
border-width: 1px;
border-color: red;
border-style: solid;

/*等价于:*/

border: solid red 1px; //此处的属性顺序随意

注:边框宽度会影响盒子的实际尺寸!

(2)盒子内外边距padding和margin

padding和margin都有上下左右之分:

1
2
3
4
5
6
7
8
9
padding-top
padding-right
padding-bottom
padding-left

margin-top
margin-right
margin-bottom
margin-left

padding和margin可以单独设置四个边,也可以一次性设置好四个边:

他(们)的值可以有一到四个,分别表示不同的位置:

1
2
3
4
5
6
7
padding: 5px;							//上下左右

padding: 5px, 1px; //上下,左右

padding: 5px, 1px, 2px; //上,左右,下

padding: 5px, 1px, 2px, 4px; //顺时针:上,右,下,左

注:如果盒子已经有了具体尺寸,再设置padding的话,会撑大盒子尺寸!

有关margin:

  • 可以定义盒子的左右外边距为auto,这样会使得位于同一行的盒子水平居中:

    1
    2
    3
    4
    5
    margin: 10px auto;
    或:
    margin: auto;
    或:
    margin: 10px auto 10px;
  • 垂直外边距合并:

    上下两个盒子的外边距会合并为两个盒子margin较大的那个值而不是相加!

    img
  • 上外边距合并:

    对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时二者会合并为较大的外边距值。

    img

    解决方法:绝对定位的盒子不会有上述问题,下面再讲。

(3)清除内外边距

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

1
2
padding: 0;		/* 清除内边距 */
margin: 0; /* 清除外边距 */

(4)盒子大小限制

使用max-widthmax-heightmin-widthmin-height属性可以设置元素的最大和最小的宽高,最大宽高默认值都为none,最小宽高默认值都为0,它们的值都可以使用具体长度或百分比,但不能是负值。

如果出现max-width小于min-width的情况,那么后者会覆盖前者。

(5)box-sizing属性

  • box-sizing=content-box(默认):盒模型的宽高不包含borderpadding,盒模型大小只与其内容有关。

  • box-sizing=border-box:盒模型的宽高包含borderpadding

(6)outline属性

元素轮廓线,位于边框边缘的外围,不会占据空间,不影响元素尺寸,可以不是矩形:

属性 说明
outline border
outline-color border
outline-style border
outline-width border
1
2
3
*{
outline: 1px red solid;
}

(7)box-shadow属性

用于给盒子添加投影:

属性 说明
h-shadow 必需,水平偏移值,可以是负值
v-shadow 必需,垂直偏移值,可以是负值
blur 可选,模糊值,不可为负
spread 可选,阴影扩展值,可为负
color 可选,阴影颜色
inset 可选,内阴影,该值为空时是外阴影

(8)opacity属性

用于设置盒模型的不透明度,取值为0.0-0.1

(9)盒模型显示模式

  • 盒模型默认的两种显示模式:
    • block块级:常见有divh1-h6formtabledlolullipprehrblockquoteaddress等。
    • inline内联:常见有spanaimgbuttoninputtextareasubsupstrongbrabbrbdocitelabelmapqselect等。

display属性的值:

说明
none 不显示,不占有位置
block 块级元素,元素前后换行
inline 内联元素,元素前后不换行
inline-block 内联块级元素
list-item 列表项目
flex 块级弹性伸缩盒
inline-flex 内联弹性伸缩盒
grid 块级网格
inline-grid 内联网格

(10)可见与溢出

visibility属性

规定元素是否可见:

说明
visible 可见,默认值
hidden 不可见,但依然占据空间
collapse 当在表格中使用时,此值可删除一行或一列, 不会影响表格的布局,被删掉的空间留给其他元素使用。
如果该值用在其他元素上,效果同hidden
overflow属性

设置元素内容溢出时的处理方式:

说明
visible 默认值,溢出时不做处理,内容可能会超出容器
hidden 隐藏溢出内容
scroll 给容器添加滚动条以便查看溢出内容
auto 溢出时出现滚动条,不溢出时则没有

(11)cursor鼠标样式

该属性规定当鼠标指针放在元素边界内时所使用的光标形状:

说明
url 使用自定义光标的URL
default 默认光标
auto 默认
crosshair 十字线
pointer 指示连接的指针(一只手)
move 指示可移动的指针
e-resize 指示矩形框的边缘可向右移动
ne-resize 指示矩形框的边缘可向右上移动
nw-resize 指示矩形框的边缘可向左上移动
n-resize 指示矩形框的边缘可向上移动
se-resize 指示矩形框的边缘可向右下移动
sw-resize 指示矩形框的边缘可向左下移动
s-resize 指示矩形框的边缘可向下移动
w-resize 指示矩形框的边缘可向左移动
text 指示文本
wait 程序忙
help 可用帮助

9.浮动布局

(1)传统网页布局的三种方式

网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置。
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):

  • 普通流(标准流)

  • 浮动

  • 定位

标准流(普通流/文档流)

所谓的标准流: 就是标签按照默认方式排列。

  1. 块级元素会独占一行,从上向下顺序排列。
    常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
  2. 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
    常用元素:span、a、i、em 等。
    以上都是标准流布局,我们前面学习的就是标准流, 标准流是最基本的布局方式 。
    这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。

(2)浮动布局

HTML任何实体元素都可以被设置float浮动属性,设置后元素大小默认根据内容来定,当然也可以自己指定尺寸。

设置了浮动(float)的元素最重要特性:

  • 脱离标准普通流的控制而移动到指定位置(俗称脱标)。
  • 浮动的盒子不再占有原先位置的空间。
  • 浮动元素会具有行内块元素特性。

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

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

如:

1
2
3
4
5
6
.containner, div {
float: left;
}

三个属性:left向左、right向右、默认值none自身无浮动但允许左右有浮动元素,inherit表示继承父元素的该属性

清除浮动:

1
2
3
4
5
清除浮动:
div {
clear: both;
}
三个属性:left清除左侧、right清除右侧、both清除左右两侧
  • 在多个float元素中:

    float与clear属性值相同且均为left或right、或clear为both时,clear的作用相当于让之后的元素换行,若其中一个为left而另一个为right(或相反),好像没观察到有什么变化(?)。

10.定位布局

让盒子自由的在某个容器内移动位置或者固定屏幕中某个位置,并且可以覆盖住其他盒子。

(1)定位组成

定位 = 定位模式 + 边偏移 (+堆叠顺序)

①定位模式position

由CSS的position属性定义定位模式:

属性值 描述
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
②边偏移

边偏移就是定位的盒子移动到最终的位置,有如下属性:

属性 示例 描述
top top: 80px; 顶部偏移量,定义元素相对于父元素上边线的距离×,向下移动的距离√
bottom bottom: 90px; 底部偏移量,定义元素相对于父元素下边线的距离×,向上移动的距离√
left left: 100px; 左侧偏移量,定义元素相对于父元素左边线的距离×,向右移动的距离√
right right: 10px; 右侧偏移量,定义元素相对于父元素右边线的距离×,向左移动的距离√

(2)静态定位(默认)

静态定位是元素的默认定位方式,即无定位的意思,语法:

1
2
3
选择器 {
position: static;
}

(3)相对定位relative

作用:相对于原来默认布局中的位置来偏移!

语法:

1
2
3
4
选择器 {
position: relative;
top/bottom/left/right: 10px;
}

相对定位的特点:

  • 移动的时候参照的是自己原来的位置

  • 原来在标准流的位置继续占有,在新的位置不会挤开其他元素而是会堆叠在一起,后面的盒子仍然以标准流的方式对待它

(4)绝对定位abdolute

绝对定位是元素在移动位置的时候,是相对于它最近的祖先元素来说的。

如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document 文档)。

实际效果为相对于整个文档页面而言,会随着页面一起滚动。

会覆盖住其它元素,也就是说不会占有位置,不会影响其他元素的布局。

语法:

1
2
3
4
选择器 {
position: absolute;
top/bottom/left/right: 10px;
}

子绝父相:当绝对定位的盒子的父亲使用了相对定位的话,那么它的偏移量就是相对于父亲的位置而不是文档页面!

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

① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。

这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。

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

当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

(5)固定定位fixed

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

语法:

1
2
3
4
选择器 {
position: fixed;
top/bottom/left/right: 10px;
}

固定定位的特点:

  • 以浏览器的可视窗口为参照点移动元素,跟父元素无关,也不随滚动条滚动!
  • 固定定位不再占有原来的空间和位置!(脱标了)

(6)粘贴定位sticky

可以被认为是相对定位和固定定位的混合

语法:

1
2
3
4
选择器 {
position: sticky;
top/bottom/left/right: 10px;
}

粘性定位的特点:

  • 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  • 粘性定位占有原先的位置(相对定位特点)
  • 必须添加 top 、left、right、bottom 其中一个才有效
  • 位置始终会在父元素内,父元素处于视口范围内时才会粘贴在设定的位置处!

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

(7)总结

img
  • 一定记住 相对定位、固定定位、绝对定位 两个大的特点: 1. 是否占有位置(脱标否) 2. 以谁为基准点移动位置。

  • 学习定位重点学会子绝父相

11.display: flex弹性布局(伸缩盒)

一个伸缩盒布局由一个伸缩盒和盒中所在的伸缩项目构成,当一个标签元素的display属性值设置为flex时,它就变成了伸缩容器,同时容器内的所有元素都自动变为伸缩项目,伸缩项目的floatclearvertical-align属性将失效!

容器拥有两根隐形的轴,水平的主轴(main axis),和竖直的交叉轴

image4f27eef8aaf46ce9.png

(1)伸缩盒属性

flex-direction

决定主轴的方向(即项目的排列方向),有以下值:

  • row默认值,水平方向从左往右排列。
  • row-reverse:水平方向从右往左排列。
  • olumn:垂直方向从上往下排列。
  • column-reverse:垂直方向从下往上排列。
flex-wrap

该属性定义,如果一条轴线排不下,如何换行:

  • no-wrap:默认值,不换行。
  • wrap:自动换行。
  • wrap-reverse:自动换行,第一行在最下方。
flex-flow

复合属性,同设置上面的flex-directionlex-wrap,默认值为row nowrap

1
flex-flow: row wrap;
justify-content

定义了项目在主轴上的对齐方式,具体对齐方式与轴的方向有关。

下面按照主轴是默认的水平方向进行说明:

  • flex-start:默认值,左对齐。
  • flex-end:右对齐。
  • center:居中对齐。
  • space-between:两端对齐——紧挨着容器边框,而每个伸缩项目之间间隔均分相等。
  • space-around:伸缩项目之间的间隔相等,伸缩项目之间的间隔比到容器边框的间隔大一倍。
image62f9a087f696ab4b.png
align-items

定义项目在交叉轴上如何对齐,具体的对齐方式与交叉轴的方向有关。

下面按照交叉轴是默认的垂直方向进行说明:

  • flex-start:默认值,项目顶端对齐(垂直交叉轴的起点对齐)。
  • flex-end:项目底端对齐(垂直交叉轴的终点对齐)。
  • center:项目居中对齐。
  • baseline:按每个项目中第一行文字的基线对齐。
  • stretch:默认值,如果伸缩项目未设置高度或设为auto,那么其高度会占满整个容器。
image2f9220622565962a.png
align-content

伸缩项目多跟轴线的对齐方式,如果伸缩项目只有一根轴线则此项失效。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:居中对齐。
  • space-between:两端对齐——紧挨着容器边框,而每个伸缩项目之间间隔均分相等。
  • space-around:轴线之间的间隔相等,轴线之间的间隔比轴线到边框的间隔大一倍。
  • stretch:默认值,如果伸缩项目未设置高度或设为auto,那么其高度会占满整个容器。

(2)项目属性

order

定义项目依次出现的顺序,默认为0,数值越小排列越靠前,可以为负数。

flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

  • 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。  

  • 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink

定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

  • 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

  • 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

  • 负值对该属性无效。

flex-basis

定义了在分配多余空间之前,项目占据的主轴空间(main size)。

  • 浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

  • 它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

flex

flex属性是flex-growflex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

  • 该属性有两个快捷值:auto 1 1 auto) 和 none0 0 auto)。
align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

  • 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline:项目的第一行文字的基线对齐。

12.网格布局

12.过渡动画

13.层叠样式表的优先级

简单来讲,当同一属性被多处定义且值各不相同时,最终会展示哪种属性值就是其优先级的问题。

CSS层叠样式表优先级的计算在其内部是比较复杂的过程,我们只需记住,一般情况下,内联式样式 > 内部样式 > 外链式。

若要将某处被覆盖的属性优先级置为最高,只需在其属性值后面紧跟!important即可。

评论