HTML/CSS

最新推荐文章于 2024-07-25 11:52:08 发布

西安尤雨溪

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量900

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_54625720/article/details/130871859

版权

HTML相关概念和建站流程

什么是HTML?
- 英文：Hyper Text Markup Language
- 中文：超文本标记语言
  - 标记语言：描述网页的一种语言
  - 超文本：文本或者图片可以点击且跳转的超链接
HTML5：html第五个版本，一直处于发展的阶段
XHTML：可扩展的标记性语言
- XHTML和HTML的区别
  - 单标签后面必须有斜杠 /
  - 属性值必须是双引号
  - 标签必须使用小写
web标准
- w3c：万维网联盟，规范网页代码，非盈利性组织，主要制定html和css的的标准
- ECMA：欧洲厂商联盟,主要制定js的标准
网页组成
- 结构 html
- 表现 css
- 行为 js
建站流程
1. 申请域名（网址）
2. 租用服务器
3. 建设网站（前端）
4. 推广
5. 维护

HTML基本结构

手写基本结构

    <!-- 声明文档类型 -->
    <!DOCTYPE html> 
    <html>
    <!-- 头部 -->
    <head> 
        <!-- 编码格式 -->
        <meta charset="utf-8">
        <!-- 网页的标题  -->
        <title>h52005的标题</title> 
    </head>
    <!-- 主体 -->
    <body>
        内容
    </body> 
    </html>

快速生成html结构
- 新建一个.html后缀的文件
- 英文状态下，敲一个!
- 按一下tab或者回车键

HTML基本语法

标签/元素/标记：尖括号中的第一个单词
- 双标签/双标记：成对出现的标签，后面的标签需要带/
- 单标签/空标记：单独出现的标签
属性：标签之后用空格隔开
- 属性和属性值通过 = 来连接，属性值通过引号引起来
- 一个标签可以出现多个属性，多个属性之间用空格隔开

HTML基本标签

文章类的标签
- 标题标签：h1-h6;
  - h1-h6字体大小依次变小
  - 加粗
  - 独占一行显示
- 段落标签 p
  - 独占一行
- 特殊字符
  - 空格
  - 左尖括号 <
  - 右尖括号 >
  - 版权符号 ©
  - 商标符号 ®
- 修饰性的标签
  - 加粗：b/strong，在同一行显示
  - 倾斜：i/em，在同一行显示
  - 下划线：u，在同一行显示
  - 删除线：del，在同一行显示
  - 上标：sup，在同一行显示
  - 下标：sub，在同一行显示
  - 换行：br,单标签
  - 水平线：hr,单标签,独占一行
超链接 a,自带下划线，颜色为蓝色
- a标签属性target
  - _self：当前窗口
  - _blank: 新开窗口
图片标签 img 单标签
- - src: 图片路径 + 绝对路径：线上图片地址 + 相对路径 1. 当当前文件和目标文件在同一个目录下，直接图片名+后缀 2. 当当前文件和目标文件的文件夹在同一个目录下面目标文件文件夹名/图片名+后缀 3. 当当前文件的文件夹和目标文件的文件夹在同一个目录下面 ../目标文件文件夹名/图片名+后缀 - alt：图片未加载显示的内容 - title: 鼠标滑过显示的文本，可以给任何标签添加 - 宽：width,高：height

快捷键的使用

+ 注释：ctrl+/ 取消注释 ctrl+/
+ 保存：ctrl+s 未保存顶部文件名显示白点
+ 运行：alt+b 
+ 放大：ctrl + +
+ 缩小：ctrl + - 
+ 撤销：ctrl+z
+ 反撤销：ctrl+y
+ 向前缩进：shift+tab
+ 向后缩进：tab

两个**表示重点

html基本标签

列表标签 >表示嵌套
- 无序列表 ul>li
  - li的前面自带项目列表符号
  - li是独占一行
  - ul是独占一行
  - 一般ul只能嵌套li,有别的标签的话可以放到li里面
  - 应用: 网页导航/新闻列表
- 有序列表 ol>li
  - 默认是阿拉伯数字排序
  - 排序方式的类型 type
    - 1 默认值
    - A/a 英文字母
    - i/I 罗马数字
  - 排序起始位置 start 对应的值必须是数字
  - li 独占一行
  - ol 独占一行
- 自定义列表 dl>dt/dd
  - dt标签里面一般放图片或者名词，独占一行
  - dd标签里面一般是图片说明或者名词的解释，独占一行
布局标签
- div: 划分网页板块,没有自带的样式，非常干净
- span：小文本,在同一行显示，没有自带的样式
表格标签 table>tr>td
- table属性快速生成表格 table>tr5>td5 表示5行5列的表格
  - 边框 border=“数值”
  - 宽 width=“” 高 height=“”
  - 表格位置 align
    - left 默认值
    - center 居中
    - right 居右
  - 单元格之间的空隙 cellspacing=“数值” 一般情况下设置0
  - 内容距离单元格的距离 cellpadding=“数值”
  - 边框颜色 bordercolor=“颜色的英语单词”
  - 背景色 bgcolor=“颜色的英语单词”
- tr属性
  - 水平对齐方式 align 作用于整行
    - left 默认值
    - center 居中
    - right 居右
  - 垂直对齐方式 valign 作用于整行
    - middle: 默认值
    - top 顶部
    - bottom 底部
- td属性
  - 宽度：width=“” 高度 height=“”
  - 水平对齐方式 align 作用于当前列
    - left 默认值
    - center 居中
    - right 居右
  - 垂直对齐方式 valign 作用于当前列
    - middle: 默认值
    - top 顶部
    - bottom 底部
  - 合并列 colspan=“数值”
  - 合并行 rowspan=“数值”
  - 合并步骤
    1. 补全表格，写出表格结构
    2. 观察行合并还是列合并，哪个不同合并哪个,既有行合并又有列合并，先做列合并
    3. 合并几行/列对应的值就是几
    4. 将属性放到合并的起始位置
    5. 将多余的单元格（一开始单元格显示的位置）注释掉
表单标签 + action：表单提交的路径 + method：提交方式 GET/POST - get一般用来获取数据，post提交数据 - get请求安全系数低，post安全系数高 + 表单元素单标签，在同一行显示 - 文本框： - 密码框： - 提交按钮： - 重置按钮：重置填写的信息 - 普通按钮： - input的属性 placeholder="输入框的提示信息"

初识css

css
- 英文：Cascading Style Sheets
- 中文：层叠样式表
  - 样式表
    - 内联样式表
      1. html属性 style,放到标签后面用空格隔开
      2. 将css属性和属性值通过冒号链接，且用分号结尾，写到style属性值里面
      - 特点：只作用于加了样式的标签
    - 内部样式表
      1. 创建一个style的双标签，放到head标签里面,
      2. 根据css语法将对应的样式写道style标签里面
    - 外部样式表
  - css语法
    - 选择器{
      css属性名：css属性值;
      css属性名：css属性值;
      ……
      }
      eg: p{
      color:red;
      background-color:blue;
      }
  - css属性
    - 宽度：width: 数值+px,独占一行的标签宽生效
    - 高度：height: 数值+px独占一行的标签高生效
    - 字体颜色：color：颜色英文单词
    - 背景色：background-color：颜色的英文单词
  - 层叠

认识css

中文名：层叠样式表
样式表
- 内联样式表
  - 给标签创建一个style属性，标签后用空格隔开
  - style属性对应的属性值css属性名:属性值;css属性名:属性值
```
<p style="color:red;width:100px;"></p>
```
- 内部样式表
  - css语法：
    选择器{
    css属性名:属性值;
    css属性名:属性值;
    ……
    }
```
div{
  width:100px;
  height:100px;
  background-color:red;
}
```
  - 创建一个style的双标签，放到head标签里面
- 外部样式表
  - 新建一个css文件夹，在文件夹里面新建一个.css后缀的文件
  - 引入外部css文件
    - 引入方法1
      1. link标签引入css文件，将link标签放到head标签里面
```
<link rel="stylesheet" href="css文件路径" type="text/css">
```
      - link是单标签
      - rel: 关联样式表的属性，必须有
      - href：css文件路径
      - type：文件类型
      1. 在css文件中直接写样式，不要写style标签
    - 引入方法2 @import (少用)
      1. 创建style的双标签，放到head标签里面
      2. @import url(“css文件路径”);放到style标签里面
  - 两种引入方式的区别
    1. 来源不一样，link属于html的引入方法，@import的方法属于css
    2. 兼容性：link都可以使用，@import只有在ie5及以上才有效果
    3. 引入文件的区别，link不止可以引入css文件，还可以其他文件，@import只能引入css文件
    4. 加载顺序的不同，link引入的css文件和html文件是同时加载的，@import引入的文件html文件加载完成之后，才开始加载
- 三种样式表的权重/优先级
  - 内联>内部谁高听谁的
  - 内联>外部谁高听谁的
  - 外部和内部谁后写听谁的(就近原则)
- 三种样式表的选择
  - 内联样式表：样式比较少
  - 内部样式表：页面较小，做小练习
  - 外部样式表：开发整站页面
选择器
- 标签选择器,页面中所有的标签都会有该样式
```
标签名{
  css属性：css属性值;
}
```
- id选择器
  - 给标签添加id属性对应的值 id名
  - #id名{}
  - 特点
    1. id名不允许重复
    2. 一个标签只能有一个id名
  - 应用: 划分网页外围结构
- class选择器
  - 给标签添加class属性对应的值就是class名
  - .class名{}
  - 特点
    1. 可以重复使用
    2. 一个标签可以有多个class名 class名之间用空格隔开
- 通用选择器
  - *{} 所有的标签
  - 一般使用
    *{
    padding:0; 填充
    margin:0; 边距
    }
- 伪类选择器
  - 伪类:某种状态下显示的样式爱恨法则 (l v h a)
  - 选择到a标签的选择器:link{} 鼠标未点击之前
  - 选择到a标签的选择器:visited{} 鼠标未点击之后
  - 选择器:hover{} 鼠标滑过的样式所有的标签都可以使用
  - 选择到a标签的选择器:active{} 鼠标按下的样式
命名
- 必须是英文
  - 命名语义化
  - 一个单词要小写
  - 驼峰命名:headerTitleTxt
  - 短线连接:header-title-txt
  - 下滑线连接:header_title_txt
- 英文数字下划线
- 不能以数字开头
设置板块居中
1. 设置宽度
2. 设置margin:0 auto;
设置文字在区域内上下居中:line-height的值和height值设置成一样
边框: border:1px solid black;
层叠

选择器

后代（包含）选择器
- 选择器选择器选择器{css属性名：属性值;}
- 后代选择器选择到所有的后代，不止孩子
- 每个选择器之间必须有后代的关系
- 样式生效的是最后一个选择器
群组选择器
- 选择器,选择器,选择器{css属性名：属性值}
- 相同样式的放到群组选择器里面，不同样式依然是在自己的选择器
选择器的权重
- 权重值，谁的权重值高优先显示谁的样式
  1. 内联样式 1000
  2. id选择器 100
  3. class选择器/伪类选择器 10
  4. 标签选择器 1
  5. 后代选择器的权重值为所有选择器相加
  6. 权重值相同的情况下，后写的样式优先级高，就近原则
  7. 群组选择器的权重值是自己本身的权重值
  8. 继承样式的权重值是最低的可以理解成 0
- 考虑情况：对同一个元素，用不同的选择器进行选择，设置了相同的css属性，但是设置了不同的属性值

css属性

文本属性
- 字体大小 font-size,默认：16px;
  - 数值 + px 常用
  - em 默认值1em=16px;首行缩进用;相对父元素设置，em前面是几就表示是父元素字体的几倍
  - rem 默认值 1rem=16px; 移动端用,相对的是html的字体大小，rem前面是几就表示是html字体的几倍
- 字体类型 font-family
  - 中文，要带引号
  - 英文
    1. 一个单词可以不加引号
    2. 多个单词要加引号
  - 可以设置多个，并且每一个之间用逗号隔开，依次从左向右检索，没有找到的话，显示默认的字体类型
- 字体加粗 font-weight
  - bold 加粗
  - lighter 更细
  - 数值 100-900 并且只能是整百,不加单位 100-500一种加粗样式 600-900另一种加粗
  - normal 去掉加粗样式
- 文本样式 font-style
  - italic 倾斜
  - normal 去掉倾斜
- 字体颜色 color
  - 英文单词 red
  - 十六进制 #60a1fd
  - rgb(0-255,0-255,0-255)
  - 拓展 rgba(0-255,0-255,0-255,0-1);0-1 值越小越透明
- 文本修饰 text-decoration
  - none 去掉默认的下划线
  - underline 下划线默认显示的颜色是字体颜色
  - overline 上划线
  - line-through 删除线
- 大小写转换 text-transform
  - capitalize 首字母大写
  - uppercase 全部大写
  - lowercase 全部小写
  - none 默认值
- 行高 line-height
  - 数字是当前字体大小的几倍
  - 数值+px
    - 多行文本里面用来调整行和行之间的距离
    - 在单行文本里面可以让文本进行上下的居中
- 水平居中 text-align
  - center 水平居中
  - left 默认左对齐
  - right 右对齐
  - justify 两端对齐,增大每个单词或者汉字之间的间距
    单行文本在区域内上下左右居中
    1. 设置text-align:center;
    2. 设置line-height的值和height值一样
- 首行缩进 text-indent
  - 数值+px
  - 数字+em，相对于当前字体大小,一般设置2em
  - 可以设置负数（悬挂式缩进）
- 字体的复合形式
  - font: 字体加粗字体样式字体大小/行高字体类型
  - font: font-weight font-style font-size/line-height font-family
  - 字体加粗和字体样式可以不写，不写表示默认样式
  - 字体大小和行高必须用/隔开且字体大小行高字体类型必须都存在且顺序不可乱
- 字符之间的距离 letter-spacing
  - 数值+px
    - 汉字之间的距离
    - 字母之间的距离
  - 可以设置负值
- 单词之间的距离 word-spacing
  - 数值+px 对英文有效，且是每个单词之间的距离，中文无效
- 鼠标样式 cursor
  - pointer 手型
  - help 帮助
  - text 文本
  - crosshair 十字型
  - wait 等待
无序列表属性
- 列表符号的类型 list-style-type
  - disc 实心圆默认值
  - circle 空心圆
  - square 方型
  - none 去掉列表符号
- 列表符号所在的位置 list-style-position
  - inside 在li的里面
  - outside 默认值在li的外面
- 列表符号图片 list-style-image:url()
边框属性 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;
}
```
背景属性
- 背景色 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 右浮动
浮动特点
- 浮动元素从父元素的第一个位置开始排列，且挨着排列
- 浮动元素会脱离文档流，后面没有浮动的元素会占据浮动元素的位置，文字不会遮挡
- 浮动元素不会影响到前面的兄弟（哥哥）会影响后面的兄弟，文字不会遮挡
- 当父元素宽度不够的时候，最后一个浮动元素会掉下来，依旧按照原来的浮动位置显示
浮动的应用场景
- 将纵向排列的元素横向排列

元素类型

块级元素（div p ul li form table dl dt dd ol ）
- 独占一行
- 可以设置宽高
内联元素（span b strong i em a img input u sup sub）
- 不可以设置宽高
- 在同一行排列
内联块元素（img input）
- 可以设置宽高
- 在同一行显示

盒模型

组成部分：内容（content）+内填充(padding)+边框(border)+外边距(margin)
内容：width:宽度 height:高度
内填充 padding
- 一个值 padding:10px; 四周
- 两个值 padding:10px 20px; 上下左右
- 三个值 padding:10px 20px 30px; 上左右下
- 四个值 padding:10px 20px 30px 40px; 上右下左
- 单方向设置
  - padding-left:10px; 左填充
  - padding-top:10px; 上填充
    ……
- padding值的特点
  - 会撑大盒子,如果不想让盒子撑大，就用设置的宽高分别减去padding的值，如果宽高没有设置就不用减
  - 不能设置负数
  - 背景图/色的位置不受padding值的影响，或者说背景色从padding区域就可以显示
  - 调整子元素在父元素之间的位置
  - padding值显示区域在内容区的外面，边框的里面

页面布局

通栏：版心之外的内容
- 版心之外有没有背景色
版心：内容区

盒模型

盒模型 = content+padding+border+margin
padding值设置的特点
- padding值会撑大盒子，如果不想被撑大，需要用原来的宽高减去padding的值
- padding值的位置是在内容区的外面边框的里面
- padding的值的区域可以显示背景色/背景图
- padding值可以调整内容在盒子里面的位置
- padding值对内联元素的左右是生效的，上下值显示不准确
- padding不可以设置负值
margin值的设置
- 一个值 margin:10px; 四周
- 两个值 margin:10px 20px; 上下10 左右20
- 三个值 margin:10px 20px 30px; 上左右下
- 四个值 margin：10px 20px 30px 40px; 上右下左
- 单方向的值
- margin-left:左边距
margin的特点
- margin不会撑大盒子
- margin的位置在边框的外面
- margin区域不能显示背景色/图
- margin用来调整盒子和盒子之间的距离
- margin对内联元素左右生效，上下不生效
- margin可以设置负数
- margin: auto; 只能调整水平方向的居中;
  - 一定要加宽度
  - 内联元素没有效果
margin存在的问题
- margin的传递给盒子内的第一个子元素添加margin-top的时候，或错误的加在父元素的身上
  - 解决
    1. 给父元素加边框 1px solid transparent
    2. 给父元素添加浮动
    3. 给子元素添加浮动
    4. 给父元素添加 overflow:hidden;(溢出隐藏)
    5. 给父元素添加padding
- margin的上下重叠 当给上面的盒子添加下边距下面的盒子添加上边距的时候，会产生margin的重叠，值相同的话，取该值，不同的话取最大值
  - 解决：只给一个盒子添加间距

元素类型

块级元素 p div h1-h6 form table ul li dl dd dt ol
- 可以设置宽高
- 独占一行
- 盒模型所有的属性都生效
- 一般作为其他元素的容器，p标签一般不作为块级元素的容器,可以嵌套内联
内联元素 a span b strong em i sub sup
- 不可以设置宽高，是由内容决定
- 在同一行显示
- 盒模型属性padding和margin的上下显示不准确，左右正常显示
- 一般不作为容器
内联块元素 input img
- 可以设置宽高
- 在同一行显示
- 盒模型属性都适用
置换元素和非置换元素
- 置换元素：浏览器在解析input和img标签的时候，不能确定input的type和img的src对应的图片 input和img
- 非置换元素：除了置换元素之外
元素类型的转换
- display
  - inline （内联元素）
  - block (块状元素)
  - inline-block (内联块元素) 页面显示盒子之间会有留白，因为回车导致的空字符占位了
    1. 将标签在同一行编写
    2. 给父元素设置font-size:0;子元素正常设置字体大小
  - none (隐藏)
    - display:none;隐藏元素，且不占位
    - visibility:hidden; 隐藏元素,但是占位

css属性的继承

字体：

font-size:字体大小 font-family:字体类型 font-weight:加粗 font-style：倾斜 color:字体颜色

文本

text-align:对齐方式 line-height 行高 word-spacing:单词之间的距离 letter-spacing: 字符之间的距离

列表

list-stye-type:项目列表符号类型 list-style-position:项目符号的位置 list-style 列表符号类型 list-style-image 列表图片

不可以继承

height: 高度 margin 外边距 padding:内填充 float: 浮动 display:类型转换

宽度默认和父元素一样宽

文本溢出

内容溢出属性 overflow
- visible 默认值超出显示
- scroll 滚动纵向和横向都产生滚动跳
  - overflow-x：设置横向滚动
  - overflow-y：设置纵向滚动
- auto 内容未超出正常显示超出显示滚动条
- hidden 溢出之后隐藏/裁切
单行文本溢出显示省略号
- 设置宽度
- 设置不换行 white-space:nowrap;
- 设置溢出隐藏 overflow:hidden;
- 设置超出显示省略号 text-overflow:ellipsis;

定位与锚点

设置圆角

正圆 border-radius:50%;
设置圆角 border-radius: 数值+px

定位与锚点

定位属性：position
- static 默认值相当于没有定位
- relative 相对定位
  - 确定参考物自己本身
  - 确定移动距离 left/top/right/bottom: 数值+px
  - 特点
    1. 占据空间，不脱离文档流
  - 应用场景
    1. 一般用在移动盒子
- absolute 绝对定位
  - 确定参考物有定位属性的祖先元素，一层一层往上找，如果到body依然没有找到除了static属性的定位属性的祖先元素，那就参考当前窗口(子绝父相)
  - 确定移动距离 left/top/right/bottom: 数值+px
  - 特点
    1. 不占据空间，脱离文档流，且遮挡文字
    2. margin:0 auto 失效
    3. 内联元素加了定位后，转为块元素
  - 应用场景
    1. 图文叠加的效果/有重叠效果
  - 实现盒子的水平垂直居中方法1
    1. 元素设置absolute定位
    2. left:50%;margin-left:-元素宽度的一半
    3. top:50%;margin-top:-元素高度的一半
  - 实现盒子的水平垂直居中方法2
    1. 元素设置absolute定位
    2. 设置margin:auto
    3. left:0;top:0;bottom:0;right:0;
- fixed 固定定位
  - 参照物参考浏览器的窗口
  - 移动距离 left/top/right/bottom:数值+px
  - 特点
    1. 不占空间脱离文档流，遮挡文字
    2. 不会跟随滚动条而滚动
    3. 如果没有设置宽度，不会跟随父元素变化，需要单独进行设置
  - 设置元素在浏览器窗口的水平垂直居中（和absolute值设置一样）
  - 应用场景：广告，导航，右侧导航，回到顶部
- sticky 粘性定位
  - 参考物浏览器窗口
  - 移动距离 top
  - 特点
    1. 没有达到top值之前，属于relative的定位，达到top值之后，变成fixed定位，脱离文档流
定位元素的层级属性
- z-index: auto(没有具体的值)/number
  - 值越高，层级越高，元素就在最上面
  - 可以设置负数
锚点 (必须是id名和a标签的结合)
- 直播

宽高自适应

宽度自适应(参考父元素的宽度)
- 块状元素；宽度不设置或者设置auto 独占一行
- 内联元素：宽度不设置，由内容决定
- 最小宽度，min-width宽度不设置，调整窗口宽度的时候，到最小的宽度后，不会再缩小
- 最大宽度 max-width 宽度不设置调整窗口宽度的时候到最大宽度后不会再变大
高度自适应
- 不设置宽度由内容撑开 height:auto;
- 最小高度：min-height 高度不设置，当内容过少时，形成最小的区域
- 最大高度：max-height 高度不设置，内容过多时，不能超过当前区域，可以设置超出显示滚动条
- min-height的ie兼容性: ie6及以下不识别min-height，把height当作最小高度
- 过滤器
  _css属性：属性值; _height:属性值

补充

内联元素添加浮动后，会变成块级元素

高度塌陷及解决

高度塌陷产生的条件
- 父元素没有设置高度
- 子元素设置浮动
解决高度塌陷
- 给父元素添加overflow:hidden;(会触发BFC,浮动高度会计算在内)
  - 弊端: 会隐藏掉父元素之外的元素
- 给浮动元素的后面添加一个空的块级元素
  - 清除浮动 clear: left/right/both; 只对块级元素生效（清除浮动元素对自身的影响）
  - 弊端代码冗余
- 万能清除法
  选择器::after{ 选择器：高度塌陷的父元素
  content:“”;
  clear:both;
  display:block;
  height: 0; content不小心多加了内容
  overflow: hidden;
  }
伪对象（元素）选择器
给当前选择器的元素添加子元素，子元素是最后一个孩子,属于内联元素
- 选择器::after{
  content: “”; 添加的内容必须要有
  }
  给当前选择器的元素添加子元素，子元素是第一个孩子,属于内联元素
- 选择器::before{
  content: “”; 添加的内容必须要有
  }
  选择到元素的第一个字符,只对块级元素生效
- 选择器::first-letter{
  css属性：css属性值
  }
  选择到元素的第一行，只对块级元素生效
- 选择器::first-line{
  css属性：css属性值
  }

表格表单的补充

表格css补充
- table样式
  - 边框属性，在外围形成
  - 单元格之间的距离 border-spacing
  - 合并边框 border-collapse: collapse(合并)/separate(默认值)
  - table-layout: auto/fixed(固定) fixed: 加快运行速度
- td样式
  - 边框属性，在每一个td周围
表格标签补充
- 行分组
  - 表头
  - 表体
  - 表尾
- 表格的标题
- 列标题等同于td但是有加粗且居中的样式

表单的补充

单选： type=“radio” checked:默认选中 disabled：禁止选中

<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
<input type="radio" disabled>中性

多选 type=“checkbox” checked:默认选中 disabled：禁止选中

 <input type="checkbox" disabled>鲁班
  <input type="checkbox" checked>韩信
  <input type="checkbox">王昭君

下拉列表 select>option

  <select name="" id="">
      <option value="M416">M416</option>
      <option value="M762">M762</option>
  </select>

上传文件 type=“file”

<input type="file">

多行文本域

  <textarea name="" id="" cols="30" rows="10"></textarea>

表单绑定

 <label for="man">
        <input type="radio" name="sex"  id="man">男gfdg
 </label>

表单字段集

  <fieldset>
        <legend>表单标题</legend> 只能出现一次
        <input type="text">
  </fieldset>

BFC规范

BFC 块级格式化上下文
- 触发条件
  - float: left/right;
  - postion: absolute/fixed;
  - display: inline-block, table-cell, table-caption, flex, inline-flex
  - overflow: hidden;
- BFC区域特点
  - BFC的区域不会与浮动盒子重叠
  - 计算BFC的高度时，浮动元素也参与计算
css3-渐变
线性渐变
background-image/background: linear-gradient(方向,颜色1，颜色2,……)
- 方向
  - to bottom(向下)
  - to top(向上)
  - to right(向右)
  - to left(向左)
  - to right bottom(向右下角)
  - to right top(向右上角)
  - to left top(向左上角)
  - to left bottom(向左下角)
- background-image/background: linear-gradient(red 20%,blue 50%);
  0-20%的区域显示红色 20%-50%显示红蓝渐变的过程 50%-100%显示蓝色的纯色
重复性线性渐变
background-image/background: repeating-linear-gradient(red 20%,blue 50%);
径向渐变
background-image/background:radial-gradient(位置,颜色1,颜色2)
- 位置
  - left/center/right center
    background-image/background:-webkit-radial-gradient(left,颜色1,颜色2)
  - top/center/bottom center
  - 数值+px
  - 百分比
  - 只设置一个值的情况，另一个值默认是center
    background-image/background:radial-gradient(位置,颜色1 20%,颜色2 30%)
重复性径向渐变
background-image/background:repeating-radial-gradient(位置,颜色1 20%,颜色2 30%)

css3-过渡

transition: 需要过渡的属性过渡时间过渡延迟时间过渡效果(加在需要过渡的元素身上)
- 需要过渡的属性 transition-property all(代表所有的属性)
- 过渡时间 transtion-duration: s(秒)/ms(毫秒) 1s=1000ms
- 过渡延迟时间 transition-delay: s(秒)/ms(毫秒) 1s=1000ms
- 过渡效果 transition-timing-function:linear(匀速)/ease(逐渐慢下来)/ease in(加速)/ease-in-out(先加速后减速)/ease-out(减速)/贝斯埃尔曲线(http://cubic-bezier.com/)
对display:none隐藏到显示是没有过渡效果的

css3-2d变形

移动 transform
- translateX() 水平方向移动
- translateY() 垂直方向移动
- translate(X,Y) 水平和垂直同时移动
- 设置百分比表示自己本身宽高的百分比
- 设置水平垂直居中
  - 定位属性正常设置，向上和向左的拉取设置为transform:translate(-50%,-50%);
旋转 transform
- rotateZ(数值+deg)/rotate(数值+deg) 顺时针正值逆时针负值
- 旋转基点 transform-origin
  - left/center/right
  - top/center/bottom
  - 数值+px
  - 百分比
缩放 transform
- scaleX(1) 水平 1：表示不缩放 0-1之间表示缩小 1以上放大
- scaleY(1) 垂直
- scale(1) 水平垂直
- 缩放基点 transform-origin
倾斜 transform
- skewX(数值+deg) x轴倾斜
- skewY(数值+deg) y轴倾斜
- skew(数值+deg) x,y轴倾斜

背景

background-color:背景色/background:pink;
background-images:背景图/background:url();

浏览器的前缀

谷歌浏览器/苹果浏览器内核webkit -webkit-
ie浏览器内核 Trident -ms-
火狐浏览器内核 Gecko -moz-
欧鹏浏览器内核 Blank -o-

透明属性

opacity: 0-1; 值越大越清晰 0隐藏 1显示

动画

定义动画

@keyframes 动画名{
  from{
    变化的css属性
  }
  to{
    变化的css属性
  }
}

@keyframes 动画名{
 0%{}
 10%{}
 20%{}
 50%{}
 100%{}
}

使用动画
animation: 动画名动画执行时间动画延迟时间动画的执行次数动画的效果
- 动画名 animation-name: 英文名
- 动画的执行时间 animation-duration: s/ms
- 动画延迟时间 animation-delay: s/ms
- 动画的执行次数 animation-iteration-count: 数值(不要单位)/infinite(无限循环)
- 动画的效果 animation-timing-function: linear/ease/ease-in/ease-in-out
- 动画执行的方向 animation-direction：normal/reverse/alternate(动画先正常运行再反方向运行，并持续交替运行)
- 动画暂停和启动 animation-play-state:running/paused(暂停)

3d变形

形成3d空间 transform-style: preserve-3d;加在变形元素的父元素
位移 transform
- x轴位移 transform:translateX()
- y轴位移 transform:translateY()
- z轴位移 transform:translateZ()
- 三个方向移动 transform:translate3d(x,y,z)
旋转 transform
- x轴旋转 transform:rotateX(数值+deg)
- y轴旋转 transform:rotateY(数值+deg)
- z轴旋转 transform:rotate(数值+deg)/rotateZ(数值+deg)
- 三个方向 transform:rotate3d(a,b,c,d)
  - a,b,c 0(不旋转)或者1(旋转)
  - d(旋转角度)
- transform:rotateY(数值+deg) rotateX(数值+deg);
位移+旋转
transform: rotateZ(30deg) translateX(200px); 先旋转后位移
transform: translateX(200px) rotateZ(30deg); 先位移后旋转
缩放

3d变形

景深 perspective:像素值; 值越小越近越大; 近大远小
3d缩放
- transform:scaleX() x轴缩放
- transform:scaleY() y轴缩放
- transform:scaleZ() Z轴缩放
- 复合写法 transform:scale3d(x,y,z)

h5语法

DOCTYPE可以小写
双标签对应的结束标签可以省略可以省略的标记
li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略的标签
html、head、body、colgroup、tbody
属性值可以使用单引号

h5新增标签

section 区块
article 文字类区块
aside 侧边栏
header 头部
footer 底部
nav 导航
figure(dl)>figcaption(dd) 图文
main 重要内容
hgroup 标题分组
time 时间(内联)

多媒体标签

音频

<audio src="音频的路径" controls autoplay muted loop>
  controls:控件
  autoplay: 自动播放
  muted: 暂停播放
  loop: 循环播放
  <audio controls>
    <source src="课堂示例/告白气球.ogg" type="audio/ogg"> 
    <source src="课堂示例/告白气球.mp3" type="audio/mpeg"> 
      浏览器不能识别
  </audio>

视频

 <video src="视频的路径" controls autoplay muted loop poster="()">
   controls: 控件
   autoplay: 自动播放
   muted: 暂停播放
   loop: 循环播放
   poster: 路径 未播放前显示的内容
  <video controls>
    <source src="课堂示例/mov_bbb.ogg" type=" video/ogg"> 
    <source src="课堂示例/mov_bbb.mp4" type="video/mp4"> 
    <source src="课堂示例/mov_bbb.webm" type="video/webm"> 
      浏览器不能识别
  </video>

新增表单属性

type=“email” 邮箱
type=“number” min=“最小值” max=“最大值” step=“” 数值
type=“url” 地址
type=“color” 颜色
type=“range” 滑动条
type=“time” 钟表时间
type=“month” 月份
type=“week” 第几周
type=“datetime-local” 本地时间
type=“date” 年月日
表单属性
- 必填 required
- 提示信息 placeholder
- 自动聚焦 autofocus 只能有一个
- 自动提示 autocomplete=“on/off” 默认值是on 必须和name结合使用
- 正则 pattern 限定输入内容符合哪种规则
- 文件上传多选 mulitple

  <input type="url" list="data-list">
  <datalist id="data-list">
      <option label="W3School" value="http://www.W3School.com.cn" />
      <option label="百度" value="http://www.W3School.com.cn" /> 
      <option label="淘宝" value="http://www.W3School.com.cn" /> 
  </datalist>

css3选择器

属性选择器
- 元素[属性名]
- 元素[属性名=“属性值”]
- 元素[属性名^=“属性值”] 以属性值对应的值开头
- 元素[属性名$=“属性值”] 以属性值对应的值结尾
- 元素[属性名~=“属性值”] 包含属性值(单独出现的属性值)
- 元素[属性名*=“属性值”] 只要整体包含属性值
伪类选择器
- 结构性伪类选择器
  - child系列
    1. 子元素E:first-child 匹配到第一个子元素必须是 E
    2. 子元素E:last-child 匹配到最后一个子元素是必须是 E
    3. 子元素E:nth-child(n) 从父元素中孩子开始数到n 不能够匹配到前面的E
    4. 子元素E:only-child() 父元素里面只能由一个孩子E
  - type系列
    1. 子元素E:first-of-type 匹配到第一个子元素E
    2. 子元素E:last-of-type 匹配到最后一个子元素E
    3. 子元素E:nth-of-type(n) n 可以是表达式 2n/3n等
    4. 子元素E:nth-last-of-type(n) 从子元素倒数
- 目标伪类
  目标元素:target{} 跳到目标元素后样式生效
- 状态伪类选择器
  1. 表单元素:enabled 可编辑的表单样式
  2. 表单元素:disabled 不可编辑的表单样式
  3. 表单元素:checked 默认选中的表单样式
  4. 元素::selection 鼠标选择高亮的状态
- 动态伪类
  1. a:link 未访问之前的状态
  2. a:visited 访问之后的状态
  3. 元素:hover 鼠标滑过的状态
  4. a:active 鼠标按下
层级选择器
- 后代选择器
- 子元素选择器父元素>子元素只能够选择到子元素不能选择到后代
- 相邻选择器选择器+选择器只能选择后面的相邻的一个兄弟
- 相邻的兄弟们选择器~选择器选择该元素的后面的所有的兄弟

css3属性

盒子阴影
box-shadow: x轴偏移 y轴偏移模糊距离阴影颜色阴影位置(默认是外侧outset/inset);
eg: box-shadow:10px -10px 5px red inset
文本阴影
text-shadow: x轴偏移 y轴偏移模糊距离阴影颜色
eg: text-shadow: 10px -5px 3px blue;
背景的起始位置
background-origin:padding-box(填充区域开始显示)/(border-box)border区域开始显示)/content-box(内容区开始显示)
背景的裁切
background-clip:border-box(边框之外被裁切)/padding-box(padding之外被裁切)/content-box(内容之外被裁切)
背景图的大小
background-size: 宽度高度
- 像素值
- 百分比相对于盒子的宽高
- 关键词
  - cover 背景图拉伸全覆盖可能会导致图片被裁切
  - contain 背景图拉伸到盒子边缘后停止可能会导致盒子有留白
圆角
border-radius:
- 一个值四周
- 两个值左上/右下右上/左下
- 三个值左上右上/左下右下
- 四个值左上右上右下左下
  圆形 border-radius:50%;
图片边框
border-image:图片路径裁切大小(不要带单位) 重复方式(sketch(拉伸)/repeat(重复)/round(铺满))

怪异盒模型

标准盒模型 box-sizing: content-box
盒模型的宽 = margin左右+border左右+padding左右+content的宽
怪异盒模型 box-sizing: border-box
盒模型的宽 = margin左右 + content的宽

多列布局

column-count: 列数
column-gap:列之间的距离
column-rule: 列之间的边框和边框属性值一样设置
防止瀑布流的折断：break-inside: avoid;(加在被折断的元素身上)

flex(弹性盒)布局

父元素(父容器)
- 形成弹性盒
  - display:flex
- 主轴方向 flex-direction
  - row 默认横向(从左向右)
  - row-reverse 横轴反向(从右向左)
  - column 纵轴(从上到下)
  - column-reverse 纵轴反向(从下到上)
- 主轴对齐方式 justify-content
  - flex-start 主轴的起点,默认值
  - flex-end 主轴终点
  - center 主轴中间
  - space-between 两端对齐
  - space-around 中间盒子的间距是两边的2倍
  - space-evenly 平均分配剩余空间
- 侧轴对齐方式 align-items
  - stretch 拉伸,默认值,子元素不要设置高度
  - flex-start 侧轴起点
  - flex-end 侧轴终点
  - center 侧轴居中
  - baseline 基线对齐
- 换行 flex-wrap
  - nowrap(不换行)/wrap(换行)
- 多行之间的排列方式 align-content
  - flex-start 父元素主轴起始点挨个排列
  - flex-end 父元素主轴终点挨个排列
  - space-between 两端
  - space-around 中间是两端的2倍
  - space-evenly 平均分配
- 复合写法 flex-flow: flex-direction flex-wrap;
子元素(子项)
- 放大 flex-grow: 0(默认值); 可以设置数值
- 压缩 flex-shrink:
  - 1 默认值，压缩
  - 0(不压缩)
  - 横向滚动设置
    1. 父元素不要设置换行
    2. 子元素设置不压缩
    3. 父元素设置overflow:auto;
- 子项的宽 flex-basis 等同于宽度
- 排序 order 数值，值越大越往后面排列
- 子项对齐 align-self
  - stretch 拉伸
  - flex-start 侧轴起始位置
  - flex-end 侧轴终止位置
  - center 侧轴居中
- 复合写法 flex: flex-grow(放大) flex-shrink(缩小) flex-basis(宽度)
  - flex: 0(不放大) 1(压缩) auto(宽度);
  - flex: 1; 放大 flex-grow:1 意义相同

input中文本框和按钮对不齐的原因及解决

原因：按钮是根据怪异盒模型进行解析，文本按照标准盒模型进行解析
解决：将文本设置设置为怪异盒模型

字体图标的使用

打开阿里巴巴矢量图 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
搜索所需要的字体图标（可以通过汉字搜索）搜索到后点击添加购物车
都添加完成后，点击购物车，点击下载至项目
页面跳转到我的项目后，点击下载至本地
将文件放到站点下，解压，在html文件中通过link引入iconfont.css
通过<span class="iconfont icon-xxx>
- iconfont的class名都加上
- icon-xxx是需要用到的图标的class名记得不要加 .

响应式布局

根据不同的分辨率，显示不同的样式
优点适配性好
缺点工作量大，一般小型网站

媒体查询

@media 关键字设备类型 and (设备特性) {}
关键字：only(限定当前设备类型)/not(除了当前设备类型)一般不写
设备类型
- all(所有设备，默认值)
- print(打印)
- screen(显示器/移动端设备/笔记本)
设备特性：设备宽度 min-width(大于最小宽度)/max-width(小于最大宽度)
and两边必须有空格多个媒体特性用and连接
属性值后面不要加分号
内部样式使用

<style>
    @media all and (min-width:1000px) {
          body {
              background-color: cadetblue;
              color: red;
          }           
    }
</style>

外部样式引入

  <link rel="stylesheet" media="all and (min-width:1000px)" href="css/css1.css">
  <link rel="stylesheet" media="all and (min-width:500px) and (max-width:999px)" href="css/css2.css">
  <link rel="stylesheet" media="all and (max-width:499px)" href="css/css3.css">

移动端的准备工作

+ 视口 viewport - 可视视口：设备宽度 - 布局视口：默认是980px; 放到移动端后会进行压缩 + width=device-width 压缩后的980的宽设置成和设备宽度一样宽 + initial-scale=1.0 缩放倍数 1：不缩放 + minimum-scale=1.0,maximum-scale=1.0 最小缩放倍数最大缩放倍数 + user-scalable=no 是否缩放 yes:缩放 + viewport-fit="cover" 适配全面屏手机
设备参数
- 屏幕尺寸：对角线的长
- 分辨率：有很多小点组成的
- PPI: 每英寸显示的像素点的个数
- DPI: 对于电脑来说PPI一样，对于打印机来说，DPI越高，打印精度越高
- 物理像素：ps量取的像素
- 逻辑像素：css设置的像素
- dpr(逻辑像素比) = 物理像素/逻辑像素
  对于pc端来说，ps量取的是多少，css设置多少，对于移动端，iphone4及之后推出了视网膜高清屏(retina屏)
- 设计图是640/750 dpr = 2
- 大于750以上的 dpr=3
单位 em rem
- rem:跟随根元素（html）的字体大小去变化
  一般情况下设置html{font-size:100px;}
- vh(viewheight) /vw (viewwidth)
  1vw = 视口宽度的1%
  10vw= 视口宽度的10%
  100vw = 视口宽度的100%
  100vh = 视口高度的100%
- 推理过程
  1rem = 100px;
  100vw = 视口宽度的100%;
  假如当前设计图是750 设备宽度375
  100vw = 375px;
  1rem = 100px;
  font-size:2rem;
  100px=??vw 100px = 26.667vw
  1rem = 100px 100px = 26.667vw
  1rem = 26.667vw
  假如当前设计图是750 设备宽度375 html{font-size:26.667vw}
  假如当前设计图是1242 设备宽度414
  100vw = 414px;
  ?? vw = 100px;
  1rem = 24.155vw
  假如当前设计图是1242 设备宽度414 html{font-size:24.155vw}
  假如当前设计图是320 设备宽度是320
  100vw= 320px;
  ?? vw = 100px
  1rem = 31.25vw
  假如当前设计图是320 设备宽度320 html{font-size:31.25vw}

移动端是适配

设计图是640/750 dpr = 2
大于750以上的 dpr=3
在ps里面图像大小，根据dpr 修改图像大小
设置根元素字体大小
假如当前设计图是750 设备宽度375 html{font-size:26.667vw}
假如当前设计图是1242 设备宽度414 html{font-size:24.155vw}
假如当前设计图是320 设备宽度320 html{font-size:31.25vw}
设置大小的时候，根据量取的值再除以100
安装插件px to rem; 先正常写px单位最后整体选中再alt+z转换单位

移动端补充

flexible.js的使用
- 去掉meta标签
- 通过script引入flexible.js的文件
- 正常量取设计图的大小,不需要去修改图像大小,只需要除以100;

grid(网格布局)

父元素(容器)
- 形成网格布局 display:grid
- 设置行 grid-template-rows
  - 数值+px
  - 百分比
  - auto 占满剩余的空间
  - fr 格子所占整个网格的份数
  - repeat(重复的次数,重复的值)
- 设置列 grid-template-columns 值和行的设置一样
- 划分网格 grid-template-areas
```
父元素{grid-template-areas: "a1 a1 a2" "a1 a1 a2" "a3 a3 a2";}
```
- 行和列之间的间隔
  - 行: row-gap: 数值+px
  - 列: column-gap: 数值+px
- 横轴对齐方式 justify-content
  - start: 起始位置
  - end 终点
  - center 居中
  - space-between 两端
  - space-around 中间是两端两倍
  - space- evenly 平均分配
- 纵轴的对齐方式 align-content
  - start 起始
  - end 结束
  - center 居中
  - space-between 两端
  - space-around 中间是两端两倍
  - space- evenly 平均分配
- 内容在网格内的水平对齐方式 justify-items
  - start 每个网格的起始
  - end 每个网格的结尾
  - center 每个网格的中间
- 内容在网格内的垂直对齐方式 align-items
- start 每个网格的起始
- end 每个网格的结尾
- center 每个网格的中间
子元素(子项)
- grid-area: 指定子项显示的区域
```
子元素{ grid-area: 区域名字;}
```
网格布局的步骤
1. 观察网格总共有几个大格子,就在整个box中写几个div
2. 将大格子补全,观察有几行几列,设置对应的宽高
3. 对相同的格子起不同的名字,写到对应的网格划分属性中
4. 给子项设置grid-area指定对应的名字

浏览器大战

浏览器内核

ie浏览器 Trident
火狐浏览器 Gecko 开源社区
苹果/谷歌旧版本 Webkit
欧鹏/谷歌(28版本后) Blink内核

常见的bug和解决方法

bug(问题)
- a标签套img标签的时候，在ie11以下会出现边框
  - 解决hack：去掉边框
- 图片自带的3px的底部留白
  - 解决hack1：图片设置display:block
  - 解决hack2：设置父元素font-size:0
  - 解决hack3: vertical-align: 垂直居中 (图片身上使用才有效)
    1. baseline(默认基线) 不能解决
    2. bottom (底线)
    3. middle(中线)
    4. top(顶线)
- 表单元素的对齐
  - 解决hack：文本框设置怪异盒模型且浮动
- 透明属性
  - opacity:会影响子元素的显示在ie8及以下没有效果,可以在图片上使用
    - 解决hack1：filter: alpha(opacity=20) 取值为1-100 1表示完全透明 2表示不透明
  - rgba 不会影响子元素的显示在ie8及以下没有效果
- 过滤器
  - 带_的属性选择器{_属性：属性值}
  - !important 权重值最高，一般不使用
  - 属性过滤器选择器{*属性：属性值；} 只在ie7及以下识别
  - \9过滤器选择器{属性：属性值\9;} 只在ie里面识别
  - \0过滤器 IE8及以上版本识别；其它浏览器都不识别

雪碧图(精灵图)的使用

优点
- 很好地减少网页的http请求，从而大大的提高页面的性能
- 图片体积小
- 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率
- 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格
缺点
- 图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景
- 改动麻烦

西安尤雨溪

关注

0
点赞
踩
2

收藏

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

background-image/background:repeating-radial-gradient(位置,颜色1 20%,颜色2 30%)background-image/background: linear-gradient(方向,颜色1，颜色2,……background-image/background:radial-gradient(位置,颜色1,颜色2)最小宽度，min-width宽度不设置，调整窗口宽度的时候，到最小的宽度后，不会再缩小。BFC 块级格式化上下文。置换元素和非置换元素。
复制链接

扫一扫