个人笔记，css部分

word转md格式上传，备份使用

1.css的介绍

css：

层叠样式表，给html标签编辑样式，由选择器+{css属性}构成

引入方式：

一般写在head标签内 title标签下方，在style标签内（内嵌式，小案例使用）

也可以写在单独的.css文件中，需要通过写在title标签下link标签引入（外链式，项目中使用）

还可以将css直接写在标签内的style属性中（行内式，配合js使用）

css书写顺序

1.定位

2.浮动/display

3.盒子模型（margin border padding 宽高背景色）

4.文字样式

浏览器执行效率会更高

# 2.基础选择器

1.标签选择器（是一类标签，不能单独某一个）

结构：

标签名{

}

可以覆盖所有标签样式，但无法调整某一个的样式

2.类选择器

结构：

.类名{

}

需要在标签上定义class属性，所有标签都可以class定义，class内定义类名

类名只能由数字，字母，下划线，中划线构成，但不能以数字和中划线开头

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

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

3.id选择器

结构：

#id属性值{

}

需要在标签上定义id属性，所有标签都可以被id定义，id内定义id属性值

类名只能由数字，字母，下划线，中划线构成，但不能以数字和中划线开头

id属性值不能重复，每个id属性都是唯一的，一个id选择器只能选中一个标签

4.通配符选择器

结构

*{

}

找到页面中所有标签，设置样式

一般只用于清除默认内外间距

margin:0

padding:0

3.文字和文本样式

1.字体大小

属性名：font-size

取值：数字+px（像素）

谷歌浏览器的默认文字大小是16px

2.字体粗细

属性名：font-weight

取值：

正常：normal

加粗：bold

纯数字（100-900的整百数，不是所有字体都有九种粗细）：

正常：400

加粗：700

3.字体倾斜

属性名：font-style

取值：

正常：normal

倾斜：italic

4.字体

属性名：font-family

取值：具体字体1,具体字体2,具体字体3（从前往后使用已安装字体）

windows字体默认微软雅黑，mac电脑默认苹方字体

5.样式的层叠问题

如果给同一个标签设定相同样式，则样式会层叠，后面覆盖前面，写在最下面的会生效

例：color: red;

color: blue;

最后字体是蓝色的

6.font相关属性的连写

属性名：font

取值：style weight size/line-height family（只能省略前两个和行高，空格隔开，字号和行高用/隔开）

例：font: italic 700 66px 宋体;

7.文本缩进

属性名：text-indent

取值：数字+px

数字+em（1em=当前标签font-size一个字的大小）

8.水平对齐方式

属性名：text-align（也可以作用于input，img，span，a标签）

取值：
left（左对齐）

center（居中）

right（右对齐）

vertical-align: middle;图片垂直居中

9.文本修饰

属性名：text-decoration

取值：

underline（下划线）

line-through（删除线）

overline（上划线，几乎不用）

none（清除拥有的修饰）

10.行高

上间距下间距和文本高度之和

属性名：line-height

取值：

数字+px

倍数（当前标签font-size的倍数）

如果设置了行高与font连写，size和行高之间用/隔开

行高为1时为1倍文字 无任何间距

4.chrome调试工具

鼠标在空白位置右键点击检查

或者按f12或者fn+f12

5.常用颜色设置

1.十六进制表示法：

#六位十六进制数，如果12位，34位，56位相同

就可以缩写成三（四五）位十六进制数

2.rgba表示法

rgba（红色色值（0-255），绿色色值（0-255），蓝色色值（0-255），透明度（0-1））

3.rgb表示法

rgba（红色色值（0-255），绿色色值（0-255），蓝色色值（0-255））

拓展：

标签水平居中的方法：

margin:0 auto

6.选择器进阶

1.复合选择器

后代选择器：

格式：选择器1（空格）选择器2{css}

设置在选择器1内的选择器2的属性（多代都可以选中）

例子：
div p{
  color: red;
 }

<p>这是一个p标签（还是黑色）</p>

<div>

<p>

这是div的儿子p（变红）

</p>

</div>

子代选择器：

格式：选择器1＞选择器2{css}

设置在选择器1内子代（仅一代）的选择器2的属性

2.并集选择器

同时选择多种标签设置一样的样式

格式：选择器1，选择器2（，选择器3……）{css}

3.交集选择器

修改同时满足多个选择器的标签的样式

格式：选择器1（没有空格）选择器2

4.hover伪类选择器

鼠标悬停元素上时设置样式

格式：选择器:hover{css}

7.背景相关属性

1.背景颜色

属性名：background-color，默认是透明色

2.背景图片

属性名：background-image: url(图片地址);

3.背景平铺（复制多次图片）

属性名：background-repeat

属性值：

repeat（水平垂直都平铺）

no-repeat（不平铺）

repeat-x（横向平铺）

repeat-y（竖直平铺）

4.背景位置

属性名：background-position: 水平方向位置 垂直方向位置;

属性值：

水平方向：left，center，right

垂直方向：top，center，bottom

或者都使用数字+px（正数向右向下移动，负数向左向上，0 0是左上角）

5.背景相关属性连写

属性名：background：color image repeat position/size（可以按照需求省略，不分先后顺序）

如果图片和盒子一样大，直接写background：url（）；

6.img和background代码的区别

重要的使用img不重要的使用bakground

8.元素（指代的是尖括号的标签）显示模式

1.块级元素

独占一行，宽度默认是父元素的宽度，高度默认由内容撑开，如：div，p标签

2.行内元素

一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高，如：span，b，a标签

3.行内块元素

一行可以显示多个，可以设置宽高，如：input，textarea，img标签

4.显示模式的转换

属性名：display

属性值：

block（块级元素）

inline-block（行内块元素）

inline（行内元素）

5.标签的嵌套

块级元素一般用作大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等等

但是p标签内不能嵌套div，p，h系列等块级元素

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

但是a标签不能嵌套a标签

9.css特性

1.继承性

子元素默认继承父元素样式的特点

（只有文字控制属性都可以继承，例如颜色，文字大小，字体等等）

特殊情况：

a标签的color会失效

h系列的font-size会失效

（即子元素自身拥有特殊属性不继承父元素样式）

2.层叠性

给同一个标签设置不同的样式，样式叠加，共同作用在标签上

给同一个标签设置相同的样式，样式覆盖，写在最后的样式会生效

（前提是选择器优先级相同）

3.优先级

优先级高的选择器覆盖优先级低的选择器样式

优先级公式：

继承<通配符选择器（*）<标签选择器<类选择器（class）<id选择器（id）<行内样式<!important

选择器选中范围越广，优先级越高

!important写在属性值的后面，分号的前面，不能提升继承的优先级，不建议使用

叠加计算：

复合选择器：

权重计算：

行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数

（前面的个数多就不用比后面了，除了继承!important最高）

都是继承，看跟哪一个父级最接近

10.盒子模型

页面的每一个标签都可以看做一个盒子

css规定盒子由：内容区域（content），内边距区域（padding），边框区域（borde），外边距区域（margin）构成

盒子最终尺寸=宽+边框+内边距 X 长+边框+内边距

1.内容区域的宽度和高度

属性名：width/height

属性值：数字+px

2.边框（border）

属性名：border（-方向（单独设置一个方向的边框））

属性值（不分前后，空格隔开）：

数字+px（边框线粗细）

颜色（rgba，#等等）

线条种类：dashed（虚线），solid（实线），dotted（点线）

3.内边距（padding）

属性名：padding

属性值：数字+px（最多跟四个值 分别指上右下左（顺时针））

（跟三个值的情况指的是上 左右 下）

（跟两个值的情况指的是上下 左右）

常见情况：

防止字数等超出盒子范围，可以不设置height，使用padding制作

4.盒子自动内减

给盒子设置属性与固定值:box-sizing：border-box

5.外边距

属性名：margin

属性值：数字+px（最多跟四个值 分别指上右下左（顺时针））

（跟三个值的情况指的是上 左右 下）

（跟两个值的情况指的是上下 左右）

也可以：margin（-方向（单独设置一个方向的外边距））

6.清除默认内外边距

例如p标签，h系列标签默认有margin，ul标签默认有padding和margin标签

清除方式：

*{
margin:0
padding:0
}

7.版心居中（即网页的有效内容）

属性名与值：margin：0 auto

8.其他情况

合并现象：

垂直布局的块级元素上方的margin-bottom和下方的margin-top会合并

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

解决方式：垂直布局只给其中一个设置margin就行

塌陷现象：

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

解决方式：

给父元素增加border-top（设计稿没有边框不能使用）或者padding-top

给父元素设置overflow：hidden（这种方法最好）

转成行内块元素

设置浮动

行内元素的内外边距的问题：

如果想要通过margin或者padding改变行内标签的位置，垂直方向无法生效

解决方式：

通过修改line-height实现

修改display

11.浮动

1.结构伪类选择器

通过元素在html中的结构关系查找元素

一般用于查找父级元素中的子元素

格式：

元素标签:nth-child(n) （n为第几个元素）

元素标签:nth-last-child（n为倒数第几个元素）

n内也可以填入公式（n从0开始正向+1）：

偶数：2n

奇数：2n-1

x的倍数：xn

找到前x个：-n+x

找到从第x个往后：n+y

2.伪元素

用css模拟出标签效果

种类：

::before（在父元素内容的前方增加伪元素）

::after（在父元素内容的最后增加伪元素）

必须设置content（内容）属性，使用’'添加文字，属于行内元素

3.标准流

标签默认的排列方式

4.浮动

让标签完美的一行排列

浮动的表情会脱离标准流，在标准流中不占位置

浮动比标准流高半个级别，可以覆盖标准流中的元素但不能覆盖文字，文字会贴边显示

浮动找浮动，下一个浮动元素在上一个浮动元素左右浮动，顶部对齐，不想顶部对齐可以加margin-top

互动的元素一行显示，可以设置宽高，即具备行内块特点

浏览器在解析换行的行内块/行内标签时，会产生一个空格的距离

属性名：float

属性值：right（在网页右边）

left（在网页左边）

浮动元素不能使用text-align和margin:0 auto修改位置

5.清除浮动

清除浮动属性带来的影响

（父子级标签，子集浮动，父级没有高度，会层叠）

方法：

给父级设置高度（不推荐）

在父元素内容的最后加一个块级元素，给添加的块级元素设置clear：both

单伪元素标签（与上方原理一样，工作中常用）：

.clearfix::after {

    content: '';

    display: block;

    clear: both;

    /* 为了兼容性 */

    height: 0;

    visibility: hidden;

      }

双伪元素标签：

.clearfix::brfore,（解决外边距塌陷问题）

.clearfix::after{

    content:'';

    display:table

}

clearfix::after{

    clear:both

}

给父元素增加overflow：hidden

12.定位

让元素自由的摆放在网页的任意位置

用于box的层叠，让box固定在屏幕中某个位置

属性名：position

属性值：

relative（相对定位）

absolute（绝对定位）

fixed（固定定位）

设定偏移值（不设定则不改变位置）：

水平：left（right）数字+px

垂直：top（bottom）数字+px

一般采取就近原则每个方向二选一即可

如果都写了，以left和top为准

1.相对定位：

相对于自身原定位置移动

代码：position:relative

不改变标签显示模式，占有原来的位置，没有脱离标准流控制

2.绝对定位

先找已经定位的父级，如果有这样的父级就优先以它为参照物

父级不需要改动时一般使用相对定位（子绝父相）

父级没有定位以浏览器窗口为参照物定位

默认相对于浏览器可视区域移动

代码：position:absolute

改变原有标签的显示模式，具备inline-block的特点，需要设定尺寸

不占有原来的位置，已经脱离标准流控制

绝对定位的盒子不能使用margin auto居中

想要水平居中可以使用：

left:50%(左边边缘移动到百分之五十)+margin-left:-宽度的一半

也可以：

left:50%+transform：translate（-50%，0）

垂直居中：

top:50%（上方边缘移动到百分之五十）+margin-top:-高度的一半

也可以：

top:50%+transform：translate（0，-50%）

3.固定定位

只相对于浏览器进行定位，不随网页滚动改变位置

代码：position:fixed

脱离标准流控制，具备inline-block特点

4.元素的层级关系

标准流<浮动<定位

不同定位之间层级相同，html写在下面的元素层级更高

可以通过z-index：整数修改，整数越大层级越高，默认值为0

13.装饰

1.垂直方向对齐

浏览器碰到行内，行内块标签对齐，默认按文字处理，会上下不齐

属性名：vertical-align

属性值：

middle（居中）

top（顶对齐）

bottom（底对齐）

2.光标类型

设置鼠标在元素上显示的样式

属性名：cursor

属性值：

pointer（小手，提醒用户可以点击）

text（工字形，提醒用户可以选择文字）

move（十字光标，提醒用户可移动）

3.边框圆角

属性名：border-radius

取值：数值+px/百分比

左上角开始赋值，顺时针赋值，没有取值看对角，最大取到50%

正圆：

box必须是正方形，border-radius：50%

胶囊形状：

box必须是长方形，border-radius：盒子高度的一半

5.溢出部分显示效果

属性名：overflow

属性值：

hidden（溢出部分隐藏）

scroll（无论是否溢出，显示滚动条）

auto（根据是否溢出自动显示或隐藏滚动条）

6.元素本身隐藏

属性：

visibility:hidden/display:none(一般使用这个)

visibility会保留占位，用的概率较小

7.元素整体透明度

使整体透明，包括里面的元素

属性值：opacity

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

0完全透明，1完全不透明

8.精灵图

将多张小图片合成一张大图片，减少服务器发送次数，提高页面加载速度

使用步骤：

创建一个盒子，设置盒子得尺寸和小图尺寸相同

见精灵图设置为盒子的背景图片

修改背景图位置：

background-position：水平方向位置 垂直方向位置

正方向向右 向下

精灵图图标一般使用行内标签，注意转换display

9.设置背景图片大小

属性名：

background-size：宽度 高度

取值：

数字+px

百分比（相当于盒子自身宽高的百分比）

contain（将背景图片等比例缩放，知道不会超出盒子的最大，可能留白）

cover（覆盖，将背景图片等比例缩放，刚好填满整个盒子，可能图片显示不全）

工作中图的比例和盒子的比例一般相同

10.盒子阴影

属性名：box-shadow

取值（按顺序）：

h-shadow：必须，水平偏移量，允许负值

v-shadow：必须，垂直偏移量，允许负值

blur：可选，模糊程度

spread：可选，阴影扩大

color：阴影颜色

inset：将阴影改为内部阴影

11.过渡

使元素的样式慢慢变化，通常配合hover使用，一般添加在box内，不是hover内

属性名：

transition：过渡的属性 时间，过渡的属性 时间，过渡的属性 时间（一般使用all）

取值：

过渡的属性：all（所有属性），具体属性名（例如width）

时间：数字+s

14.骨架标签

1.DOCTYPE文档说明

<!DOCTYPE html>

文档类型生命，告诉浏览器该网页的HTML版本

2.网页语言

<html lang="en">

作用：搜索引擎归类，浏览器翻译识别

可以改成zh-CN（简体中文）

3. 字符编码

 <meta charset="UTF-8（万国码，收录全球认证国家语言编码）">

规定网页字符编码

开发中统一使用UTF-8即可

4.SEO三大标签

SEO（搜索引擎优化）

（让搜索引擎内网站排名考前

常见方法：

竞价排名

将网页制作成html后缀

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

三大标签：

title：

meta：description：

meta：Keywords：

5.浏览器图标

图标文件一般放在根目录

代码名：link：favicon

项目制作（文件全程不使用中文）：

1.创建项目文件夹

xtx-pc-client #项目目录
-index.html #首页的html文件
-favicon.ico #ico图标
-images #固定使用的图片素材，如：logo，样式图
-uploads #非固定使用的图片素材。如：商品图片，宣传图
-css #css文件夹
-base.css #基础公共样式
-common.css #该网站中多个网页的相同模块重复样式
-index.css #首页的css文件