CSS基础知识整理

一、css基础

1.选择器

选择器的作用：选择页面对应的标签，方便后续设置样式

1.1标签选择器

标签选择器：通过标签名，找到页面中所有这类标签，设置样式

1.2类选择器

类选择器：标签上的class属性，class的属性值叫类名

语法：“.”+类名

注意点：

• 类名可以由数字、字母、下划线和中划线组成，但不能以数字或中划线开头

• 一个标签可以有多个类名，类名之间以空格隔开

• 类名可以重复，一个类选择器可以同时选择多个标签

1.3id选择器

id选择器：#id属性值

注意点：

• 所有标签上都有id属性
• id属性值类似于身份证号码，在一个页面中是唯一的，不可重复
• 一个标签上只能有一个id属性值
• 一个id选择器只能选择一个标签

1.4后代选择器

后代选择器：根据html标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：父选择器 父选择器的后代标签 { css属性：属性值；}

后代包括：儿子、孙子、重孙子等等

1.5子代选择器

子代选择器：>

父元素子代中满足条件的元素

语法：选择器1>选择器2{ css}

在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置标签

子代只包括：儿子

选择器之间用>隔开

1.6并集选择器

并集选择器：选择器1,选择器2，… ，选择器n

每组选择器可以是基础选择器也可以是复合选择器

并集选择器一般一行写一个

1.7交集选择器

交集选择器：选择器1选择器2{css}

选中页面中 同时满足 多个选择器的同一个标签

选择器之间是紧挨着的

标签选择器必须写在最前面
例：

p.head.title{}

1.8hover伪类选择器

伪类选择器：设置鼠标悬停效果

选择器语法：选择器:hover {css}

伪类选择器选中的是元素的某种状态

伪元素的伪类选择器用法：

a:hover::after{}

1.9通配符选择器

通配符选择器：*{}

找到页面所有的标签

开发中使用极少，只会在特殊情况下才会用到

小页面用于去除标签默认的margin和padding

1.10结构伪类选择器

1.10.1查找单个

作用：根据元素在html中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

选择器	意义
E:first-child{}	匹配父元素中第一个子元素，并且是E元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child{}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child{}	匹配父元素中倒数第n个子元素，并且是E元素

1.10.2查找多个

E:nth-child{}

n的注意点：

• n为整数0，1，2，3…

• 通过n可以组成常见公式

功能	公式
偶数	2n,even
奇数	2n+1,2n-1,odd
找到前5个	-n+5
找到第5个之后的	n+5

1.10.3 根据类型查找

E:nth-of-type(n){ }

只在父元素的同类型（E）子元素范围中，匹配第n个

:nth-child->直接在所有还在中数个数

:nth-of-type->先通过该类型找到符合条件的一堆子元素，然后在这一堆子元素中数个数

1.11 类与id的区别

• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

实际开发中:

1. 类选择器用的最多
2. id一般配合js使用，除非特殊情况，否则不要使用id设置样式
3. 实际开发中会遇到冗余代码的抽取（即将一些公共的代码抽取到一个公共的类中）

1.11链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法：

语法	功能
a:link{}	选中a链接 未访问过 的状态
a:visited{}	选中a链接 访问之后 的状态
a:hover{}	选中 鼠标悬停 的状态
a:active{}	选中 鼠标按下 的状态

注意点：

如果需要同时实现以上4种伪类状态效果，需要按照LVHA顺序书写

1.12焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件

选择器语法：

input：focus {

​    background-co`在这里插入代码片`lor: ;

}

效果：表单控件获取焦点时默认会显示外部轮廓线

1.13属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择input标签

选择器	功能
E:[attr]	选择具有attr属性的E元素
E[attr=“val”]	选择具有attr属性并且属性值等于val的E元素

2.字体文本相关样式

2.1字体样式

2.1.1字体大小font-size

• 需要设置单位px，否则无效
• 谷歌默认文字大小是16px

2.1.2字体粗细font-weight

取值：

效果	元素	元素
正常	normal	400px
加粗	bold	700px

• 不是所有字体都提供了9种粗细，因此部分取值页面中无变化
• 实际开发中以正常、加粗两种取值使用最多；

2.1.3字体样式font-style

取值：

效果	元素
正常（默认）	normal
倾斜	italic

2.1.4常见字体系列

2.1.4.1 无衬线字体（sans-serif）

1. 文字笔画粗细均匀，并且首尾无装饰
2. 网页中大多采用无衬线字体
3. 常见系列字体：黑体、Arial

2.1.4.2 衬线字体（serif）

1. 文字笔画粗细不匀，并且首尾有笔锋装饰
2. 报刊书籍中应用广泛
3. 宋体、Times New Roman

2.1.4.3 等宽字体（monospace）

高与宽相等的字体

2.1.5字体系列font-family

常见取值：具体字体1，具体字体2，具体字体3，，，，字体系列

渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则会显示下一个字体

• 如果都不支持，则显示操作系统的默认字体
• 字体名称中存在多个单词，推荐使用引号包裹
• 最后一项字体系列不需要引号包裹
• 开发时，尽量使用系体常见自带字体

2.1.6字体font相关属性的连写

连写font：style weight size family;

SWSF

1. 只能省略前两个，如果省略了相当于设置了默认值
2. 若同时设置了单独和连写形式
3. 要么把单独的样式写在连写的下面
4. 要么把单独的样式写在连写里面

若写在前面，会被后面连写中的默认样式覆盖

2.1.7样式的层叠问题

如果给同一个标签设置了相同样式，此时样式会层叠（覆盖），写在最下面的会生效

2.2文本样式

2.2.1文本缩进

文本缩进text-indent

单位px,em

1em = 1个font-size

2.2.2文本水平对齐方式

水平方向对齐：
text-align:center

2.2.3文本修饰

text-decoration

元素	效果
underline	下划线（常用）
line-through	删除线
overline	上划线（几乎不用）
none	无线（常用）

2.3水平居中方法总结

2.3.1text-align:center

能让哪些元素水平居中

1. 文本
2. span标签，a标签
3. Input标签，img标签
4. div 、p、h（大盒子）水平居中

2.3.2margin:0 auto

可以通过margin:0 auto;实现

注意点：

• 直接给当前元素本身设置就可以了
• margin:0 auto一般针对于有固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

2.4行高

控制行间距

line-height

取值：数字+px或倍数（当前标签font-size的倍数）

• 让单行文本垂直居中可以设置line-height:文字父元素高度
• 网页精准布局时，会设置line-height：1；可以取消上下间距

如果同时设置了行高和font连写，注意覆盖问题

swsf

font:style weight size/line-height family

2.5emmet语法

emmet语法

通过简写语法，快速生成代码

语法：

类型	代码
标签名	div Tab
类选择器	.red tab
id选择器	#one tab
交集选择器	p.red#one tab
子代选择器	ul>li tab
内部文本	ul>li{我是内容} tab
创建多个	ul>li*3 tab

3.背景属性

3.1背景颜色

background-color(bgc)

关键字、rgb表示法、rgba表示法、十六进制

背景色默认是透明色：rgba(0,0,0,0) transparent;

3.2背景图片

backgound-image(bgi)

backgound-image:url("图片路径");

• url中的引号可以省略
• 背景图片默认是在水平和垂直方向平铺
• 背景图片不能撑开盒子

3.3背景平铺

backgoun-repeat(bgr)

repeat （默认）

no-repeat

repeat-x

repeat-y

3.4背景位置

backgound-position(bgp):水平方向的位置x 垂直方向的位置y；

属性值

1. 方位名词（最多表示9个）

水平方向 left,center,right

垂直方向 top center bottom

2. 数字+px(坐标)

坐标系，原点（0，0），（x,y)

将图片左上角的坐标与坐标点重合

• 方位名词可以与坐标取值混用，第一个取值表示水平，第二个取值表示垂直

3.5背景相关属性连写

backgound:color image repeat position

• 要设置单独的样式，就要放在连写里面或者后面
• 如果写在前面样式会被连写里的默认样式覆盖

3.6-img标签与背景图片的区别

img是一个标签，不设置宽高会默认以原尺寸显示

div+backgound-image 需要设置div的宽高，因为背景图片只是一个装饰，不能撑开div标签

4.元素显示模式

4.1块级标签

属性：dispaly:block

显示特点：独占一行（一行只能显示一个）

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高

代表标签DIV、P、H系列、ul、li、di、dt、dd、form、header、nav、footer。。。

4.2行内标签

display:inline

一行可以显示多个

宽度和高度由内容撑开

不可以设置宽高

代表：a、span、b、u、i、s、strong、ins、em、del

4.3行内块元素

display:inline-block

一行可以显示多个

可以设置宽高

代表：Input、textarea、button、select

特殊情况：img标签有行内块元素特点，但是chrome调试工具中显示结果是inline

4.4元素显示模式转换

改变元素默认的显示特点，让元素符合布局要求

• display:block 使用较多
• display:inline-block 使用较多
• display:inline 使用较少

4.5HTML嵌套规范注意点

1. 块级元素一般做为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素

但是：p标签中不要嵌套div、p、h等块级元素

2. a标签内部可以嵌套任意元素

a标签不能嵌套a标签

4.6伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

元素：HTML设置的标签

伪元素：CSS模拟出来的标签效果

::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：

• 必须设置content属性才生效
• 伪元素默认是行内元素

4.7标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时采用的一套排版规则，规定了应该以何种方式排列元素

块级元素：从上往下，垂直布局，独占一行

行内元素或行内块元素：从左往右，水平布局，空间不够自动拆行

5.三大特性

5.1继承性

5.1.1继承性的介绍

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性：

1. color
2. font-style font-weight font-size font-family
3. text-indent text-align
4. line-height

可以通过调试工具判断样式是否继承

5.1.2好处：在一定程度上减少代码

可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式

直接给body设置统一的font-size,从而统一不同浏览器的默认字大小

5.1.3特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

1. a标签的color会继承失效
   只能在a标签内设置color
2. h系列的font-size会继承失效
3. div的高度不能继承，但是宽度有类似继承的效果

5.2层叠性

• 给同一个标签设置不同的样式-此时样式会层叠叠加-会共同作用在标签上
• 给同一个标签设置相同的样式-此时样式会层叠覆盖-最终写在最后的样式会生效

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

5.3优先级

目的：能够计算css权重，分析并解决css冲突问题

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的样式

优先级公式：

继承<通配符选择器<标签选择<类选择器

注意：

！important写在属性值后面，分号在前面

！important不能提升继承的优先级，只要是继承就优先级最低

实际开发中不建议用important

5.4权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效

权重叠加计算公式：（每一级之间不存在进位）

（第一级，第二级，第三级，第四级）

（0，0，0，0）

第一级	第二级	第三级	第四级
0	0	0	0

复合选择器中：行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数

比较规则：

1、先比较第一级数字，如果比较出来了，之后的通通不看

2、如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的通通不看

3、。。。。

4、如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说算）

注意：如果！important不是继承，权重最高

5.5调试工具查错

遇到样式出不来，通过调试工具找错

查错步骤 ：

1. 点击检查
2. 哪里不会点哪里 在elements找到对应的元素
3. 看styleh中有没有自己设置的选择器，如果没有，一般是选择器写错了

常见原因1：选择器单词拼错

常见原因2：选择器结构写错

4. 如果选择器有，但是样式没出来，看是否有删除线（没生效）：

常见原因1：样式被注释

常见原因2：样式被覆盖

5. 看是否有小三角形（报错）：

常见原因1：属性值后没有分享

常见原因2：出现中文标点

常见原因3：属性名或属性值单词拼错

二、css布局

1.盒子模型

1.1盒子的概念

• 页面中每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
• 浏览器在渲染（显示）网页时，会将网页中的元素看做一个个的矩形区域，我们也形象的称之为盒子

1.2盒子模型

css中规定每个盒子分别由：内容区域（content)、内边距区域（padding），边框区域（border）、外边距区域（margin）构成，这就是盒子模型

1.3border的相关属性

• border-width：边框宽

• border-style：实线solid，虚线dashed，点线dotted

• border-color：边框颜色

1.3.1边框-连写形式

border：width style color

快捷键：bd+tab

1.3.2边框-单方向设置

border+方位名词

1.3.3盒子实际大小初级计算公式

盒子实际大小=左（上）边框+右（下）边框+内容

1.4padding取值

padding:

取值：上下左右；上下，左右；上，左右，下；上，右，下，左

从上开始，顺时针数

padding单方向取值

padding+方位名词

盒子实际大小=左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距

1.5margin取值

1.5.1margin:

取值：上下左右；上下，左右；上，左右，下；上，右，下，左

从上开始，顺时针数

margin的单方向设置

margin-方位名词

方向	属性	效果
水平方向	margin-left	让当前盒子往右移动
水平方向	margin-right	让右边的盒子往右移动
垂直方向	margin-top	让当前盒子往下移动
垂直方向	margin-bottom	让下面的盒子往下移动

1.5.2默认内外边距：

body标签默认有margin：8px

p标签默认有上下的margin

ul标签默认由上下的margin和padding-left

1.5.3外边距的正常现象

水平布局的盒子，左右的margin都是正常的，互不影响

最终两者距离为左右margin的和

1.5.4外边距折叠现象-合并现象

垂直布局的块级元素，上下的margin会合并

最终两者距离为margin的最大值

解决：避免就好，只给其中一个盒子设置margin即可

1.5.5外边距折叠现象-塌陷现象

互相嵌套的块级元素，子元素的margin-top会合并作用在父元素上

会导致父元素一起往下塌陷

解决：

1. 给父元素设置border-top或者padding-top（分割父子元素的margin-top）

2. 给父元素设置overflow：hidden

3. 转成行内块元素 display:inline-block

4. 设置浮动float:left

1.5.6行内元素的margin和padding无效情况

• 水平方向的margin和padding布局中有效

• 垂直方向的margin和padding布局中无效

1.5.7不会撑大盒子的特殊情况

• 如果子盒子没有设置宽度，此时默认是父盒子的宽度

• 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

1.6內减

1.6.1手动內减

手动将多余的部分在内容中减去

1.6.2自动內减

box-sizing:border-box;

浏览器自动调整

1.7 BFC介绍

格式化上下文（Block formatting Context）

是web页面的可是css渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

创建BFC方法：

1. html标签是BFC盒子

2. 浮动元素是BFC元素

3. 行内块元素是BFC元素

4. overflow属性的取值不为visible。如auto、hidden

5. 。。。。

BFC盒子常见特点：

1. BFC盒子会默认包裹住内部子元素（标准流、浮动）->应用：清除浮动

2. BFC盒子本身与子元素之间不存在margin的塌陷现象->应用：解决margin的塌陷

3. 。。。。

2.浮动

2.1浮动的作用

浮动作用：早期：图文环绕

现在：网页布局：让垂直布局的盒子变成水平布局

2.2浮动的代码

浮动的代码

float:right/left

2.3浮动的特点

• 浮动元素会脱离标准流（脱标），在标准流中不占位置，相当于从地面飘到了空中，在地面不占位置，后面的元素自动补位

• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

• 浮动元素会受到上面元素边界的影响

• 浮动元素有特殊显示效果

• 一行可以设置多个，可以设置宽高

• 浮动的元素不能通过text-align:center或者margin:0 auto;让浮动元素本身水平居中

2.4清除浮动

含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：子元素浮动后脱标->不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

2.4.1清除浮动的方法

方法1：直接设置父元素高度

优点：简单、粗暴

缺点：有些布局中不能固定父元素高度：新闻，京东推荐模块

方法2：额外标签法

1、在父元素内容的最后添加一个块级元素

2、给添加的块级元素设置：clear:both;

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂。

方法3：单伪元素清除法

用伪元素代替额外标签

1、基本写法

.clearfix::after{

content:'';

display:block;

clear:both;

}

2、补充写法

.clearfix::after{

content:'内容';

dispaly:block;

clear:both;

/*在网页中看不到伪元素内容*/

height:0;

visibllity:hidden;

}

优点：在项目中使用，直接给标签加类即可清除浮动

方法4：双伪元素清除法

.clearfix::before,.clearfix::after {

content:' ';

display:table;(类似于块）

}

clearfix::after{

clear:both;

}

优点：在项目中使用，直接给标签加类即可清除浮动

方法5：给父元素设置 overflow:hidden

实际开发中，伪元素清除法用的多

3.定位和装饰

3.1定位

网页常见布局方式

1. 标准流

• 1.块级元素独占一行->垂直布局
• 2.行内元素/行内块元素一行显示多个

2. 浮动

• 可以让原本垂直布局的块级元素变成水平布局

3. 定位

• 1.可以让元素自由的摆放在网页的任意位置
• 2.一般用于盒子之间层叠的情况

3.1.1定位的应用场景

1. 解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

2. 可以让盒子始终固定在屏幕中的某个位置

3.1.2定位的基本使用步骤

1、设置定位方式

属性名：position

常见属性值:

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2、设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用

选取的原则一般是就近原则（哪边近选那个）

常见偏移值：

方向	属性名	属性值	含义
水平	left（权重比right大）	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top（权重比bottom大）	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

3.1.3 四种定位

3.1.3.1静态定位

静态定位是默认值，就是之前认识的标准流

position:static

注意点：

• 静态定位就是之前的标准流，不能通过方位属性进行移动
• 之后说的定位不包括静态定位，一般特指后几种

3.1.3.2相对定位

自恋型定位，每次定位，相对于自己之前的位置进行移动

position:relative;

特点：

1. 需要配合方位属性实现移动
2. 相对于自己原来的位置进行移动
3. 在页面中占位置->没有脱标

应用场景：

• 1.配合绝对定位（子绝父相）
• 2.用于小范围的移动

3.1.3.3绝对定位

拼爹型定位，相对于非静态定位的父元素来进行移动

position:absolute;

特点：

1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置->已脱标

应用场景：子绝父相

绝对定位到底相对于谁进行移动？

分两种情况：

1、先祖元素中没有定位-----默认相对于浏览器进行移动

2、祖先元素中有定位-------相对于最近的有定位的祖先元素进行移动

子绝父相的介绍

让子元素相对于父元素进行自由移动

含义：

子元素：绝对定位

父元素：相对定位

好处：父元素是相对定位，则对网页布局影响最小

子绝父绝的特殊场景

在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可

原因：父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

3.1.3.4固定定位

死心眼型定位，相对于浏览器可视区域进行定位移动

position：fixed；

特点：

1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置----已经脱标

应用场景：让盒子固定在屏幕中的某个位置

例如，侧边导航栏

3.2装饰

3.2.1元素的层级关系

不同布局方式元素的层级关系

标准流<浮动<定位

不同定位方式元素的层级关系

默认层级相同

根据html结构来看，写在下面的元素层级更高，会覆盖上面的元素

3.2.2更改定位元素的层级

改变定位元素的层级

z-index：1；

数字越大层级越高

3.2.3垂直对齐方式

3.2.3.1基线

浏览器文字类型元素排版中存在用于对齐的基线（baseline）

3.2.3.2文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行中显示时，其底部不是对齐的

3.2.3.3垂直对齐方式

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

3.2.4光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动
not-allowed	禁止显示光标

3.2.5边框圆角

border-radius

常见取值：数字+px 、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

应用：圆形 正方形盒子border-radius：50，胶囊 长方形盒子border-radius：高度的一半

3.2.6溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条

属性名：overflow

常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

3.2.7元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏

常见属性：

1. visibility：hidden

2. display：none

区别：

1. visibility：hidden隐藏元素本身，并且在网页中占位置

2. display：none隐藏元素本身，并且在网页中不占位置

注意点：

开发中经常会通过display属性完成元素的显示隐藏切换

display：none；（隐藏）、display：block（显示）

3.2.8元素整体透明度

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字

1表示完全不透明

0表示完全透明

注意点:

opacity会让元素整体透明，包括里面的内容，如：文字、子元素等

3.2.9边框合并

场景：让相邻表格边框进行合并，得到细线边框效果

border-collspan:collspan

3.2.10用css画三角形

步骤：

1. 设置一个盒子

2. 设置四周不同颜色的边框

3. 将盒子宽高设置为0，仅保留边框

4. 得到一个三角形后，将其他三个三角形设为透明色

改变三角形形状

通过调整不同边框的宽度，可以调整三角形的形态

3.2.11文字阴影

text-shadow

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
color	可选，阴影颜色

3.2.12盒子阴影

box-shadow

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

3.2.13 过渡

transition：width 3s;

待续

4.项目实战

4.1精灵图

精灵图：项目中将多张小图片，合并成一个大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

精灵图的使用步骤：

1. 创建一个盒子
2. 通过pxcook量取图片大小，将小图片宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过pxcook测量小图片左上角坐标，分别取 负值 设置给盒子的background-position:x y

4.2项目前置认知

4.2.1网页与网站的关系

网页：书页

网站：书

网页与网站的概念

网站：提供特定服务的一组网页集合

网页：网站中的每一页

4.2.2 SEO三大标签

search engine optimization：搜索引擎优化

作用：让网站在搜索引擎上的排行靠前

提升引擎的常见方法：

1. 竞价排名

2. 将网页制作成html后缀

3. 标签语义化（在合适的地方使用合适的标签）

SEO三大标签

1. title：网页标题标签

2. description：网页描述标签

3. keywords：网页关键字标签

4.2.3有语义的布局标准

有语义的布局标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

以上标签显示特点和div一致，但是比div多了些语义

4.2.4 ico图标的设置

4.2.5版心的介绍

场景：把页面的主体内容约束在网页中间

作用：让不同大小的屏幕都能看到页面的主体内容

.container {

width:1240px;

margin:0 auto;

}

版心常用类名：container、wrapper、w等

4.2.6 css的书写顺序

css的书写顺序

不同的css书写顺序会影响浏览器的渲染性能

顺序	类别	属性
1	布局属性	display、position、float、clear、visibility、overflow
2	盒子模型+背景	width、height、margin、padding、border、background
3	文本内容属性	color、font、text-decoration、text-align、line-height
4	点缀属性	cursor、border-radius、text-shadow、box-shadow

开发中推荐 多用类+后代，一个选择器中的类选择器的个数推荐不超过3个

4.3项目结构搭建

4.3.1文件和目录的搭建

项目结构搭建

1. 新建项目文件夹 xtx-px-client, 在vscode中打开

在实际开发中，项目文件夹不建议使用中文

所有项目相关文件都保存在 xtx-pc-client目录

2. 复制favicon.ico到xtx-pc-client目录

一般习惯将ico图标放在项目根目录

3. 复制images和uploads目录到 xtx-pc-client 目录中

images：存放网站固定使用的图片素材，如：logo、样式装饰图片等

uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片等

4. 新建index.html在根目录

5. 新建css文件保存网站的样式，并新建以下css文件：

• base.css：基础公共样式
• common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
• index.css:首页样式

4.3.2基础公共样式

基础公共样式

场景：一般项目开始前，首先会去掉浏览器默认样式，设置为 当前项目需要的初始化样式

作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发

要求：已经准备好base.css代码，同学们需要认识，项目中可以直接引用

4.3.3 index页面骨架

index页面骨架设置

网页语言：lang=“zh-cw”

网页标题

网页描述

网页关键词

ico图标

相关外联样式