admin管理员组文章数量:1547925
h5语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
banner 定义文档的版心
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
contact 定义留言版信息
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
mark,
audio,
video
html相关概念&&建站流程
- html
- 英文：Hyper Text Markup Language
- 中文：超文本标记语言
- 标记语言：描述网页的一种语言
- 超文本：可以进行点击且跳转的文本或者图片等
- 网页的组成部分
- 结构(html)==w3c(万维网联盟)
- 样式(css)==w3c(万维网联盟)
- 行为(js)==ECMA(欧洲厂商联盟)
- html的发展史
- xhtml 可扩展的超文本标记语言
- xhtml和html的区别
- xhtml后面必须带斜杠
- xhtml的属性值必须是双引号
- xhtml的标签必须都是小写
- xhtml和html的区别
- 建站流程
- 申请域名
- 租用服务器
- 建设网站
- 产品经理==>原型图
- ui设计师==>ui设计图
- 前端工程师==>将ui设计图百分百还原
- 后端工程师==>将静态网页转换成动态(数据动态)的
- 测试工程师==> 保证页面功能/性能没有问题
- 推广
- 维护
html的基本结构
- 手动编写
<!-- 声明文档类型 -->
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<!-- 网页的编码格式 -->
<meta charset="UTF-8">
<title>网页的标题</title>
</head>
<body>
主体 文字，图片等
</body>
</html>
- 自动生成网页基本结构
- 新建一个.html后缀名的文件
- 英文状态下，写出 ! 按回车或者tab键
- alt+b运行到浏览器
html的语法
- 标签/标记/元素：放到尖括号里面的单词
- 双标签/标记：成对出现的标签
- 单标签/标记/空标签：单独出现的标签
- 属性：放到标签后面，且用空格隔开
- 属性值：属性和属性值之间用等号连接，属性值要用引号引起来，可以出现多个属性，且每个属性之间用空格隔开
html的基本标签
- 文章类
- 标题标签 h1-h6
- 双标签
- h1-h6字体逐渐变小，且加粗
- 独占一行
- 段落标签 p
- 双标签
- 独占一行
- 修饰类标签
- 加粗 b strong
- 双标签
- 加粗
- 在同一行显示
- 倾斜 i em
- 双标签
- 倾斜
- 同一行显示
- 下划线 u
- 双标签
- 加下划线
- 在同一行显示
- 删除线 del
- 双标签
- 加删除线
- 在同一行显示
- 下标 sub
- 上标 sup 0
- 水平线 hr
- 单标签
- 换行标签 br
- 单标签，强制换行
- 加粗 b strong
- 特殊字符
- 空格
- 左尖括号 <
- 右尖括号 >
- 版权符号 ©
- 注册商标 ®
- 标题标签 h1-h6
- 图片
- 单标签
- src 图片路径
- 绝对路径
- 相对路径
- 当前文件和目标文件在同一个目录下面，直接图片名.后缀
- 当前文件和目标文件的文件夹在同一个目录下面 目标文件文件夹
名/图片名.后缀 - 当前文件的文件夹和目标文件的文件夹在同一个目录下面，当前文件套几层就写几个…/目标文件文件夹名/图片名.后缀
- alt 图片未加载成功的时候的提示
- title 提示文本，鼠标滑到图片标签的提示信息，可以加在任何标签
- width 宽度
- height 高度
- 超链接
- 双标签
- 自带下划线，自带字体颜色
- href: 链接的地址 默认值 href="#"
- target
- _self 当前窗口打开 默认值
- _blank 新开一个窗口打开
vscode快捷键
- 保存 ctrl+s
- 注释 ctrl+/
- 向前缩进 shift+tab
- 向后缩进 tab
- 全选 ctrl+a
- 搜索 ctrl+f
- 撤销 ctrl+z
- 反撤销 ctrl+y
html的基本标签
- 列表标签
-
无序列表
<ul> <li>哈哈1</li> <li>哈哈2</li> <li>哈哈3</li> </ul>- 快速生成4个li，里面的文本是哈哈+数值
ul>li*4{哈哈$} - ul和li都是独占一行
- 应用场景：导航/新闻列表/商品列表
- 快速生成4个li，里面的文本是哈哈+数值
-
有序列表
<ol type="" start=""> <li>哈哈1</li> <li>啊哈哈2</li> </ol>- 设置排列方式 type
- 默认是数值排列
- 设置英文字母的排列 A/a
- 罗马数字排列 I/i
- 设置排列的起始值(字母位置) start值必须是数字
- 设置排列方式 type
-
自定义列表
<dl> <dt>图片，名字</dt> <dd>图片的说明，文字的解释</dd> <dd></dd> <dd></dd> </dl>- 快捷生成自定义列表结构 dl>dt{图片，名字}+dd*3{哈哈}
- dl,dt,dd独占一行
- 应用场景：左边是图片，右边是文本或者上面是图片，下面是文本
-
- 布局标签
- div标签：划分网页板块
- 独占一行，没有任何自带样式
- span：小文本
- 在同一行显示，没有任何自带的样式
- div标签：划分网页板块
- 表格标签
<table border="3" width="300" height="300" bordercolor="red" cellspacing="0" cellpadding="0" align="center"> <tr align="center"> <td align="left">1</td> <td>2</td> <td>3</td> </tr> </table>- 表格 table table>tr>td 三行三列的表格：table>tr3>td3
- 边框 border=“数字” 数字越大越粗
- 宽度 width=“数字”
- 高度 height=“数字”
- 边框颜色 bordercolor=“颜色单词”
- 单元格之间的间距 cellspacing=“数字” cellspacing="0"去掉默认间距
- 内容距离单元格之间的距离 cellpadding=“数字” cellpadding="0"去掉距离
- 表格的对齐方式 align
- left 默认左对齐
- center 居中
- right 居右
- 行tr
- align: 调整文字在单元格内的水平对齐方式
- left 默认左对齐
- center 居中
- right 居右
- valign: 调整文字在单元格内的垂直对齐方式
- middle 默认值居中
- top 顶部对齐
- bottom 底部对齐
- align: 调整文字在单元格内的水平对齐方式
- 列td
- align: 调整文字在单元格内的水平对齐方式
- left 默认左对齐
- center 居中
- right 居右
- valign: 调整文字在单元格内的垂直对齐方式
- middle 默认值居中
- top 顶部对齐
- bottom 底部对齐
- 合并列 colspan=“数值” 列不同合并列 rowspan=“数值”
- 补全表格，观察几行几列，
- 确定是列合并还是行合并，哪个不同合并哪个,都存在的时候先合并列再合并行
- 观察合并的单元格的个数，有几个合并属性对应的值就几
- 将合并属性放到合并单元格的第一个，
- 找到多出来的单元格所对应的位置，将其注释
- align: 调整文字在单元格内的水平对齐方式
- 表格 table table>tr>td 三行三列的表格：table>tr3>td3
- 表单标签
<form action="" method=""></form>
+ action: 提交的路径
+ method: 提交方式
- get
1. 用来获取数据
2. 安全度不高
3. get传送数据一般较小，在2kb以下
- post
1. 一般发送数据
2. 安全度高
3. post传输数据量较大，一般不受限制
+ 文本输入框
```html
<input type="text" value="默认值" placeholder="提示信息">
```
+ 密码输入框
```html
<input type="password" placeholder="提示信息" value="默认值">
```
+ 提交按钮 提交到form对应的action仲
```html
<input type="submit" value="按钮文本">
```
+ 重置按钮 将输入框中的值清空，默认值不能清空
```html
<input type="reset" value="按钮文本">
```
+ 普通按钮 不带任何功能的按钮
```html
<input type="button" value="普通按钮">
```
红色号
初识css
css
- 层叠样式表
- 样式表
-
行内(内联)样式表
- 生成一个style的html属性
- 属性值为 css属性：css属性值;
<p style="width:300px;height:300px;background-color:olive"> 今天 天气真好，但是我真的好困 </p> -
内部样式表
- 生成style的双标签
- 将标签放到head标签里面
<head> <style> div { width: 200px; height: 200px; background-color: orange; color: orchid; } p { width: 300px; height: 300px; color: palegreen; } </style> </head> -
外部样式表
- link引入css
- 在站点下面创建一个css文件夹
- 在文件夹里创建.css后缀的文件
- 创建一个link的单标签，放到head标签里面
<link rel="stylesheet" href="" type="text/css"> rel:确定关联的文件类型 href: css文件路径 type: css文件类型- 在css文件中直接写css对应的语法，不需要加style标签
- @import引入css文件
- 创建style的双标签，放到head里面
<style> @import url("css文件的路径"); </style> - 两者的区别
- 老祖宗的差别：link属于HTML提供的引用方式，@import是css提供的引用方式，link还可以引入其他文件类型，@import只能引入css文件
- link引入css
-
- css语法
选择器{ 声明 css属性名：css属性值; css属性名：css属性值; ----- } - css样式
- 宽度 width 数字+px 值为0可以省略单位,只对独占一行的元素才有效果
- 高度 height 数字+px 值为0可以省略单位,只对独占一行的元素才有效果
- 字体颜色 color 颜色单词
- 背景色 background-color 颜色单词
- 样式表的选择
- 内联样式表 一般不使用，如果有简单的几个属性的话可以写
- 内部样式表 样式较少，平时写小案例
- 外部样式表 开发整页或者整站项目进行使用，做到结构和表现分离
- 样式表的权重(优先级)
- 行内样式表>内部样式表
- 行内样式表>外部样式表
- 内部样式表和外部样式表根据书写顺序，后写的优先级高（就近原则）
- 选择器
- 标签选择器
- id选择器
- 标签添加id属性
- #id名{}
- id名不能重复
- 一个标签内id名不能有多个 多个之间用空格隔开
- id用来划分网页的外围结构
- class选择器
- 标签添加class属性
- .class名{}
- class名可以重复
- 一个标签可以有多个class名，多个之间用空格隔开
- 通用选择器 可以选择到页面中所有的标签
- *{
margin:0;去掉外边距
padding:o;去掉内填充
}
- *{
- 伪类选择器
- 选择器:hover{}
鼠标放在div身上，所执行的样式 div:hover { color: blue; width: 500px; background-color: brown; }
- 命名方式
- 驼峰命名法（bigBox）
- 下划线连接命名法(big_box）
- 横线链接(big-box)
- ps的使用
- ctrl+r 显示/隐藏参考线
- ctrl+k 单位与标尺，修改单位为像素
- alt+滚轮 放大或缩小
- 层叠
css选择器
- 伪类选择器 (伪类：在某种状态下) 爱恨法则 (love hate)
- 选择器:link a标签未点击之前的状态
- 选择器:visited a标签访问过后的状态
- 选择器:hover 鼠标滑过某个标签的状态 可以是所有的标签
- 选择器:active 鼠标在a标签按下的状态
- 后代选择器
- 选择器 选择器 {}
- 每个选择器之间有后代的关系
- 后代可以嵌套多个
- 只要是后代关系就可以使用后代选择器
- 选择器 选择器 {}
- 群组选择器 将相同的样式写到群组选择器里面
- 选择器,选择器{}
- 选择器可以是任何选择器
- 可以放置多个选择器
- 选择器,选择器{}
- 选择器的权重(优先级)
- 权重值
- 内联样式 权重值 1000
- id选择器 权重值 100
- class选择器和伪类选择器 权重值 10
- 标签选择器 权重值 1
- 特点
- 权重值越高，优先级就越高，优先显示该样式
- 后代选择器的权重值为所有选择器的权重值的和
- 继承样式的优先级是最低的，自己本身的要高于继承得来的样式
- 群组选择器的权重值为自己本身的权重值
- 权重值相同的情况下，根据就近原则
- 权重值
- 层叠
- 用不同的选择器选择同一个元素，设置了通用的css属性，但是设置了不同的属性值，会产生样式的冲突，根据选择器的权重值来优先显示，权重值越高，优先显示该样式,没有冲突的样式照常显示
css属性
- 文本属性
- 字体大小 font-size 默认字体大小 16px
- 数值+px
- 数值+em 1em=16px 几个em就表示是父元素字体大小的几倍
- 数值+rem 1rem=16px 几个rem就表示是**根元素(html)**字体大小的几倍 移动端使用
- 字体类型 font-family
- 中文，必须要加引号
- 英文，一个单词的字体类型可以不加引号，多个单词的字体类型要加引号
- 多个字体类型之间用逗号隔开，浏览器会从左向右检索字体类型，如果存在该字体则显示，检索到组后不存在就显示默认的字体类型
- 文本加粗 font-weight
- bold 加粗
- normal 去掉加粗标签的加粗样式
- 数值 100-900之间的数，并且整百增加，不要加单位 100-400偏细 500正常 600-900加粗
- 文本倾斜 font-style
- italic 倾斜
- normal 去掉倾斜标签的倾斜样式
- 文本颜色 color
- 颜色的单词
- 十六进制 #313131
- rgb(r,g,b); r,g,b(0-255)
- 文本水平对齐 text-align
- left 左对齐
- center 居中对齐
- right 右对齐
- justify 两端对齐 文字或单词两端对齐 增大之间的空隙
- 垂直对齐 vertical-align 对图片生效，这个属性加在img标签
- top 顶部对齐
- middle 居中对齐
- baseline 基线对齐 图片和文字默认的对齐方式
- bottom 底部对齐
- 行高 line-height
- 数值 表示是字体大小的倍数
- 数值+px
- 单行文本垂直方向居中对齐 将行高和高度的值设置成一样的
- 添加多行文本之间的间距，多行文本之间间距的量取是从第一个的头到第二行的头
- 文本修饰 text-decoration
- none 去掉下划线
- underline 下划线
- overline 上划线
- line-through 删除线
- 大小写的转换 text-transform
- capitalize 每个单词的首字母大写
- uppercase 字母全部大写
- lowercase 字母全部小写
- none 默认值
- 字体简写/复合写法 font
- 顺序: font-style(字体样式) font-weight(字体加粗) font-size(字体大小)/line-height(行高) font-family(字体类型)
- font-style和fong-weight可以省略不写，为默认样式
- 后面的顺序必须是一定的，且不能省略
- 字符间距 letter-spacing 可以为负数
- 英文：字母之间的间距 数值+px
- 中文：汉字之间的间距 数值+px
- 词间距 word-spacing 对于英文来说
- 单词之间的距离
- 文本缩进 text-indent
- 数值+px
- 数值+em 相对当前的字体大小
- 悬挂式缩进 设置值为负数
- 字体大小 font-size 默认字体大小 16px
css属性
-
无序列表属性
- 列表符号的类型 list-style-type
- disc 实心圆 默认值
- circle 空心圆
- square 方型
- none 去掉列表符号
- 列表符号所在的位置 list-style-position
- inside 在li的里面
- outside 默认值 在li的外面
- 列表符号图片 list-style-image:url()
- 列表符号的类型 list-style-type
-
边框属性 border 不设置边框颜色 默认是和字体颜色一样
- border-width: 当前边框的宽度 数值+px
- border-style 边框类型
- solid 默认值 实线
- dotted 点状
- dashed 虚线
- double 双实线
- border-color 边框颜色
- 简写形式 border: 边框宽度 边框类型 边框颜色 顺序不固定
div{border:5px dotted red}- 边框方向
- border-left:边框宽度 边框类型 边框颜色; 左边框
- border-right:边框宽度 边框类型 边框颜色; 右边框
- border-top: 边框宽度 边框类型 边框颜色; 上边框
- border-bottom: 边框宽度 边框类型 边框颜色; 下边框
- 去掉边框
- 去掉左边框 border-left:none
- 边框实现三角形
箭头向右的三角形,只留left的边框 其他边框色设置透明 transparent div{ border-left:10px solid red; border-right:10px solid transparent; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } -
鼠标样式 cursor
- pointer 手型
- help 帮助
- not-allowed 禁止选择
- wait 等待
-
背景属性
- 背景色 background-color
- 背景图 background-image:url(图片路径)
- 背景图重复 background-repeat
- repeat 默认值 重复
- no-repeat 不重复
- repeat-x 只在x轴或者横向重复
- repeat-y 只在y轴或者纵向重复
- 背景图位置 background-position
- background-position：x轴/横向 y轴/纵向
- 数值+px
- 百分比 相对于当前元素的宽度和高度
- 关键词
- x轴/横向：left/center/right
- y轴/纵向：top/center/bottom
- 背景图复合写法
background: 背景图颜色 背景图的路径 背景图是否重复 背景图的位置 顺序不固定，一般是这个顺序 - 背景图固定 background-attachment
- scroll 滚动 默认值
- fixed 固定
- 背景图的大小 background-size
- cover 背景图拉伸 充满整个元素
浮动
- float
- none 默认值 不浮动
- left 左浮动
- right 右浮动
- 浮动特点
- 1.从父元素的边缘开排列
- 2.父元素的宽度不够时，浮动元素会掉下来
- 3.浮动元素会脱离文档流
- 4.浮动元素不会超过没有设置浮动的元素
- 5.内联元素会变成块元素
- 浮动的应用场景
- 将纵向排列的元素横向排列
元素类型
- 块级元素 （div p ul li form table dl dt dd ol ）
- 独占一行
- 可以设置宽高
- 内联元素（span b strong i em a img input u sup sub）
- 不可以设置宽高
- 在同一行排列
- 内联块元素(置换元素)（img input）
- 可以设置宽高
- 在同一行显示
css属性
- 边框做三角形
- transparent:透明属性
向下的三角形
div{
width:0;
height:0;
border-top: 20px solid red;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
}
- 鼠标样式 cursor
- pointer 手型
- help 帮助
- not-allowed 禁止选择
- wait 等待
盒模型
- 内容区 content 宽高生成内容区
- 内填充 padding:数值+px
- 值的设置
- 1个值 padding:20px; 四周
- 2个值 padding:10px 20px;上下 左右
- 3个值 padding:10px 20px 30px; 上 左右 下
- 4个值 padding:10px 20px 30px 40px; 上 右 下 左
- 单独方向设置 padding-方向(left/top/bottom/right)
- padding的特点
- padding值的设置会把盒子撑大,如果不想被撑大，要在原来的宽高的基础上减去对应方向的padding值
- 调整子元素(内容)在父元素(盒子)内的位置
- 背景色可以在padding区域进行显示
- padding值不可以设置负数
- 值的设置
- 边框 border 边框也会撑大盒子
- 外边距 margin:数值+px
- 值的设置和padding一样
- 单方向设置
- margin的特点
- 不会撑大显示的区域，但是会影响到别的盒子
- margin可以设置负数
- 背景色在margin边框的外面显示
- 用来调整盒子到盒子之间的距离
- margin:0 auto; 上下 左右 左右根据浏览器窗口的宽度去掉当前盒子的宽度后，左右两边平均分配
- margin值设置的bug
- 在一个盒子里面，当对该盒子的第一个子元素设置margin-top的上边距的时候，会错误的加载父元素的身上，叫做margin的传递
- 给父元素添加边框 透明的边框
- 给父元素添加 overflow:hidden; 溢出隐藏
- 给父元素或者该元素添加浮动
- margin的重叠：给上面的盒子添加下边距，下面的盒子添加上边距的时候，会产生上下边距的重叠，取最大值显示间距
- 设置一个方向的间距
- 浮动
- 在一个盒子里面，当对该盒子的第一个子元素设置margin-top的上边距的时候，会错误的加载父元素的身上，叫做margin的传递
img引入图片的bug
- 图片自带3px的底部留白
- 给图片设置vertical-align:bottom/middle/top
去掉input按下时候的样式
- outline:none; 去掉边框
元素类型
- 块级元素 div p ul li h1-h6 ol dl dt dd
- 可以设置宽高
- 盒模型属性都生效
- 独占一行
- 块级元素可以作为容器，p一般不包括p
- 内联元素 span b strong i em a u del img sup sub
- 在同一行显示
- 不可以设置宽高，宽高由内容撑开
- padding和margin属性的左右显示准确，上下显示不准确
- margin:0 auto，不生效
- 可以给内联元素添加一个外层的盒子形成一个大的区域，给该盒子设置 text-align:center的居中属性
- 添加浮动可以解决内联元素之间的间歇，也能将内联元素的元素类型转换为块元素
- 内联块元素 input img
- 可以设置宽高
- 在同一行显示
- 盒模型属性都适用
- 为什么img和input可以设置宽高？？
- 置换元素：img和input属于置换元素
img的src和input的type是不确定的，可以更换
- 非置换元素: 除了置换元素之外
- 置换元素：img和input属于置换元素
- 元素类型的转换 display
- block 块级元素
- inline 内联元素
- inline-block 内联块元素
- 盒子和盒子之间会产生空隙，两个标签之间的回车导致
- 将元素的代码在同一行编写
- 给在同一行的显示的元素的父元素设置font-size:0;给该元素设置正常的字体大小
- 盒子和盒子之间会产生空隙，两个标签之间的回车导致
- none 隐藏元素 隐藏之后不占位
- visibility:hidden; 隐藏元素，隐藏之后占位
单行文本溢出显示省略号
- 溢出属性 overflow
- visible 默认值
- hidden 溢出隐藏
- scroll 显示滚动条
- overflow-y y轴滚动
- overflow-x x轴滚动
- auto 内容没有超出的时候正常显示，超出之后才显示滚动条
- 单行文本超出宽度显示省略号
- 设置宽度
- 设置不换行 white-space:nowrap
- 设置溢出隐藏 overflow:hidden;
- 设置文本溢出显示省略号 text-overflow:ellipsis;
圆角属性 border-radius:数值+px或百分比
定位 position
- static 默认值
- relative 相对定位
- 参考物：自己本身的位置
- 方向：left/right/top/bottom: 数值+px 可以设置负数 百分比,
- 特点
- 移动之后依然占据空间
- 应用：移动盒子
- absolute 绝对定位
- 参考物：参考有定位属性(除了static)的祖先元素,定位元素通过一层一层想上找，找到有定位的祖先元素，如果找到body依然没有找到有定位的祖先元素，参考浏览器窗口(子绝父相)
- 方向：left/right/top/bottom: 数值+px 可以设置负数
- 特点
- 脱离文档流，且文字能被遮挡
- 块级元素设置margin:0 auto;会失效
- 内联元素设置定位转换成块元素
- 应用场景：有重叠效果的需求
- 实现盒子水平垂直居中
- 第一种
- 设置该元素left:50%;(参考元素宽度的一半)margin-left:当前盒子宽度的一半
- 设置该元素top:50%;(参考元素高度的一半)margin-top:当前盒子高度的一半
- 第二种
- 设置left:0;top:0;right:0;bottom:0;
- 设置margin:auto; 上下左右居中
- 第一种
设置透明色
background-color: rgba(253, 196, 215);
a的取值是0-1之间的数 0:完全透明 1:不透明 值越小越透明
设置圆形
border-radius: 50%或者100%;
定位 position
- fixed 固定定位
- 参考物：浏览器的窗口
- 移动：left/top/right/bottom
- 特点
- 不会跟随滚动条的滚动而滚动
- 脱离文档流
- 宽度自适应的时候，宽度不显示，可以通过设置width:100%;
- 应用场景
- 固定导航
- 固定侧边栏
- 广告
- 粘性定位 sticky
- 参考物：浏览器的窗口
- 移动: top
- 特点：没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
- 定位属性的层级关系 z-index
- 默认最后书写的，显示在最上面
- auto(默认值)/number:数字 没有单位
- 值越大，显示的在最前面，可以设置负数
锚点
- 应用：在同一个页面实现不同板块的跳转
1.必须使用a标签2.必须是id,3.#一定要加
<a href="#id名">游戏</a>
<div id="box"></div>
宽高自适应
- 宽度自适应
- 块元素
- 不设置宽度，和父元素一样宽
- 设置百分比
- 内联元素
- 宽度由内容撑开
- 最大宽度：max-width;最大不能超过该值 min-width:最小宽度不能超过该值
- 块元素
- 高度自适应
- 高度由内容撑开; height:auto;
- 最大高度：max-height 最小高度 min-height
- 设置百分比参考父元素的高度 如果要参考body高度的话，需要设置
html,body{height:100%}
- 高度塌陷
- 条件
- 父元素不设置高度，想要通过子元素撑开
- 子元素设置了浮动
- 解决方法
- 给父元素(高度坍塌的元素)设置overflow:hidden; 触发BFC(块级格式上下文)
- 弊端: 会把父元素之外的元素隐藏掉
- 在浮动元素的下方添加一个空的div标签,添加css属性
clear: left/right/both 清除浮动元素带给自己的影响,只对块级元素生效
2. 弊端：代码冗余 - 万能清除法
- 给父元素(高度坍塌的元素)设置overflow:hidden; 触发BFC(块级格式上下文)
- 条件
高度塌陷的元素::after {
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden;
}
.clearfix::after{
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden;
}
```
* 伪元素选择器
添加的内容属于内联元素
+ 选择器::after{ 添加到父元素的最后
content:""; 必须要有
}
+ 选择器::before{ 添加到父元素的最前面
content:"";
}
+ 选择器::first-letter{ 选择第一个字符
css属性:css属性值;
}
+ 选择器::first-line{ 选择到第一行
css属性:css属性值;
}
#### css继承
* 字体类：font-family：字体类型；font-weight:字体加粗；font-size:字体大小 font-style: 字体样式
* 文本类:color:颜色 text-indent: 缩进（只对块级元素生效） text-align:对齐方式 line-height:行高 word-spacing:字之间的距离；letter-spacing:字符之间的距离；text-decoration:文本修饰
* 列表：list-style-type:列表类型 list-style-image:图标路径 list-style-position:图标的位置 list-style:none;去掉列表符号
* 不可继承：height;margin,padding,display,float,position
#### 表格和表单补充
* 表格补充
+ css属性
- table
1. 宽度/高度
2. border-spacing:单元格之间的距离
3. border-collapse:边框的合并
4. table-layout:auto/fixed(固定) 不会因为内容变多而撑大单元格的宽度
- td: 边框
+ 标签
+ 行分组
1. <thead>表头</thead>
2. <tbody>表体</tbody>
3. <tfoot>表尾</tfoot>
+ 标题标签
<caption>表格的标题</caption>
+ 列标题的标签
<th>列标题</th>
1. 加粗且居中
```html
<table>
<caption>这是个表格的标题</caption>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>111s1fgsgdsg</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<!-- <td></td> -->
</tr>
</tfoot>
</table>
```
* 表单
+ 单选框
```html
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<input type="radio" name="sex" disabled> 禁止选中
```
+ 多选框
```html
<input type="checkbox" checked>亚索中单
<input type="checkbox">诺手上单
<input type="checkbox">盲僧打野
<input type="checkbox">石头人辅助
<input type="checkbox">伊泽瑞尔射手
<input type="checkbox" disabled>提莫
```
+ 下拉列表
```html
<select name="" id="">
<option value="1">玄策</option>
<option value="2">鲁班</option>
<option value="3">武则天</option>
<option value="4">花木兰</option>
<option value="5">瑶</option>
</select>
```
* 文件上传
```html
<input type="file">
```
* 多行文本域
```html
设置css属性 resize:none;禁止拉伸
<textarea name="" id=""></textarea>
```
* 默认选中 checked
* 禁止选中 disabled
* label
```html
将for的属性和input中的id绑定，提高用户体验
<label for="name1">
请输入姓名<input type="text" id="name1">
</label>
<label for="man">
<input type="radio" name="sex" id="man">男
</label>
BFC规范
- BFC: Block formatting context (块级格式化上下文)
- 触发条件
- float值为left/right
- position的值为absolute和fixed
- display为inline-block(内联块), table-cell(单元格), table-caption(表格标题), flex(弹性盒), inline-flex(弹性盒)
- visible的值hidden/scroll/auto
- 特性
- 在BFC区域，浮动元素的高度会计算在内
- 浮动元素不与BFC区域重叠
- 应用
- 解决高度塌陷(触发条件加在高度塌陷的父元素身上)
- 实现两栏布局(右侧区域触发BFC)
- 解决margin的传递(触发条件加在父元素身上)
css3渐变 ie9以下不支持
- 线性渐变
- background-image/background:linear-grident(方向,颜色1,颜色2……)
- 渐变方向
- to bottom 向下
- to right 向右
- to top 向上
- to left 向左
- to right bottom 向右下角
- to left top 向左上角
- to right top 向右上角
- to left bottom 向左下角
- 数值+deg(角度)
- 设置百分比
/* 0%-40% 是红色的纯色 40%-60% 红色到蓝色渐变 60%-100% ；蓝色的纯色*/ background: linear-gradient(red 40%, blue 60%); - 重复性的线性渐变
background:repeating-linear-gradient(red 40%, blue 60%); - 径向渐变
bakrgound-image/background:radial-gradient(位置,颜色1,颜色2)- 位置
- center 中心
- 水平方向：left/center/right
- 垂直方向：top/center/bottom
- 兼容写法
background: radial-gradient(left, red, blue); background: -webkit-radial-gradient(left, red, blue); background: -ms-radial-gradient(left, red, blue); - 位置
- 重复性的径向渐变
background: repeating-radial-gradient(red 20%, yellow 40%);
css3过渡
- transition: 需要过渡的属性 transition-duration transition-timing-function(顺序不固定，当只有一个时间的时候，表示过渡时间，两个时间第一个表示过渡时间，第二个表示延迟时间)
- transition-property 需要过渡的属性 transition-delay
- transition-duration 过渡所需要的时间 s(秒)/ms(毫秒) 1s=1000ms
- transition-delay 过渡延迟时间 s(秒)/ms(毫秒)
- transition-timing-function 过渡效果
- linear: 匀速
- ease: 逐渐慢下来
- ease-in: 加速
- ease-out: 减速
- ease-in-out 先加速后减速
- 贝斯埃尔曲线：http://cubic-bezier/
- 过渡属性加在原本的盒子身上
- 过渡的属性要对应
浏览器的前缀
- ie -ms
- 谷歌 -webkit-
- 火狐 -mz-
- 欧鹏 -o-
雪碧图/精灵图
- 将多张图整合到同一个图片上
- 应用：background-position调整位置
css-2d
- 位移 transform 向右和向下为正数
- transform:translateX(移动距离) px/%(相对当前盒子的宽度)
- transform:translateY(移动距离) px/%(相对当前盒子的高度)
- transform:translate(X,Y) x和y都移动
- 利用位移实现水平垂直居中(子元素未知宽高)
.box { width: 400px; height: 400px; border: 1px solid black; margin: 40px auto; position: relative; } .box1 { /* width: 200px; */ /* height: 200px; */ background-color: blueviolet; position: absolute; left: 50%; transform: translate(-50%, -50%); /* margin-left: -100px; */ top: 50%; /* margin-top: -100px; */ } - 旋转 transform 正值：顺时针 负数：逆时针
- transform:rotateX(数值deg)
- transform:roteteY(数值deg)
- transform:rotateZ(数值deg)/transform:rotate(数值deg)
- 缩放 transform 不要使用负数
- transform:scaleX(数值) 1表示正常 >1 放大 <1缩小 水平缩放
- transform:scaleY(数值) 1表示正常 >1 放大 <1缩小 垂直缩放
- transform:scale(X,Y) 1表示正常 >1 放大 <1缩小 水平和垂直 值一样，可以写一个
- 倾斜 transform
- transform: skewX(数值deg) x轴倾斜
- transform: skewY(数值deg) y轴倾斜
- transform: skew(X,Y) x和y都倾斜
- 旋转/缩放中心 transform-origin:水平 垂直;
- 水平 left/center/right
- 垂直 top/center/bottom
- 数值px
- 百分比
- 旋转和位移同时使用
先位移，后旋转
transform: translateX(400px) rotateZ(80deg);
先旋转，坐标轴变化，根据变化后的轴的方向去位移
transform: rotateZ(80deg) translateX(400px);
动画
- animation
-
使用：animation: 动画名 动画持续时间 延迟时间 动画效果 执行次数
- animation-name: 动画名
- animation-duration: 动画的持续时间 s/ms
- animation-delay: 动画的延迟时间 s/ms
- animation-timing-function: 动画的效果
- animation-iteration-count: 具体的数值/infinite(无限循环)
- anmiation-direction: 动画执行的方向
- normal 正向
- reverse 反向
- alternate 正向和反向交替运动
- animation-play-state 动画是否播放
- running 播放默认值
- paused 暂停
-
定义动画
@keyframes 动画名{ from{} ==>0% to{}==>100% } 关键帧分的是时间 @keyframes 动画名{ 0%{ css属性:css属性值 } 10%{} 0.5s 20%{} 1s 30%{} 100%{} } -
- 动画和过渡的区别
- 过渡需要hover去触发，动画可以自动播放
- 动画可以重复播放
css3-3d
- 形成3d空间,加在变形元素的父元素身上
transform-style:preserve-3d; - 位移
- transform: translateZ(距离)；px/%
- transform: translate3d(x,y,z); 三个轴都移动
- transform: translateX() translateY() translateZ();
- 旋转
- transform: rotateX(); x轴的旋转
- transform: rotateY(); Y轴的旋转
- transform: rotate3d(数字,数字,数字，角度) 数字：0/1 0不旋转 1旋转
- transform: rotateX() rotateY() rotateZ()
- 缩放
psd切图
- 文件–》生成–》图像资源打勾
- ctrl+k 找到左侧工具栏–>增效工具–>右侧 启用生成器打勾==》确定
- 窗口–》图层
- 选中工具选择并点击想要保存的图片，图层区域会对应的出现该图，双击–》修改名字且要加图片的后缀.png
- 到psd的源文件的文件夹里 会生成 assets的资源文件夹，所有的图片都在下面
网格(grid)布局
- 父元素
- 形成网格布局 display:grid;
- 列 grid-templete-columns;
- 数值 数值,有几列就写几个数值+px
- 百分比
- 数值+fr
- repeat(重复次数,列的宽度)
- 行 grid-templete-rows: 数值 数值—;
- 数值 数值,有几列就写几个数值+px
- 百分比
- 数值+fr
- repeat(重复次数,列的宽度)
- grid-template-areas: 划分区域
display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); grid-template-areas: "a1 a1 a2" "a1 a1 a2" "a3 a4 a2" ;- 行间距: row-gap:数值+px
- 列间距: column-gap:数值+px
- 水平方向对齐 justify-content
- start
- end
- center
- space-between
- space-around
- space-evenly
- stretch
- 垂直方向对齐 align-content
- start
- end
- center
- space-between
- space-around
- space-evenly
- stretch
- 内容在网格里的水平对齐方式 justify-items
- start
- end
- center
- stretch
- 内容在网格里的垂直对齐方式 align-items
- start
- end
- center
- stretch
- 子元素
- grid-area: 区域的名称,不要加引号
p:nth-of-type(1){ grid-area: a1; background-color: blueviolet; }
网格布局的步骤
- 补全网格,观察网格为几行几列,设置行属性和列属性
- 观察合并后总共有几个格子,有几个格子就在父元素下面写几个子元素
- 对同一个格子起相同的名字,设置grid-template-areas 划分区域
- 对子元素设置grid-area,指定对应的区域
图片整合 雪碧图/精灵图
- 主要使用的属性：background-position: 背景图的位置
- 优点
- 减少浏览器请求图片的次数
- 减少图片的体积
- 缺点
- 可维护性差，修改图标可能会影响到别的图标
- 适应性较差
浏览器大战
浏览器内核
- ie浏览器：Trident
- 火狐：Gecko 代码开源
- 苹果 & 谷歌旧版本: Webkit
- 谷歌 & 欧鹏: Blink
兼容
- 在ie浏览器中，a标签套图片会自带边框 ie10及以下
- 解决：去掉边框 img{border:none}
- 图片自带底部3px的留白
- vertical-align: bottom/middle/top 给图片添加
- display:block; 给图片添加
- font-size:0; 给父元素添加
- 表单元素对齐不一致
- 设置怪异盒模型
- 设置浮动
- 透明度 opacity 在ie浏览器中不支持 0-1
- opacity的值照常设置，适应正常的浏览器
- 单独设置ie中透明属性：filter:alpha(opacity=value);取值范围 value: 1-100(整数)1 完全透明 100不透明
过滤器
- 下划线属性过滤器
- ie6以下会出现最小高度失效的问题,会把height当作最小高度
- 语法：选择符{_属性：属性值；}
- _属性名; _height只有ie6及以下才识别，可以设置_height:数值+px；单独针对ie6
- !important关键字过滤器 权重值最高
- 语法：选择符{属性：属性值!important;}
- color: blue !important; 用的较少，因为权重太高，不好覆盖
- *属性过滤器
- *属性名； *color:red; 只有ie7及以下才识别
- \9 只有ie浏览器识别，别的浏览器不识别
- 语法：选择符{属性：属性值\9;}
- \0 只有ie8以上才识别，别的浏览器也不识别
- 语法：选择符{属性：属性值\9;}
优化
- 主题的优化，网页的标题
- 页面头部优化
- 向搜索引擎说明你的网页的关键词；
- 告诉搜索引擎你的站点的主要内容；
- 图片的优化
- 添加alt属性，在图片未加载的时候显示
版权声明：本文标题：HTMLCSS 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1727192614a1101590.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论