CSS

1元素的宽度指什么？

元素的宽度指元素在文档中占据的空间的大小

宽度的计算 = 内容区的宽度 + 内边距 + 边框 + 外边距

2.width

定义：用于定义元素的宽度

说明：宽度包含外边距，但是width不定义外边距

3.尺寸属性值的写法（单位）有几种？

• 绝对单位

  • px：像 素 pixel
    • 100px:该元素在任何分别率下都显示为100px

• 相对单位

  • 1.%
  • 2.em
  • 3.rem
  • 4.vh / vw
    • vh:表示视口高度的百分之一
      • v：表示viewport
    • vw：表示视口宽度的百分之一
      • v：表示viewport
      • w：表示width

• 视口时什么？

  • 视口是网页的可见区域

4.像素是什么？

• 像素是屏幕呈像的最基本的单位
• 在通电时会发光的二极管
• 像素分为逻辑像素和物理像素
• 逻辑像素就是信息（颜色信息和位置信息）

5.与尺寸有关的属性

• height
• min-height
• max-height
• width
• min-width
• max-width
• padding
• margin
• line-height
• font-size
• border

6.背景属性组

1.背景颜色 background-color

• 颜色会覆盖到 border下面
• 不可以定义渐变色
• 背景色属性值的写法
  • 1.十六进制#fff
  • 2.英文单词
  • 3.rgb（）
  • 4.rgba（红色，绿色，蓝色，不透明度）
  • 5.hsl（）
  • 6.hsla（色相，饱和度，明度，不透明度）

2.背景图片 background-image

3.背景重复性 background-repeat

4.背景定位 background-position

语法：

background-position：水平偏移 垂直偏移 ; 

5.背景固定性 background-attachment

• scroll 背景图跟随主视口和元素视口一起移动
• fixed 无论是主视口还是元素视口，背景都不动
• local 本地背景图跟随元素视口一起移动

6.背景尺寸 background-size

设置背景图尺寸

• auto 默认值 根据图片的原始宽高以及比例计算尺寸
• contain 元素必须包含整个图片 ，元素的局部可能会出现空白
• cover 图片必须覆盖整个容器 可能会隐藏掉部分图片
• 直接设置
  • 第一个是宽，第二个是高

7.背景图片剪切background-clip

• border-box 默认值
• padding-box 将背景图只显示在内边距和内容区内部
• content-box 将背景图只显示在内容区内部
• text 将背景图只显示在文字的下方

8.背景源 background-origin

• padding-box 默认值，使背景图片开始位置是以内边距为参照物
• border-box 使背景图片开始位置是以边框为参照物
• content-box 使背景图片开始位置是以内容区为参照物

9.背景 background

10.背景渐变 background-images

渐变指两种颜色之间的平滑过渡

• linear-gradient 线性渐变
  • 指两种颜色之间按照直线方式平滑过渡

background-image: linear-gradient(渐变角度,颜色列表);

• radial-gradient 径向渐变渐变
  • 指两种颜色之间按照射线方式平滑过渡
  • 只能是渐变形状 at 渐变位置

background-image: radial-gradient(渐变形状 || 渐变大小 at 渐变位置,颜色列表);

• 角度渐变
• 指两种颜色之间按照360度旋转方式平滑过渡

font

字体属性是什么？

• CSS Fonts 是 CSS 的一个模块，

• 它定义了与字体相关的属性以及如何加载字体资源。

• 它允许您定义字体的样式：

  • 字体系列
  • 字体大小
  • 字体粗细
  • 行高
  • 以及当多个字符可用于单个字符时要使用的字形变体。

• font符合属性

• font-family设置字体系列

• font-style设置字体样式

• font-variant字体变形

• font-weight字体粗细

• line-height行高

• font-size字体大小

*说明字体分为两种：

• 通用字体系列：指一系列具有共同风格的字体系列，如衬线和非衬线
• 特殊字体：指某一个字体，比如：微软雅黑、苹方、思源黑体

font-family

定义：用于设置页面字体外观。

语法

body{
    font-family:font-family: Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif
}

解析：

body{
    font-family:英文字体，苹果中文字体，window中文字体，
        通用非衬线字体
}

语法规则：

• 可以设置多个字体名称或字体系列名称作为属性值

• 多个字体名称之间使用逗号隔开

• 如果字体名称含有特殊字符需要加引号，比如：

  • 'Microsof Yahei'空格是特殊字符
  • 'sans-serif'横线是特殊字符
  • '微软雅黑'中文也是特殊字符

• 特殊字体在前，通用字体在后

• 英文字体在前，中文字体在后

font-size

定义： 定义页面字体的大小

语法

body{
    font-size:相对值|绝对值
}

使用相对单位设置font-size

• 关键词：medium 默认值
• %
• em
• rem
• vh/vw

使用绝对单位设置font-size

• px

用法：

• 在做网页的时候，第一步要确定根字号大小

html{
    font-size:16px;/*根元素字号16px*/
    font-size:62.5%;/*根元素字号10px*/
}

• 在设置页面字号的时候，要有字号层级的意识，也就是说你需要确定：
  • 页面最大字号：最大的标题元素
  • 页面最小字号：版权文字、补充说明描述性的文字
  • 正文字号：一般是14px或16px

font-weight 字重

定义：定义页面字体粗细

语法：

body{
    font-weight：关键词|数值
}

属性值含义：

• normal ：表示正常粗细
• lighter：更细
• bold ： 粗
• bolder：更粗

line-height

定义

设置字体行高

什么是行高

行高指两条基线之间的距离。

*什么是基线

基线指一行文字底部对齐的线、

对于英文而言，四线三格本的从上到下第三条线就是基线。

对于中文好像没有基线

[图片上传失败...(image-b872bd-1669201378911)]

三种框

在HTML语言中，存在三种看不见的框：

• 字符框：字符框的高度由font-size决定
• 行框：行框的高度由行高决定
• 元素框：全部行框高度之和

这三种框决定了元素的宽度

语法

body{
    line-height：数字|像素|关键字|百分比
}

• normal:默认值。表示正常的行高。该值是当前元素的字号的1.4倍左右。
• px：使用px设置行高没有灵活性，不会自动根据字号大小进行调整行高
• 百分比：工作原理同px，不会自动根据字号大小进行调整行高
• 数字：强烈推荐使用数字设置字号，数字值会根据元素当前字号自动调整行高该属性的应用值是这个无单位数字乘以该元素的字体大小。

通常字号设置在1.2~2倍之间

font-style

定义

用于定义字体风格，是否倾斜

语法：

body{
    font-style：normal|italic|oblique
}

属性值：

• normal 默认值，不倾斜
• italic 倾斜
• oblique 倾斜

font-variant

定义：定义小型大写字母

语法：

h1{
  font-variant：normal|small-caps；  
}

属性值：

• normal 默认值
• small-caps 小型大写字母

@font-face自定义字体

font-family：是一个描述符，用于描述向系统字体列表中添加新字体的名称

1. 属性名单词
   font：字体
   face：外观
2. 定义
   用于定义元素的自定义字体
3. 自定义字体？
   自定义字体是非系统字体，也是非安全字体。
4. 什么是安全字体？
   安全字体就是系统字体；系统字体就是安全字体。
   设置font-family首选安全字体。
   自从@font-face规则出现后，我们可以在页面中引入非安全字体
5. 语法

@font-face{
    /*大括号：设置引入自定义字体的规则*/
    /*font-family是一个规则符，不是属性，用于描述向系统字体列表中添加新字体的名称*/
    font-family:;
    /*src：描述符，描述自定义字体文件的位置*/
    src:url()
}
body{                                                                      
    
}

6. 自定义字体免费字库

   • www.iconfont.cn
   • 英文字库：谷歌字库

   如何添加自定义字体

   1. 把自定义字体放在项目目录下 --确定文件
   2. 使用@font-face规则把自定义字体文件添加到本地字库系统中。--添加
   3. 使用font-family引用自定义字体。--引用

网页布局

web1.0时代：一盘散沙 混乱 没有标准 IE大行其道

1989年 没有CSS：使用标签属性来做页面外观

布局方式：表格布局

web2.0时代：HTML结构 + CSS样式 + JS行为 互相独立、分离

2000年以后

布局方式：div布局

• 流动布局
• 浮动布局：
  • 工字形布局
  • 口字形布局
  • 两栏、三栏布局
  • 自适应布局
  • 双飞翼布局
  • 圣杯布局
• 定位布局

2013年：移动互联网时代

• 弹性盒模型：
• 网格布局：普适布局系统。

浮动布局

不应该当作布局，当时当作布局只是无奈之举

浮动是什么？

• 浮动是HTML元素存在的第二种状态
• 在这种状态下：
  • 块：所有的元素都是块元素
  • 浮：浮动的元素会脱离文档流（浮动元素后面的流动元素会占据浮动元素的原有位置）
  • 动：浮动的元素会向左或向右无限运动，直到它碰到另一个元素。
  • 并排：浮动元素会发生并排
  • 混排：文字围绕图片排列

浮动属性

float：定义元素的浮动方式。

语法：

选择器{
    float：none|left|right；
}

属性值：

• none：默认值，不浮动
• left：让元素向左浮动，
• right：让元素向右浮动

如何设置元素并排

第一步；确定子元素

第二步：确定父元素

第三步：给子元素添加float属性

第四步：给子元素设置合理宽度

第五步：清除浮动

高度塌陷，元素上移

高度塌陷是指子元素浮动之后，父元素失去高度。后续元素上移，造成布局发生混乱

如何清除浮动

1. BFC|haslayout
2. 使用伪元素
3. 使用空元素

clear属性

定义：清除元素两侧的浮动影响

语法：

footer{
    clear：left|right|both|none
}

属性值：

• left：清除左侧浮动影响
• right：清除右侧浮动影响
• both：清除两侧浮动影响
• none：不清除

定位布局

网格布局

text

text-align

定义

定义文本的对齐方式。

语法

p{
    text-align：left|center|right|justify
}

属性值

• left：规定文本左对齐 默认值
• center ：规定文本居中对齐
• right：规定文本右对齐
• justify ： 规定文本两端对齐

text-decoration

定义：定义文本修饰线

语法：

p{
    text-decoration：overline|line-through|underline|none
}

属性值：

• overline：添加上划线
• line-through 删除线
• underline：添加下划线
• none：取消下划线 默认值

text-shadow

定义：定义文本阴影

语法：

h1{
    text-shadow：x-offset y-offset blur color
}

属性值：

• x-offset：设置水平偏移 单位像素 可以为负 正为向右 负为向左
• y-offset ： 设置垂直偏移 单位像素 可以为负 正为向下 负为向上
• blur：模糊半径。 数值越大越模糊
• color : 设置阴影的颜色

text-indent

定义：定义文本缩进

语法：

p{
    text-indent：相对值|固定值
}

属性值：

• 相对值：
  • em 使用字符设置文本缩进
  • rem
  • %
  • vh/vw
• 绝对值
  • px：使用像素设置文本缩进。

text-transform

定义：定义英文字符的小写转换

语法：

body{
    text-transform：none|capitalize|uppercase|
lowercase
}

属性值：

• none 默认值 对原字母不进行转换
• capitalize：文本中的每个单词以大写字母开头
• uppercase：全部转成大写字母
• lowercase：全部转成小写字母

知识点

1. 记住文本两端对齐
2. 如何添加文本阴影
3. 如何添加删除线
4. 设置文本缩进的正确姿势

页面布局中的对齐

网页内容都有那些

• 文字
• 图片
• 视频
• 音频

页面元素有哪些

• 块元素
• 行内元素
• 文字
• 图片
• 视频
• 音频

布局是什么？

处理页面元素之间的位置关系

• 对齐元素
• 处理元素的大小

我们学过几种布局

• 流动布局
• 浮动布局
• 定位布局
• 弹性布局

对齐是什么？

对齐指的是

• 对齐元素
  • 块元素
  • 行内元素
  • 行内块元素
• 对齐元素内容
  • 文字
  • 图片

对齐种类

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin:0;padding:0;
}
body{
    line-height: 1.5;
}
.box{
    width:600px;
    height:200px;
    background-color: yellow;
    margin:0 auto;/* 块元素水平对齐 */
}
p{
    background-color: aquamarine;
}
.box1{
    text-align: center;/* 块元素内容水平对齐 */
    margin:0 auto;/* 块元素水平对齐 */
    line-height: 200px; /*块元素内容垂直对齐(单行文本) */
}
.box2{
    height:48px;
    padding:76px 0;
}
.box2 p{
    width:50%;
    margin: 0 auto;
}
.box3{
    height:48px;
    padding-top:152px;
}
.box3 p{
    width:50%;
    margin: 0 auto;
}
.box4{
    text-align: center;
    height:40px;
    padding:80px 0;
}
img{
    /* margin:0 auto; 不可以*/
    /* vertical-align:middle; 不可以 */
    height:40px;

}

.box5 p{
    background-color:skyblue;
}
.box5 img{
    vertical-align: middle;
}
.box5 em{
    background-color: pink;
    
    
}
.box6 p{
    background-color: black;
    vertical-align: middle;
}
.box6 span{
    font-size:50px;
    background-color: aqua;
    vertical-align: middle;
}
.box6 em{
    background-color: pink;
    vertical-align: middle;
    
}
table{
    width:600px;
    margin:0 auto;
}
td{
    border:1px solid red;
    height:100px;
    text-align: center;
}
td:nth-child(1){
    vertical-align: top;
}
td:nth-child(2){
    vertical-align: middle;
}
td:nth-child(3){
    vertical-align: bottom;
}
/* 

vertical-align:
定义：①设置文本基线的对齐方式。②设置<td>的垂直对齐方式

*/
    </style>
</head>
<body>
    块元素水平居中对齐|单行文本水平居中对齐|单行文本垂直居中对齐
    <div class="box box1">
        <p>Hello World!Hello World!</p>
    </div>
    多行文本垂直居中对齐
    <div class="box box2">
        <p>Hello World!Hello World!Hello World!Hello World!Hello World!!</p>
    </div>
    多行文本底部对齐
    <div class="box box3">
        <p>Hello World!Hello World!Hello World!Hello World!Hello World!!</p>
    </div>
    图片的水平和直居中对齐
    <div class="box box4">
        <img src="./images/logo.png" alt="">
    </div>
    图片文本基线对齐方式vertical-align
    <div class="box box5">
        <p><img src="./images/logo.png" alt=""><em>Hello World</em></p>
    </div>
    文本基线对齐方式vertical-align
    <div class="box box6">
        <p><span>Hello World</span><em>Hello World</em></p>
    </div>
    td标签内容的水平和垂直对齐
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        
    </table>
</body>
</html>

display

1. block块元素
2. inline 行内元素
3. inline-block 行内块元素
4. none 显示无元素
5. table 表格元素
6. list-item列表元素
7. flex 弹性元素
8. grids网格元素

行内元素和块元素区别

选择器

1.选择器是什么？

• 选择器就是选择元素的方式
• 选择元素方式的多样化造成选择器的多样化

选择器的分类

一、全局选择器：

*通配符：用于选择所有元素

二、基础选择器

1. 元素选择器：选择所有标签
2. id选择器：选择一个标签
3. class选择器：选择一组标签

三、属性选择器

通过标签的属性匹配元素

所有的属性选择器都以方括号括起来

[attr]

表示带有以 attr 命名的属性的元素。

[attr=value]

表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]

表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]

表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

[attr^=value]

表示带有以 attr 命名的属性，且属性值是以 *value *开头的元素。

[attr$=value]

表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。

[attr*=value]

表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。

[attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] 实验性

在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

四、伪类选择器

伪类选择器的标志是 单冒号 :

1. :link
2. :active
3. :hover
4. :visited
5. :focus匹配焦点元素（部分元素有焦点：表单元素，超链接）
6. :nth-chird()匹配第几个元素
7. :first-chird()匹配第一个元素
8. :last-chird()匹配最后一个元素
9. :root匹配根元素
10. :not()匹配不是某个元素的元素
11. :checked检查选中只能设置给单选复选

五、伪元素选择器

1. ::first-letter选中文本的第一个字母
2. ::after
3. ::before
4. ::first-line选中文本的第一个行

六、组合选择器

组合选择器就是把上面这五类组合在一起使用

1. 分组选择器 ,：使用 ,组合
2. 后代选择器：使用空格组合
3. 子元素选择器：使用>组合
4. 相邻兄弟选择器：使用+组合

css变换属性

导读

• 变换属性

单词

• transform 变换、转换。变形
• transform-origin：
• transform-style：
• perspective：透视
• perspective-origin:
• backface-visibility:
• translate: 移动
• scale：缩放
• rotate：旋转
• skew：倾斜

translate（）函数

定义：translate（）函数用于对元素进行移动变换。

语法：

div{
    transform：translateX（）；
    transform：translateY（）；
    transform：translateZ（）；
}

perspective

定义：定义z轴原点到屏幕的距离。开启3D空间上下文

（z轴是垂直屏幕的轴）

特征：大透视小变换；小透视大变换。

语法：

box{
    perspective：none|px
}

• none 默认值
• px：最小值是1px

透视

透视指在平面上描绘物体的空间关系的方法。

透视的特点：

1. 近大远小
2. 近快远慢
3. 近实远虚