HTML、CSS

Pikachu_999

已于 2023-08-11 08:22:10 修改

阅读量166

点赞数

文章标签：前端 javascript html

于 2023-08-10 20:47:59 首次发布

本文链接：https://blog.csdn.net/Pikachu_999/article/details/132216235

版权

一、网页的组成部分

HTML结构层：使用各种标签来组成网页的基本结构
CSS样式层：使用各种属性对结构层的一种美化
JS行为交互层：给网页添加动态效果、以及行为交互

二、HTML基础知识

1、什么是HTML

HTML：超文本标记语言（Hyper Text Markup Language）
可以通过创建一个文本文档，将后缀名修改成.html的方式创建一个html。而.html就是为了告诉浏览器这是一个网页

2、HTML的基本结构组成

Document：告诉浏览器html的版本
html：告诉浏览器这是一个网页
type：类型
dead：网页的头部
UTF-8：万国码，用来定义字符的编码格式
body：页面的主体，也是编写代码的地方

三、标签

1、行内元素的标签

行内元素：默认是横向排列的且无法实现宽高设置的标签

文本加粗：< b >文本< / b >
作用：让文本实现加粗效果
文本倾斜：< i >文本< / i >
作用：让文本实现倾斜效果
下划线：< u >文本< / u >
作用：对文本添加下划线
删除线：< s >文本< / s >
作用：对文本添加删除线，常用降价
上角标：< sup >文本< / sup >
下角标：< sub >文本< /sub >
文本修饰标签：< font >文本< /font >
属性：
1、color：字体颜色
2、size：字体大小
3、face：字体样式（浏览器默认字体为宋体）
换行标签：< br >（属于单标签）
作用：让文本强制换行
水平线标签：< hr >-------forizontal水平的意思
作用：用来进行上下分割区域的；上下文本分成两个区域
特点：水平线默认是带阴影的，两个颜色，一个深色一个浅色；默认是从左侧通道右侧
属性：
1、noshade=“noshade”取消阴影
注：属性和属性值一样，可以直接写属性，不用写属性值
2、color：水平线的颜色
3、width：水平线的宽度，设置后水平线，默认会位于水平线中间位置
4、align：对齐方式
取值：
left=左
right=中
center=右
5、size：水平线的高度
超链接标签：< a >文本< /a >
功能：
1）超链接功能：实现不同页面之间的跳转。
基本语法< a href=“路径地址”>文本/图片< / a >
路径：
相对路径——相对于文件和文件夹之间的关系查找对应的页面
绝对路径——是一个完整的地址。例如：https://www.baidu.com/
2）锚点功能：实现相同页面之间不同区域之间的跳转，
基本语法：< a href=”#锚点名“>文本< / a >
跳转区域：< div id=”锚点名“ >< / div >
属性：
1）target：打开方式
取值：
_self：本窗口打开
_blank：新窗口打开
_parent：在父级框打开
_top：在顶部打开
2）href：路径

2、特殊符号

& lt;====小于号（<）
& gt;====大于号（>）
& emsp;==全角空格
& nbsp;==半角空格
& reg；& trade;=商标
& copy;==版权

3、块元素

1）div标签：有的人把div叫做盒子标签，但盒子的概念太大，任何一个容器标签都可以叫做盒子，只不过是盒子大小的问题。而div是一个比较大的盒子，它里面可以容纳任何标签，是最外层的标签，
作用：做区域，区块划分的，划分完毕后方便布局做页面，默认是纵向排列
2）p标签：叫做段落标签，让文本独立成段，段落与段落之间存在较大的段落间距
基本语法：< p >文本< /p >
注意事项：p标签里面可以放置任何文本修饰类标签，但不能放置区块划分类型的标签
3）列表标签
1、有序列表ol
含义：有顺序的列表清单
基本语法：
< ol >
< li >文本< /li >
< /ol >
”o“代表的是order（有序）、”l“代表的是list（清单、列表）
属性：type------控制ol的列表项显示类似
取值：A、a、I、i、1
属性：start-----控制ol的列表项从第几个开始
2、无序列表ul
含义：没有顺序的列表清单
基本语法：
< ul >
< li >文本< /li >
< /ul >
“u”代表的是unorder（没有顺序）
属性：type—控制列表ul的列表项的显示类型
取值：disc—黑色实心圆
circle—空心圆、圆环
square----黑色实心方块
none-----取消列表项
注意：ul、ol里面只能放置li，如果需要嵌套别的标签，则需要放在li里面
3、自定义列表dl
含义：自行定义的列表清单，主要应用于：问答列表，图文混排布局
基本语法：< dl >
< dt >问题/图片< /dt >
< dd >回答/图片的解释< /dd >
< /dl >
注意：dl里面可以放在多个dt和多个dd；但一般情况下只允许放在一个dt个一个dd
4）form标签：表单标签
作用：用来收集用户信息，类似一张网，把输入的信息一网打尽，把这些数据带到服务器上面，然后添加对应的数据里面
基础语法：<form action=“提交跳转的地址” method=”提交方式“ target=”打开方式“
输入框、密码框、单选框、提交按钮等，均属于表单中的控件，用来暂存数据信息的
属性：
Action：提交的跳转的地址；配合form标签使用
Submit：完成跳转
Target：打开方式，是否在原来的窗口中展示新的页面
Method：提交方法
Post：密文提交，加密的形式提交数据
Get：明文提交，能看到提交的数据
5）表单的控件：input
基础语法：< input type=”?”>
type取值：
submit：提交按钮
reset：重置按钮
button：普通按钮
image：图像按钮
6）H5新增的增强型表单
Color：颜色拾取器
Search：搜索框
Tel：唤起手机拨号盘
Number：数值
属性：

Min：最小值
Max：最大值
Value：当前值
Step：步长值

Range：滑块
属性与数值的一样
Date：日期（包含年月日）
Month：月份
Week：周期
Time：时间
Datetime-local：获取本地时间
Email：电子邮箱
属性：required：当前内容必须输入
Url：地址栏
属性与电子邮箱一样
7）H5新增的新属性
数值和滑动块里面
min/max/step（步长值）
Required：验证不能为空
Disabled：禁用，紧张使用
Readonly：只读，只能看
Autofocus：自动获取光标（焦点）
For：关联
必须配合文本
注意：for的值必须和前面控件的id值一样
List：用于模糊搜索
主要是用来仿写模糊搜索框的功能
List属性用于input里面，与datalist标签的id属性必须保持一致
Autocomplate：自动提示功能

On：开启自动提示
Off：关闭自动提示

Pattern：用来简易的正则判断

4、四、行内块

图片标签：img
1）如果页面图片是同级关系，图片名字可以直接当作路径
2）如果页面在的文件夹和图片是同级关系，需要线返回上一级，然后在去找对应的图片（…/）
3）页面所在的文件家和图片所在的文件夹是同级关系，需要先返回上一级，在进入对应的文件夹里面再去找图片
作用：就是让一个图显示在浏览器中
属性：

src：图片路径
Width：宽度
Heirght：高度

注意：图片可以设置宽度高度，但设计开发的时候几乎很少设置宽度和高度。因为为了防止图片变形、挤压、失真
4）alt：图片描述
注意：只有在图片没有正常加载，或者显示破损文件的时候才会提示，不破损不提示
5）title：文本提示
注意：只有鼠标放在图片上面的时候才会提示的文本，无论图片是否破损，只要鼠标放在上面就会提示

四、CSS层叠样式表

1）什么是CSS层叠样式表
Cascading（层叠）style（样式）sheet（表）
2）作用：对于HTML结构的一个修饰
3）基本语法：
选择器{
属性：属性值；
}
4）选择器：查找页面元素的一种方式方法
5）{}：样式规则或样式声明，用来修饰选择器查找到的元素的，规定选择器查找到的元素实现何种样式
6）样式表的优先级：！Important>行内>内部>外部

1、基本选择器

1）标签选择器
通过标签的名字查找页面的元素
弊端：匹配的精准度不高，范围过于广泛
2）类选择器：“.“
给元素起class类名,在css里面通过类名查找页面元素
基本语法:
起名字:< div class=“box” >< /div >
查找元素: .box{属性:属性值;属性:属性值;}
注意:类名查找使用的时候必须带:.
类名命名的时候,必须遵循以下规则

不能以数字开头,
不能使用汉字
不能使用特殊符号
使用小写字母开头,配合字母数字,下划线,连接符一起使用

3)特殊的点:任何一个标签都可以带类名,相同的样式可以出现相同的类名
4)元素可以起多个类名,多个类名共用一个class,多个名字之间使用空格隔开:实际开发的时候我们最多三个类名;
弊端:
精准度还是不高,不同的标签可以出现相同的名字

3）Id选择器：“#”
与类选择器相似
4）通配符选择器：“*”
通配符选择器:匹配页面中所有的元素
基本语法: *{}
作用:匹配页面中所有元素,取消内外边距;
*{margin:0;padding:0}
大部分的元素都再带内边距和外边距;开发的时候需要把对应的元素默认间距取消掉
没有带内外边距:div,文本修饰类型标签
但是:

    会使用另外一个选择器替换通配符选择器
        群组选择器:节约代码,把公共代码提取出来
        基本语法:选择器1,选择器2,选贼器3,选择器4{属性:属性值;}
        html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input,img,table,form{margin:0;padding:0}

5）群组选择器：用逗号隔开
6）后代选择器：中间用空格隔开

后代选择器:
匹配当前元素内所有符合条件的元素(儿子辈分,孙子辈分,重孙子辈分)
基本:选择器1 选择器2{}
子代选择器:
匹配当前元素内所有符合条件的儿子辈分的元素(只匹配下一级,儿子)
基本:选择器1>选择器2{}
判断题:后代选择器一定匹配的数量比子代选择器匹配的数量多
有一种可能是等于的关系:没有孙子辈分的元素;

7）子代选择器：“>”
8）伪类选择器
伪类选择器:
含义:元素本身没有这种装填,需要通过鼠标的一系列的操作行为(点击,划过,拖拽等等)才能实现的一种样式;
实际开发的时候目前只在使用一个伪类:悬停;
但是面试题里面需要我们详细的记忆里面的内容
四个伪类:(:前后均没有空格)

选择器:link{} 鼠标访问前的样式
选择器:visited{}鼠标访问后的样式
选择器:hover{} 鼠标悬停时的样式

选择器:active{} 鼠标点击时的样式(鼠标落点瞬间)

     开发标准是按照以上顺序进行书写的
     实际上我们四个伪类一起应用的时候大部分都应在超链接上面
     但是我们大部分也都在把hover单独拎出来使用

简易：选择器的权重：id>类>标签>通配符
复杂：需要考虑权重值相加的问题

2、背景属性

1）background-color：背景色
2）background-image：url(“图片路径”)；背景图片
3）background-repet：是否平铺

repet===允许平铺
no-repet=不平铺

4）background-position：背景图定位
5）background-attachment：fixed
6）复合属性：background：no-repet 背景色 url（）背景图位置 fixed
注意：复合属性是可以跟一个值，也可以跟多个值，顺序也是可以改变的

3、精灵图

含义：
精灵图也叫雪碧图、妖怪图，网站中使用到对应的小图标，放在一个背景透明的图片上面；如果网站中有需要到对应的小图标的时候，我们通过背景插入的形式，配合背景定位属性来实现上对应的小图标显示再某一个位置。这个技术被称为精灵图技术。
为什么要使用精灵图？
节约访问服务器的次数，使用精灵图能节约内存

4、列表规则

主要对于列表标签的修饰：有序列表、无序列表，在实际开发中使用的无序列表的频率是比较高的。
1）list-style-type：列表项类型
取值：

dise：黑色实心圆
circle：圆环、空心圆
square：黑色实心方块
none：取消列表项

2）list-style-image：列表项图片
3）list-style-position：列表项的位置
取值：

inside：里面
outside：外面

4）复合属性：list-style：type image position
注意：复合属性后面可以跟一个值，也可以跟多个值；多个值使用时用空格隔开。多个值没有顺序。但在实际开发中。使用的是list-style：none；取消列表项
五、文本规则
1）font-size：文本大小
取值：

px单位：像素单位（固定值）
em单位：相对单位（相对于文字大小）

2）font-family：文本字体
取值：

汉字不需要带引号
后面可以跟多个字体（安全字体）：读取时会按照从左到右依次读取，如果第一个能实现则实现第一个字体，如果不能就依次往后
浏览器的默认字体是宋体：因为高版本浏览器伪类增强用户的体验度，把默认字体更改成立微软雅黑
如果英文字体是由多个单词组成的一个字体，则需要带引号

3）font-wight：文本加粗
取值：

lighter=====100：细体
、normal=====400：正常字体
bold=======700：加粗字体
bolder======900：具有强调意义的加粗

4）font-style：文本倾斜
取值：

normal：正常字体
italic：倾斜
oblique：具有强调意义的倾斜

5）text-decoration：文本修饰线
取值：

underline：下划线
line-through：中划线
overline：上划线
none：取消修饰线

6）color：文本颜色
取值：

英语单词
RGB
十六进制

7）font-variant：小型大写字符
取值：
small-caps
8）text-align：文本对齐方式
取值：

left：左侧对齐
right：右侧对齐
center：居中对齐
justify：两端对齐

9）line-height：行间距
10）letter-spacing：字间距
11）word-spacing：词间距
12）text-transform：大小写转换
取值：

capitalize：每一个英文单词首字母大写
lowercase：全部小写
uppercase：全部大写

13）text-indent：首行缩进

5、浮动规则

含义：
就是让元素漂浮起来，主要是为了解决让原本纵向排列的元素，横向排列
属性：float
取值：

none：不浮动
Left：左浮动
Rigfht：右浮动

注意：

只要添加了浮动，并且取值不为none时，就会导致脱离文档流，不占据页面空间，后面的元素会补位上去，浮动影响的是后面的元素
如果浮动后剩余的空间不够容下一个元素，则最后一个元素会在这行显示，如果高度不一样的话，就会出现卡住的效果。最后一个元素补位的位置显示，是参照他前面一个元素留下的剩余的空间，以右侧和下方为参照

6、清除浮动的影响

clear：
取值：

none：默认值，不清除
Left：清除左浮动
Right：清除右浮动
Both：清除所有浮动

7、盒子模型

1）border：边框
含义：代表元素的边界，任何一个元素都有边框
属性：

border-width：边框的粗细
border-style：边框的类型
取值：
- solid：单实线
- double：双实线
- dashed：线状虚线
- dotted：点状虚线
border-color：边框的颜色
border：复合属性

2）padding：内边距（内填充）
含义：内容到边框之间的区域
3）margin：外边距
含义：元素到元素，边框到边框之间的距离
4）内容区域：设置的宽度与高度
5）padding与margin的特殊取值
1、能否取负值
padding：不能取负值，没有任何意义
margin：可以取负值，作用，可以让元素实现位置移动
2、margin的特殊情况

让元素位于水平居中的位置
前提：必须要有宽度；主要应用版心区域
取值：margin：0 auto；
其他特殊情况；用于调整外边距

A）兄弟关系的外边距
a）竖直排列的兄弟
上下的外边距，取最大值，默认存在一个外边距重合的特殊情况
b）横向排列的兄弟
左右的外边距求和，默认存在外边距重合，但因为浮动形成了BFC独立区域
B）父子关系外边距
6）盒子模型的大小计算
实际的宽度=CSS.width+padding（左右）+border（左右）+margin（左右）
实际的高度=CSS.height+padding（上下）+border（上下）+margin（上下）

8、溢出隐藏规则

含义：元素原本有自己的宽度和高度，但内容过多了，超出了这个区域，超出的部分被称为溢出
属性：overflow
取值：

visible：溢出显示
hidden：溢出隐藏
scrol：溢出滚动
默认会带两个没有用的滑动条，哪个方向溢出，哪一个方向才会有功能
auto：溢出自动
默认不会带滚动条，只有哪个方向溢出，哪个方向才会出现滚动条

9、定位规则

1）含义：让元素先对于某一个位置，或者到某个位置显示
2）属性：position
3）取值：

static：静态定位，普通文档流定位
什么效果也没有，默认值。在实际开发中不会用
relative：相对定位，相对于自己的位置进行微调
absolute：绝对定位
- 如果子元素使用了绝对定位，但外层的所有父级元素均没有非static的定位，则子元素参照的是浏览器的左上角
- 子元素使用绝对定位，外层的元素有非static的定位，则参照就近已有定位的元素进行位置的调整
fiexd：固定定位，参照的是浏览器的窗口
sticky：粘性定位，是相对定位和固定定位的一个结合，主要实现的是滚动吸顶
始终遵循一个点：父相子绝，子绝父相

注意：只要使用定位，就要让元素的位置发生改变，单纯的使用定位或者值，是无法让位置改变的，要想让元素位置发生改变，则需要使用偏移属性配合（top/right/bottom/left）
4）z-index：增加定位的层级

10、表格规则

含义：
表格就是一个格子，用来展示用户信息的，面前主流的页面布局几乎不用使用，但后台管理系统的信息区域有可能会使用
基本语法：
< table > 表格
< tr> 表格的行
< td >表格的单元格< /td >
< /tr >
< /table >
一盒table代表的是一个表格，一个tr代表的是一行，一个td代表的是一行中的单元格
表格的标签属性：
属性和属性值直接使用在标签的位置，而且属性和属性值需要用等号连接
1）border：边框，给table添加边框后，会直接给td也添加上
2）Width/Height：宽高属性
注意：取值不给单位的情况下，默认是px，宽度可以使用百分比，高度不可以使用百分比，也高度是具有继承性的
3）Bgcolor：背景色
4）Bordercolor：边框颜色
5）Align：对齐方式：left/right/center
6）Cellspacing：单元格于单元格之间的距离
7）Cellpadding：单元格与内容之间的距离
8）Frame：表格的外边框线
取值：

above：上外边框
below：下外边框
Lhs：左外边框
Rhs：由外边框

9）Rules：表格的内边框线
取值：

rows：表格内部横向边框
cols：表格内部纵向边框

10）valign：单元格内部水平文本对齐方式
取值：left/right/center
11）单元格内文本垂直对齐方式
取值：top/bottom/middle（居中）
12）单元格合并

colspan：列合并
rowspan：行合并

11、表格的CSS属性：

1）caption：表格的标题：使用的位置在第一个tr之前，css属性caption-side：top/bottom
2）表格的标题行和标题列单元格标签
Th标签：替换的是td
Th的特点：默认加粗且居中
3）表格的行分组标签

Thead：表格的头部
Tbody：表格的主题
Tfoot：表格的尾部
默认情况下，没有分组会自动划分一个tbody标签
注意：
表格中只允许出现一个头部和一个尾部，但可以出现多个主体

4）表格的列分组
< colgroup span=”” >< /colgroup >
5）border-spaing：单元格之间的间距
6）border-collapse：collapse；边框线的合并，1px的细线边框
7）Tab-spacing：表格的布局算法
当表格没有添加布局算法的时候，单元格的内容增多，表格可能会被撑大
取值：
1）aotu：自动，默认值
优点：只要内容增多，表格就会变大，灵活性比较好
缺点：每次刷新页面的时候都要从新计算页面的大小
2）Fixed：固定
优点：不用每次重新加载表格的宽度大小
缺点：灵活性不高

12、表单规则

含义：表单是用来收集用户信息的
基本语法：form
属性：

action：提交跳转的地址
method：提交的方法
target：打开的方式

表单的控件：
input：类型

text：单行文本输入框
password：密码框
submit：提交按钮
reset：重置按钮
button：普通按钮
image：图片按钮(注意：input上的value属性，是值的意思)
radio：单选框：默认单选框中存在共选问题，能一起选中，通过name属性，进行分组，checked属性，代表的是默认选中
checkbox：复选框：能选中多个，复选框也有name属性，用来分组的，方便js获取，checked属性，代表的是默认选中
file：文件域，文件上传
hidden：隐藏域，隐藏一些值，直接上传，不会显示在浏览器中

2）select：下拉菜单类型
3）textarea：多行文本框

cols属性：允许输入显示的列数
rows属性：允许输入显示的行数
注意：在实际开发中基本是不用的，因为输入的内容几乎是不可控的

13、CSS属性：
1、widht/height
2、resize：重置尺寸
取值：

both：水平和垂直都可以实现拖拽
none：水平和垂直都不允许拖拽
horizontal：水平拖拽
vertical：垂直拖拽

4）其他类型

字段集和字段集标题
主要应用于区块划分
基本语法：
< fieldset >
< legend >文本标题< /legend >
< /fieldset >
引入浮动框架集

14、宽度高度自适应

宽度自适应：
元素不设置宽度，就是宽度自适应。Width：aotu
在实际开发中大部分的宽度自适应是应用在块级元素中，行内元素的宽度自适应是被内容决定的，内容多，则宽大，内容少则宽小，
块级元素宽度自适应的特点：就是独占一行，站满父元素的一行
高度自适应：
元素不设置高度，就是高度自适应。Height：aotu
发现：
固定高度的布局不是很好，如果内容过少，下面会有很大的留白，如果内容过多，会产生溢出
使用高度自适应可以解决上面溢出的问题，但如果内容过少，就会出现头部和尾部紧挨在一起，页面布局不合理
Min-width：元素最小宽度
Max-width：元素最大宽度
Min-height：元素最小高度
Max-height：元素最大高度

15、伪元素选择器

选择器：first-letter：匹配第一个字符
选择器：first-line：匹配第一行
选择器：before{content：”文本”}：向元素内部正前方添加文本
选择器：after{content：”文本“}：向元素内部正后方添加文本

注意：追加进来的元素也是行内元素，但追加进来的元素没办法被选中

16、动态计算宽度高度

动态计算宽度与高度，是利用cale来计算剩余的宽度或者高度

两栏布局1：上半部分给固定的高度，下半部分给height：calc（100% - 上半部分的高）
两栏布局2：下半部分不给高度
三栏布局1：左右给固定的宽度，中间的width：calc（100% - 左右宽度的和），再对三格盒子进行浮动
三栏布局2：不给中间的盒子设置高度，再对应右边的盒子进行定位
三栏布局3：将中间的盒子与右边的盒子换位置

17、H5语义化标签

1）Header：头部
2）Footer：尾部
3）Section：主体区域
4）Main：主要内容区域
5）Article：独立文本区域
6）Aside：侧边栏
7）Nav：导航栏
8）Address：地址栏（倾斜）
9）Figure：独立区域
10）Figcaption：独立区域标题
=以上标签为块级元素=
11）Mark：标记
12）Video：视频
属性：

src：路径
Controls：控件能点击的区域
Loop：循环播放
Autoplay：自动播放
Muted：静音
Poster：延迟转圈刷新加载的效果

13）Audio：音频
属性与视频一样，但没有poster
优点：见名知意，可以通过标签的名字知道这个区域的功能和内容
CSS3属性

18、属性选择器

[属性]：匹配页面中带有对应属性的元素
[属性=”属性值“]：匹配页面中带有对应元素，并且有对齐属性值的元素
[属性^=”值“]：匹配页面中带有对应元素，并且属性值以对应的值开始的元素
[属性$=”值“]：匹配页面中带有对应元素，并且属性值以对应的值为结束的元素
[属性*=”值”]：匹配页面中带有对应元素，并且属性值中包含这个值的元素
[属性~=”属性值“]：匹配页面中，包含这个属性值的元素，属性值是一个列表
[属性|=”值”]：匹配页面元素中，属性值是以对应的值，或者是对应值-开头的元素

19、结构伪类选择器

：nth-child（）查找第几个子元素
：nth-of-type（）匹配同类中第几个元素
：nth-last-of-type（）倒着查询同类中第几个元素
：first-child（）第一个子元素
：last-child（）最后一个子元素
：not（）否定伪类，排除括号里面的元素
：root：根目录，一个页面有且只要一个根目录html
：empty：空伪类，父元素里面是空的
：only-child：只有一个子元素的元素，匹配的是子元素
：terget：目标伪类,只要获取到目标焦点，就能实现对应的效果，需要配合一个锚点案例完成

20、关系选择器

后代选择器：空格
子代选择器：>
毗邻选择器：~
相邻选择器：+

21、UI状态伪类

主要应用于表单中

：disables{}
：enabled{}
：focus{}
：checked{}修改单选、复选框的选中状态
：：selection

22、活动连接

主要应用于超链接上

：link：访问前
：visited：访问后
：hover：划过
：active：点击时

23、字体模块

            浏览器里面能支持的字体:微软雅黑,黑体,宋体,隶书,楷体,等等
            有一部分字体不支持:颜体,柳体,草书,行书,狂草等等,
            我们需要使用浏览器的外部字体来进行引入
            外部字体文件格式为: .ttf格式, 可以直接在字体网站中下载即可
            如何引入
                **@font-face{
                    font-family:起名字;
                    src:url(路径) ;
                    font-weight:normal;
                    font-style:normal;
                }**

字体图标模块
什么是字体图标?原本是一个图,但是遵循文本所有的特点(加粗,大小,倾斜,颜色,间距,等等)
如何引入或者是如何下载字体图标呢?
字体也称之为iconfont
一般我们去阿里字体图标库里面下载

24、文本特性与盒子特效

文本的阴影:
text-shadow:h-shadow v-shadow blur clor

h-shadow 水平方向阴影位置
v-shadow 垂直方向阴影位置
blur 模糊距离
color 阴影的颜色

25、盒子特效模块

            盒子阴影
                **box-shadow:h-shadow v-shadow blur size inset**

h-shadow 水平方向影子位置
v-shadow 垂直方向影子位置
blur 模糊距离
size 尺寸大小
inset 内阴影

26、多背景

多背景模块
一个元素中允许插入多个背景
属性:background:
取值,就是多个图,多个位置,多个取消平铺一起使用,多个图之间使用逗号隔开

27、圆角边框

圆角显示

border-radius:v1; ==================实现四个方向的圆角
border-radius:v1 v2; ===============实现四个方向的圆角,v1左上,右下; v2右上,左下
border-radius:v1 v2 v3; ============实现四个方向的圆角,v1左上; v2右上,左下; v3右下

border-radius:v1 v2 v3 v4; =========实现四个方向的圆角,v1左上; v2右上; v3右下,v4左下

         以上属性,无论是取v1-v4;一下子实现了四个方向,问题:能否直接值实现一个方向
         想法:border-radius:30px 0px 0px 0px

         属性:单角属性;只设置一个角
         border-垂直方向-水平方向-radius:数值px
             border-top-left-radius:左上角
             border-top-right-radius:右上角
             border-bottom-right-radius:右下角
             border-bottom-left-radius:左下角
     */
     /* border-radius: 10px 30px 50px 100px; */
     /* 单角属性 */
     /* border-top-left-radius: 10px;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 100px;
     border-bottom-left-radius: 200px; */

注意事项:
圆角边框属性,有边框的时候从边框位置计算弧度大小,没有边框的时候从内容位置计算弧度大小

十、多列布局
多列: 是按照对应的列数进行布局显示
1)coLumn-count:数值====划分列数
2)coLumn-width: 数值+px调整列宽,注意: 如果列的宽度小于默认的宽度,不会影响列数,如果列宽大于默认的宽度,则会影响列数
3)column-gap:数值调整列间距的,注意: 实际开发的时候几乎不会调整列间距,调整比较大的列间距影响布局美观性
4)coLumn-rule:2px solid gray; (就是类似于边框)

column-rule-width
column-rule-color
column-rule-style

5)设置高度内容填充column-fill
balance;平衡,均衡auto;自动,会把第一列盛满之后然后,去撑满下一列
6)是否跨列clumn-span:

none;不跨列
aLl;跨所有列

28、标准盒子与怪异盒子

盒子模型总共分为两种
1)标准盒于模型(W3C 官方盒子型)2)怪异盒于模型(IE异盒子)
4个部分组成:
内容(width,height)
内边距(padding)
边框(border)
外边距(margin)
二者区别:
标准盒子模型: 是用来计算盒子大小占位的,在实际计算盒子大小的过程中,内边距和边框和外边距都会增加进来,把盒子撑大
怪异盒子模型:也是用来计算盒子大小占位的,在这里触发怪异盒子模型之后,会改变原有盒子模型大小计算方法; 触发完怪异盒子之后,盒子不会变大(注:添加外边距的时候,还是会变大的)如何触发怪异盒子
box-sizing:

content-box; 标准盒子,默认值
border-box; 触发了怪异盒子,从边框外边开始计算

计算大小;
标准

实际宽度=width+左右padding+左右border+左右margin实际高度-height+上下padding+上下border+上下margin

怪异

实际宽度=css.width(内容,内边距,边框)+左右的margin实际高度=css.height(内容,内边距,边框)+上下的margin
弹性盒子*

29、什么是弹性盒子:

含义: 当触发弹性盒子之后,修改我们子元素的一个排列方向,主要是为了修改子元素的排列问题:有的人把弹性盒子也称之为伸缩性的盒子,宽度变大,内容跟着变大;有的人把弹性盒子也称之为FLex布局,fLex弹性盒。
如何触发弹性盒子
触发弹性盒子之后,影响的是子元素
display:flex;
触发弹性盒子之后,有哪些特点

让于元素横向排列,与浮动没有关系;
只会影响于子元素，不会影响孙子辈分的元素
触发弹性盒子之后,会让子元素变成块元素; 改变元素类型
触发完弹性盒子之后,只有一个子元素,给子元素添加margin:auto的时候,然后会实现 -
水平垂直正居中;

学习弹性盒子里面的几个基础概念

容器: 容器就是我们的大盒子,又元素
项目: 项目就是我们的小盒子，子元素，项目有可能变成容器
主轴: 触发完弹性盒子之后，子元素默认的排列方向
侧轴: 触发完弹性盒子之后,与主轴对立的方向
横轴: 就是我们的水平轴，就是X轴
纵轴: 就是我们的垂直轴，就是Y轴

容器上的属性

就是用来修饰父元素的
1）触发弹性盒子display:flex;
2）flex-direction:修改主轴方向

row;----------主轴在横向，左向右显示(开始位置显示)(*)
row-reverse;======主轴在横向，右向左显示(结束位置显示) 主轴的反方向排列主轴在纵向
column;=========从上向下显示(开始位置显示)(*)主轴在纵向
column-reverse-----从下向上显示(结束位置显示) 主轴的反方向排列

3）justify-content：调整主轴上面的间距(主轴上面对其方式)

flex-start--------主轴的开始位置显示(没有分开）
fLex-end--------主轴的结束位置显示(没有分开)
center------------主轴的中间位置显示(没有分开)
space-between======主轴两端对其，中间距离平分，首尾元素贴边显示(*)
space-around=======主轴两端环绕,项目周围的距离是一样的(*)(注意: 项目与项目之间的距离是首尾项目距离容器之间距离的2 倍)
space-evenly=========主轴间距平均,项目与项目，首尾项目距离容器之间距离相等

4）align-items：修改侧轴对齐方式

flex-start====侧轴开始方向对齐
flex-end=====侧轴结束方向对齐
Center======侧轴中间位置对齐
Baseline=====基线显示，基本不用
Strrtch=====默认拉伸效果（需要给项目不设置高度才会显示

5）flex-wrap：折行显示
取值：

Nowrap：不折行
Wrap：折行显示
Wrap-reverse：来回折行

注意：如果项目过多，触发弹性盒后，默认会被挤压不换行，折行完毕之后，会产生一个比较大的行间距。（原因：默认拉伸效果的元素，添加一个一个固定的高度）
6）align-content：解决行间距，调整行间距
取值：

flex-start======侧轴开始位置显示（没有间距）
flex-end======侧轴结束位置显示（没有间距）
space-around===侧轴两端环绕（行与行中间的距离是首位行距离父元素之间的距离的2倍）
space-between==侧轴两端对齐（首尾贴边显示）
space-evenly===侧轴间距平分

项目上的属性

含义：用来修饰项目（子元素）上面的属性
1）order：调整显示顺序
取值：可正数也可以负数，取值越大越靠后，取值越小越靠前，默认为aotu可以理解为0
2）flex：占居剩余宽度或者高度
取值：1（取值等于1时是占居剩余的所有空间）
3）flex-shrink：不挤压，不折行
取值：0或者1
4）align-self：单独调整侧轴上的对齐方式
取值：

flex-start====侧轴开始方向对齐
flex-end=====侧轴结束方向对齐
Center======侧轴中间位置对齐
Baseline=====基线显示，基本不用
Strrtch=====默认拉伸效果（需要给项目不设置高度才会显示

30、移动端

1）移动端：指可以移动的设备，主要包括：手机、ipad、kindle、电话手表
2）手机屏幕尺寸

Iphone4========320*480
Iphone5========320*568
Iphone678=======375*667
Iphone678s======414*736
Iphone12por========390*844

3）设计稿大小

Iphone4========640*960
Iphone5========640*1136
Iphone678=======750*1134
Iphone678s======1242*2208
Iphone12por========1170*1532

4）在编写代码的时候，需要使用的是：css像素=物理像素/dpr（dpr=设计搞像素/手机屏幕尺寸）
5）理想视口
理想化的状态,理想化视口;通过代码来实现的
< meta name=“viewport” content=“width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no” >
就能实现让你的pc端布局正常显示在手机屏幕中
width=device-width 宽度等于设备的宽度
minimum-scale=1.0 最小缩放比例为1.0
maximum-scale=1.0 最大缩放比例为1.0
initial-scale=1.0 初始缩放比例为1.0
user-scalable=no 是否允许用户缩放,不允许
6）布局中常用的单位

px：固定单位。不会随着屏幕的大小而变化
em：相对单位。相对自身或父元素的字体大小进行缩放
rem：相对单位。相对于根目录的字体大小进行缩放
vw：视口的宽度。100vw等于一个完整的视口宽度
vh：视口的高度。100vh等于一个完整的视口高度

7）响应式布局
使用媒体查询技术来完成的:媒体查询技术,就是用来检测各种媒体设备,来针对不同的设备完成不同的布局展示前端开发工程师，我们使用媒体查询技术目前,只是用来检测屏幕的大小,来针对不同屏幕大小完成不同布局展示
基本语法：
每一个关键词前后必须带空格;小括号里面的语句不需要带分号
@media screen and (min-width:300px) and (max-width:500px) {
body{
background-color:red
}
}
解析: 使用media(媒体查询) 检测屏幕(screen) 并且要求(and) 屏幕最小宽度为(min-wdith:300px)最大度为(max-width:500px) (转译:屏幕宽度在300-500之间) 满足此条件的话,执行{}里面的语句

31、渐变、过渡与动画

线性渐变

1、含义：从一个颜色到另一个颜色的改变
2、属性：background:linear-gradient(to 方向词,col1,co12,co13)

to 方向词;—到达某一个方向，从相反方向开始
to bottom;=到达下面,从上面开始
to left; =到达左边,从右边开始to right; =到达右边,从左边开始
to top;=到达上面，从下面开始

径向渐变

1、含义：颜色从元素中心点开始，向四周进行发散
2、属性：background:radial-gradient(center,shape,size,col1,col2,col3)
3、center;====渐变中心(x,y)
渐变中心位于正中位置，
注意事项：默认的渐变中心位于元素正中位置，(对角线交汇处)默认是按照对角线进行渐变
4、shape;=====渐变形状
circle;=圆
ellipse;=椭圆(*)
注意事项: 如果元素是正方形,则渐变出现正圆;如果元素是长方形,则渐变出现椭圆
5、size;=======渐变形成区域的大小四种渐变大小展示四种情况:

farthest-side;最远的边结束颜色渐变
farthest-corner;最远的角结束颜色渐变
closest-side;最近的边结束颜色渐变
closest-corner; 最近的角结束颜色渐变

6、co11,co12,co13;=渐变的颜色

col1;中心点颜色
co13;结束位置处的颜色

7、重复的径向渐变：-repeating-radial-gradient()

过渡：transition（all 3s linear 5s）

All：全部
过渡的时间
过渡类型：
- ease：逐渐缓慢
- ease-in：逐渐加速
- ease-oit：减速
- linear ：匀速
- 贝塞尔曲线,更改效果
- 执行步骤:按照步骤执行
4、过渡延迟时间

动画：transform

1、平面移动：translateX（）/translateY（）/translate（）
注意事项:如果translate属性值()里面跟了一个值的话,则只能实现水平反向
为啥我们可以使用margin,还要学习平移函数:
a)margin:主要是用来调整位置间距的;translate用来做动画平移的
b)鼠标划过的时候,margin计算移动距离,没已从一次就相当于判断一次是否到达对应的距离平移果,是直接计算完毕直接移动过去对应的距离
2、旋转：

rotateX（deg）：以x轴进行旋转
rotateY（deg）：以y轴进行旋转
rotate（）：以中心进行旋转

3、transform-origin：可以修改旋转、缩放的中心
4、缩放：

scaleX（倍数）：以x轴进行缩放
scaleY（倍数）：以y轴进行缩放
-scale（倍数）：以中心进行缩放

5、倾斜：
skewX：沿x轴进行倾斜
skewY：沿y轴进行倾斜
skew：沿x轴和y轴进行倾斜

关键帧动画：

@keyframes name{
0%{}
100%{}
}
注意事项:默认样式和起始样式一抹一样的话,则不用写其实样式即可注意事项:如果只有开始和结束状态，使用谁都可以,但是如果有多重状态,需要使用百分比，百分比里面充分体现了关键帧的用处注意事项:默认的调用动画只执行1次，执行多次的时候,延迟只执行一次注意事项:如果你添加了alternate,反复执行的话,要么执行次数为偶数,要么就无穷尽的执行(infinite)
调用动画,调用的时候,使用animation即可(复合属性)animation:name 3s linear 5s 3 alternate
动画的名字-------name-----animation-name
动画执行时间-------3s------animation-duration
动画执行类型------linear------aniamtion-timing-function
动画延迟执行--------5s--------animation-delay
动画执行次数--------3----------animation-iteration-count
动画反复执行------alternate--------animation-direction
在hover里面使用： animation-play-state: paused;鼠标移入后可以暂停动画

32、网格布局

什么是网格

类似与表格布局，都是通过合并单元格的形式完成布局对应的布局，但与表格布局有很大的差别，

网格布局的基础至少

1）容器：父元素
2）项目：子元素
3）行：横向的为行
4）列：纵向的为列
5）单元格：横向的网格线与纵向的网格线交汇处为单元格
6）网格线：组成行和列的线条区域

触发网格布局

display：inline-grid（行内块网格）
display：grid（块级网格）

容器属性

1）划分行列属性

grid-template-rows：划分行数
grid-templat-clumns：划分列数
取值
- 数值+px：后面跟几个数值将划分几个单元格
  grid-template-rows:100px;
  grid-templat-clumns：100px
- 数值+%：
  grid-template-rows:10%;
  grid-templat-clumns：10%
- 匹配重复：repeat（次数，大小）
  grid-template-rows:repeat（3，100px）;
  grid-templat-clumns：repeat（3，30%）
- 占居剩余宽度高度的所有：auto
  grid-template-rows：100px auto 300px;
  grid-templat-clumns：repeat（3，30%）auto；
- 按照比例划分：fr（用法与弹性和flex：1；类似）
  grid-template-rows：1fr 2fr 3fr;
  grid-templat-clumns：1fr 100px 100px 100px
- 自动划分行数和列数，需要配合repeat函数的使用
  grid-template-rows：repeat（auto-fill,160px);
  grid-templat-clumns：100px 100px 100px
- 最小最大函数：minmax（最小数值，最大数值）
  grid-template-rows：minmax（100px，500px);
  grid-templat-clumns：100px 100px 100px

2）网格线的命名
横向为r1-rn，纵向为c1-cn
3）合并单元格：grid-template-areas（写在容器里面）
grid-area：（写在项目里面）
例如：div{
grid-template-areas：”a a b ”
“ a a c ”
“ d e f ”;
}
div>nth-child（1）{
grid-area：a；
}
4）调整单元格排列方向：grid-auto-flow
取值：

row：横向排列（默认值）
Column：纵向排列

5）单元格内容对齐方式：place-items：垂直方向，水平方向
取值：

start：开始方向
end：结束方向
center：居中
stretch：拉伸

6）网格位于容器的对齐方式：place-content：垂直位置，水平位置
取值：

start：开始方向
end：结束方向
center：居中
stretch：拉伸
space-around：间距环绕
space-between：两端对齐
space-evenly：间距平分

项目属性

一般情况下在实际开发中，使用网格线合并的方式是较多的
grid-row：开始网格线/结束网格线；===横向网格占位
grid-column：开始网格线/结束网格线；===纵向网格占位

Pikachu_999

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS

HTML：超文本标记语言（Hyper Text Markup Language）可以通过创建一个文本文档，将后缀名修改成.html的方式创建一个html。而.html就是为了告诉浏览器这是一个网页含义: 当触发弹性盒子之后,修改我们子元素的一个排列方向,主要是为了修改子元素的排列问题:有的人把弹性盒子也称之为伸缩性的盒子,宽度变大,内容跟着变大;有的人把弹性盒子也称之为FLex布局,fLex弹性盒。如何触发弹性盒子触发弹性盒子之后,影响的是子元素触发弹性盒子之后,有哪些特点。
复制链接

扫一扫