HTML初识
1.常用5大浏览器（了解）
浏览器 = 内核 + 外壳 shell
内核 = 渲染引擎(html+css) + js引擎(javascript)
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| Chrome 谷歌 | Webkit—>Blink |
| FireFox 火狐 | Gecko |
| Opera欧朋 | Presto |
| Safari | Webkit |
2. 前端三大要素
HTML: 负责网页结构—》 有什么 （大小区域 ,图片 ,链接,音视频,文字）
CSS: 负责网页样式—》 这些东西长什么样子（布局,文字大小，类型，颜色 ，宽高间距）
JS: 负责网页交互+数据渲染 —》行为
3.HTML语言
w3c联盟 HTML：超文本标记语言(HyperText Markup Language) 并不是编程语言 叫标记语言
超： 超越 .txt 纯字符 不仅仅包含文本，还可以包含链接，图片，音视频，flash,动画
拿HTML语言写的文字—》超文本文件 .html—>网页文档
标记
死的—》规定好的
写法:
标记由<包裹 一对 <标记名字TagName> </标记名字TagName>
<开始标记>文本内容/其他标记</结束标记>
1.一组标记代表一个特定功能 a img p div
<a></a> a标签 a标签
2.标记的默认属性
- 标记的默认属性出现在开始标记的>前面
- 属性可以出现多个 每个以空格隔开 每对属性是由 属性名字=“属性值”
- 属性的作用 起到功能作用 保存数据 描述标签
<a href="" target=""></a>
<zjl year="40" height='173' gender="male"></zjl> 例子
3.标记的内容
<zjl year="40" height='173' gender="male"> 文本内容+标记 </zjl>
由以上三部分组成的一个标签我们把它叫HTML元素
HTML文档
由HTML元素和CSS代码和JS代码组成的文档 .html
文档模板
- 新建一个.html文件
- 快捷键 !+回车 （动作快点）
<!DOCTYPE html>
不是标签 它是必不可少的文档声明 h5文档声明 告诉浏览器以哪种规则去解析此html文件
只能放在第一句
标签关系
嵌套放置 （父子关系）
平行放置 (兄弟关系)
根标签
<html lang="en"> lang属性 en英文 默认语言是英文
</html>
字符集设置
<meta charset="UTF-8">
charset 字符集设置 用来设置解析网页的字符集
ASCII 美国标准信息交换码 128个字符 2^7 = 128
Unicode 2^8 = 256
UTF-8 万国码字符集
国内:
GB2312 简体中文
GBK 加入了对繁体的支持
网页标题
1.书签
2.用户看
3.搜索引擎SEO
<title>京东购物-多快好省...</title>
常见的HTML标签的学习
1.文本相关的标签
网页的基本单位 px pixel 像素 默认的字体大小16px
加粗标签:装几个字
b bold粗 <b></b>
strong <strong></strong>
😄总结：样式相同 区别：b普通标签 strong标签被我们叫语义化标签
斜体标签 i /em
<i></i>
<em></em>
😄总结：样式相同 区别：i普通标签 em标签被我们叫语义化标签
下划线标签 u / ins
<u></u>
<ins></ins>
😄总结：样式相同 区别：u普通标签 ins标签被我们叫语义化标签
中划线标签 s/del
<s></s>
<del></del>
总结：样式相同 区别：s普通标签 del标签被我们叫语义化标签
段落标签 p paragraph 段落
一般明显有换行的时候就是多个段落 由多个p元素包裹
装多行文字
<p>
<b>国家卫健委新闻发言人 米锋</b> ：4月12日，全国 本土现有重症病例首次降至100例以下，本土新增确诊病例10例，为3月11日以来单日最高，其中多数属聚集性病例。据世界卫生组织最新通报，全球累计死亡病例已超10万例，连续4日单日新增确诊病例超8万例。外防输入、内防反弹形势严峻，防控工作决不能放松。
</p>
标题标签(语义化标签)
六级标题 从大到小
h1 ~ h6 h1一级标题 文字最大 加粗效果最明显
总结:
- 不用H3以下的标题 （阅读性差，SEO）
- h1在一个页面里有且只能有一个 (SEO)
图片标签 img 单标签
<img src="" alt="">
src: 图片的链接地址
width: 宽度
height:高度 只写一个 自动缩放的
-
网络的方式
<img src="">
2.布局相关的标签
字符实体
HTML语言的保留字符 （特殊字符）
比如 < > 人民币符号 版权符号 空格
只能用在文字当中不 不能用在布局
什么是语义化？作用是什么?
语义化标签: h1 h6 em strong…
语义化 : 合适的场景用合适的标签
作用
- 当css不存在的时候，语义化标签会呈现清晰的结构，有较强的可读性
- 有利于搜索引擎优化 方便爬虫获取有效的信息 （例子:网站logo会用h1,h2）
- 方便机器阅读文档
常用的快捷键
!+enter 生成网页模板
快速生成标签 标签名+tab or 标签名+enter
快速复制上一行 shift+alt 上箭头
快速复制下一行 shift+alt 下箭头
emit语法
标签名*3
1.笔记软件的使用
.md 任何
标题
h1~h6 快捷键 # 一级标题 ## ### … / ctrl+i
插入表格
快捷键
ctrl+T / |姓名|年龄|生日|+enter
插入图片
方法1： 不能调整图片大小 ctrl+shift+i
方法2：改变图片大小
插入列表
有序列表 数字.+空格+enter 取消列表状态 继续回车把前面的序号删了就行
- 列表数据1
- 列表数据2
无序列表 + 主列表 小黑圆圈 子列表（空心圆）-
-
无序列表数据1
- 子列表的数据1
- 之内的介绍费
-
的收费计费
插入链接
复制网址到这里 / 手动敲出来
加粗 四个乘号 把内容写进两个的中间去
加粗文字
高亮 四个等号 把内容写进两个的中间去
表情 :表情名字:
😄
⭐️
🔽
👱
插入图片标签
插入网络图片
<img src="https://img14.360buyimg.com/mobilecms/s140x140_jfs/t1/115275/30/456/28210/5e8c78d5Ef238e935/4e7df5e0a9394582.jpg.webp">
引入本地图片
绝对路径
根盘符\a\d\1.jpg
\和/都可以成功引入图片不过在我们写代码的时候最好还是一致 用/
ctrl+h 替换
特点：与当前的html文件路径无关
相对路径
主要是从当前html文件出发如何找到那个图片
同级目录 ./
上一级…/
上一级的上一级…/…/
根目录 /
<img src="./image/1.jpg" alt="">
图片相关属性
src: 图片路径
alt: 当图片加载不成功时的文字提示
width:宽度
height:高度
title: 鼠标移入文字提示
水平线标签 hr（了解）
<hr width="" align="" color="">
align:水平对齐方式 left/ right / center
color:颜色
超链接标签 a anchor锚
作用：设置跳转到其他html文档
<a href="http://baidu.com"> 百度 </a> 文字链接
<a href="http://sina.com">
<img src=""> 图片链接
</a>
<a href="mailto:1621255538@qq.com">请联系我1621255538@qq.com</a> 邮箱链接 (了解)
<a href="a.zip">下载</a> (了解)
注意：
- 超链接默认是以当前页的方式打开
相关属性
href: 设置打开页的地址
target: 设置超链接的打开方式
- 在本页打开 _self (默认方式)
- 在新页打开 _blank
base标签
base标签 只能写在head标签内部
href="" 设置a链接的统一地址
target="" 将界面的a链接统一设置成为新建页打开
锚点链接
链接到一个界面的某一个部分 (识别—》锚点)
1.在a链接href属性里定义锚点 （要连接的那个部分的名称）
规矩: 唯一标识 #锚点名 英文字母
2.把你的锚点设置到相应的跳转的部分里 id=“锚点名字”
<a href="#first">西游记</a>
<a href="#second">水浒传</a>
<a href="#third">红楼梦</a>
<a href="#forth">三国演义</a>
二：布局标签 （容器，盒子，区域）
大盒子 div
一般用来装大的图片，大段文字p,div ,span ,h1
<div></div>
小盒子 span
一般用来用来装特别小图标，几个文字
<span></span>
三：标签的分类
大致：块级元素 和 行内元素,行内块元素
块级元素特点
- 默认宽度是父元素宽度100%，独成一行，以新的一行开始 (霸道)
- 高度取决于内容的高度
div,p,h1~h6,
行内元素特点
- 默认宽高全部取决于自己的内容，设置宽高不起作用
- 并排放置，放不下的时候才会换行
span,em,i,strong,a,…
行内块元素特点
- 默认的宽高也取决于内容 ，但是设置宽高起作用
- 并排放置 ，放不下的时候才会换行
img
注意：行内块这个类实际上属于行内这个类的
CSS入门
简介:
css: cascading style sheets 层叠样式表 （毫无逻辑） 网页的美容师
**作用:**样式+布局
1.引入CSS代码方式
行内引入
一般是将样式写在开始标签>左侧，通过一个style对象去引入
style=“属性名1:属性值1;属性名2:属性值2…”
<div style="width:300px;height:300px;background-color:red"></div> division
缺点：
- 结构不清晰，样式和结构写在一起，没有形成分离(w3c明确提出，结构，样式，行为相分离)
- 代码冗余，重复 ，后期维护困难
**优点:**优先级高，可以覆盖外部和文件内部样式
文本内部引入
将css代码通过样式表()的方式嵌套在head标签内部
1.挑选元素 （css选择器）
2.加样式
<head>
<style>
//写css样式属性
</style>
</head>
缺点：
- 没有彻底分离
优点：
- 符合w3c提倡 ，一定程度上实现了结构与样式相分离
- 代码结构清晰，冗余减小，后期维护相对容易
外部引入
把css样式代码写入一个.css文件内 ,通过一个link标签链接引入一个类型为stylesheets的css文件
这个link标签写到head标签内部去(规定)
.html .css
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- rel指明当前链接进来的文档类型 -->
<link rel="stylesheet" href="./外部引入.css">
</head>
**优点：**结构和样式彻底分离 样式文件多次使用 后期也好维护
**缺点：**优先级低
讨论三种引入方式的优先级别
行内>文本内部>文本外部 (就近原则)
CSS基础选择器
选择器语法
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
标签选择器
通过标签的名字去选择元素
TagName {
width:200px;
height:200px;
}
类选择器
通过类名去挑选元素 （先给你要挑选的元素起名字 class=“类名” 小写字母+数字+大写字母+ -/_ 尽量不要数字开头）
.three-ele {
font-size: 50px;
color:skyblue;
}
<em>斜体标签</em>
<em>斜体标签</em>
<em class="three-ele">斜体标签</em>
<em>斜体标签</em>
<em>斜体标签</em>
<em class="three-ele">斜体标签</em>
id选择器
通过id名字去挑选元素 并且挑选回来的元素只有一个(唯一性)
写法：给元素身上写一个id=“id名字”的属性 然后通过#id名字 {} 去挑选元素
全局选择器 *
挑选html文档里的所有元素 包括html和body在内
* {
}
基础选择器的优先级(权重)分析
id选择器 100 > 类选择器 10 > 标签 1> *全局0
一：文本的相关属性
文字大小，文字类型，文字粗细，文字的倾斜，行高，文字下划线，文字中划线，颜色，缩进，水平对齐，垂直居中，字符间距
字体属性font
font: font-style font-weight font-size/line-height font-family;
font-style:字体形态 normal 正常/ italic 斜体
font-weight:字体粗细 100-900 数字 400 正常 >400粗 <400细 / 英文单词 400 相当于normal 默认值
bold 粗 相当于600 bolder light lighter(了解)
font-size:字体大小 px（掌握） / % / em / rem (了解)
line-height 行高
font-family:字型 字体家族
建议：用css控制元素样式 不要用标签去实现
文本相关属性一般都是可以继承的 font-,line-,text-,color,list-都可以父传子，但是当你给子元素单独设置这些属性的时候，你设置的那个值一定会覆盖继承下来的属性
继承性属性<*<TagName<class<id
行高line-height
记忆：line-height=盒子高度时 使单行文本垂直居中
单位: px / 数值1.5 or 2 / %
1.5的含义是字体大小的1.5
% 的含义是字体大小的%倍
font-family字体家族
font-family:"楷体"，"微软雅黑"，"Times New Roman",Arial;
- 同时声明多个字体 每个字体以,隔开
- 中文字符或者几个英文单词组成的字体 要加“” or ‘’引起来，如果字体仅仅只有一个英文单词那就可以不用引起来
- 依次向下找 如果有则解析 如果没有就继续向下找
- 尽量不要出现中文汉字 以免乱码 你要写这个字型对应的英文名字或者unicode编码符号
文本修饰属性
text-decoration:overline上划线/underline下划线/ line-through中划线/none无线
缩进属性
text-indent: px / em / rem;
+ 向右缩进
- 向左缩进
字符间距
letter-spacing:px;
文本水平居中
text-align:left/right/center;
不光可以居中文字还可以居中图片，因为图片具有文本的特性
颜色表示法
屌丝程序员表示法： red yellow blue black
标准程序员表示法: 6位16进制 #ff1225
10进制 0-9 二进制 0-1 电信号 0 1 16进制 0-9 A-F 0最小值 F最大值 #000000~#fffffF
#000 黑色~ #fff白色 两位相同时可以简单写一个 #eeffaa --->#efa
具有艺术气息程序员:
rgb(0-255,0-255,0-255); red green blue
rgba(red,green,blue,alpha);alpha透明度 取值[0,1] 0完全透明 1完全不透明
二：列表系列
多条数据垂直放置
无序列表
<ul>
<li>内容</li>
<li>
<div>
<img src="">
</div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
总结：
- ul,li表现块类型 （宽度默认100% 独立成行）
- ul的直接子代只能是li元素
有序列表
<ol>
<li>列表数据1</li>
<li>列表数据2</li>
<li>列表数据3</li>
<li>列表数据4</li>
<li>列表数据5</li>
</ol>
自定义列表
<!-- 自定义列表 dl define list > 标题 dt + 列表项 dd -->
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>购物流程</dd>
<dd>购物流程</dd>
<dd>购物流程</dd>
</dl>
css属性
取消列表前缀标识: list-style:none;
list-style-image 插入一张图片作为标识
list-style-image: url(./2.png);
三：表格标签
<!--大盒子 table> 行tr >列 td -->
<table>
<!-- 缺字段 单独行 tr> 列标题 th
thead:
tbody:
tfoot:
-->
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
<tr>
<td>1001</td>
<td>周杰伦</td>
<td>40</td>
<td>173</td>
</tr>
<tr>
<td>1002</td>
<td>武松</td>
<td>34</td>
<td>183</td>
</tr>
<tr>
<td>1003</td>
<td>杨幂</td>
<td>32</td>
<td>168</td>
</tr>
<tr>
<td>1004</td>
<td>刘亦菲</td>
<td>33</td>
<td>167</td>
</tr>
</table>
特性：（要记）
- 表格设置宽高，内部单元格会根据内容多少自动分配大小
- 单元格当中的单元格 行内等高 列内等宽
- th里的文字默认居中加粗 td居左正常粗细
默认属性（了解）
border: 表格的边框 border="1" 1px宽度的边框 默认颜色是黑的
align: 表格水平对齐方式 left / right /center
bgcolor:背景色
cellpadding:单元格内容与边框的距离
cellspacing:单元格和单元格之间的距离
加在td身上的两个属性
rowspan:行合并 (从上到下) 写完属性删除响应被合并的行
colspan:列合并 (从左到右) 写完属性删除响应被合并的列
css属性（要记）
table {
/* 边框合并 border-collapse:collapse */
border-collapse: collapse;
}
1.文字与文字垂直对齐
对不齐原因：是因为文本默认以基线对齐 （图片相当于是文字）
解决办法：
文本垂直对齐属性： h水平 v垂直
vertical-align:top顶线/middle中线/baseline基线（默认）/bottom底线 ;
2.表单标签
一般用于收集用户信息
表单 form > 表单控件 input(type)>文本框+复选框+单选框+文本域+文件上传域+提交按钮+下拉列表
form块级元素 input元素是行内块类型 label是行内类型元素
type:
1. text 文本框 鼠标点击进去 光标闪烁 聚焦状态
输入完毕 离焦状态
2. password 密码框
3. radio 单选框
4. checkbox 复选框
5. file 上传文件
6. 按钮组
submit 专用的提交数据
reset 重置按钮
button 普通按钮
下拉列表 select > option
文字上传域 textarea
label for="id名字"用于和表单控件元素进行绑定(必须用id绑定)
点击label盒子自动聚焦文本框
表单控件元素的属性
name: 提交到后台数据的键名（属性名）
value:提交到后台的数据的键值(用户输入的内容)
表单form身上属性
action:设置处理此表单数据的后台地址
method控制表单数据的提交方式
-
GET(默认提交方式)
-
POST
总结:
相同点：都可以用于提交数据
区别:
-
GET提交是将提交的数据以参数的方式拼接到地址栏地址的后面(? &)
POST提交的数据保存在请求的form data里
GET方式相对于POST方式不安全
-
GET能提交的数据量小 POST能提交的数据量大
-
GET适合于提交不敏感数据 例如 网站查询 POST提交敏感数据 例如：登录注册
-
GET常用于向后台获取数据 POST常用于传递数据
辅助验证属性
属性名=“属性值” 逻辑属性 true false
required 必填项 如果没填会阻断提交
readonly 只读属性
disabled 禁用
abled 不禁用，可以用的
checked 单选框，复选框的 被勾选
selected 下拉列表选项
size 设置下拉列表项显示的个数
maxlength 设置当前输入的字符串的最大长度
minlength
placeholder 设置默认的文本提示
二：布局第一大核心 盒模型
盒模型是描述网页中盒子的组成部分的规则
盒模型 = 边框(border)+外边距(margin)+内边距(padding)+ 有效内容(width,height)
边框border(分界线)
border:边宽border-width 边型 border-style 边色;
边型:solid实线 / dashed 虚线/ dotted小圆点/ double双实线
加边框的盒子会使盒子的盒模型（可视区域）变大 内减
/* border:1px solid red; */
/* border-top:1px solid red;
border-left:2px dashed deeppink;
border-right:3px dotted skyblue;
border-bottom: 4px double #000; */
/* border-width:2px 4px 6px 10px; */
/* 顺时针方向 上右下左 */
border-width:0px 1px 0px 1px;
border-style:solid dashed dotted double;
border-color:red yellow skyblue tomato;
应用：
小三角形
.a {
width: 0px;
height: 0px;
border-top:10px solid transparent; 透明色
border-left:10px solid transparent;
border-bottom:10px solid yellow;
border-right:10px solid transparent;
}
</style>
</head>
<body>
<div class="a"></div>
盒模型
盒模型组成 = 有效内容(width,height) + 内边距padding + 边框border + 外边距margin
可视区域 = 有效内容(width,height) + 内边距padding + 边框border (内盒模型)
border边框部分
边框撑大盒模型，如果设置了边框那么需要在width,height做内减
padding内边距
功能：设置内容与边界的距离(内容位置移动)
边框撑大盒模型，如果设置了边框那么需要在width,height做内减
内边距不能放置内容，但是可以加背景色，不能负值
width宽度,height高度
width: px;%;auto
height: px;%;auto
% 取父元素值的%作为自己有效内容的宽高 (看父盒子是否宽高度！！！！！！！)
/* 取到了浏览器窗口的高度 */
html {
height: 100%;
}
body {
height: 100%;
}
.a {
/* width: 200px;
height: 200px; */
width: 30%;
height: 40%;
background-color: tomato;
}
</style>
</head>
<body>
<!-- px/%/auto -->
<div class="a"></div>
width:auto浏览器会自动计算盒子的宽高，块元素来说width:auto会取父盒子宽度的100% 行内
元素width:auto的时候代表宽度由内容撑开，但是他两写height；auto时都是由内容撑开
css不能进行运算
- 不要写b盒子的宽度 让b盒子的宽度为auto 针对占满的情况
- calc(80% - 40px) 计算方法 兼容性比较差 40px内边距 运算符左右两侧必须有空格
外边距margin
功能: 1.外边距可以移动盒子 2.可以设置盒子与盒子之间的距离
总结：
- 上左外边距使盒子移动（下，右） 右外不会使盒子发生位置移动
- 外边距不添加背景
3.外边距可以设置负值 正值是距离越来越远 负值是越来越近
应用：
盒子在父盒子水平方向上居中
前提：1.这个盒子的类型必须是块类型 2.这个盒子还必须有明确的可以计算的宽度
margin: 0 auto; 上下外边距为0 左右值auto
外边距塌陷(合并)问题(块类型元素)
只出现在垂直方向
父子嵌套塌陷
**描述：**当父元素有上外边距时，子元素在设置上外边距时会出现一个取两个值较大的那个值作为最终的外边距 ，如果父元素本身没有上外边距此时给子元素设置上外边距会带着父盒子一起向下移动
原因：
表象：浏览器在解析时误会你设置的上外边距就是父盒子的上外边距
实质：BFC规则(块级上下文) 垂直方向是上嵌套的两个盒子外边距会合并(共用了一段公共区域)
方法:
1.不要让浏览器误会这段距离属于公共区域
(1)给父盒子加1px上外边框 border-top:1px solid #fff;(分隔)
(2)给父盒子加1px上内边距 padding-top:1px;(分隔)
(3)给父元素身上+overflow:hidden(触发BFC里私有块级作用域) 让这个盒子成为一个密闭区域 外部
不影响内部 内部不影响外部
兄弟平行上下塌陷
描述：
两个盒子设置上面盒子的下外边距和下面盒子的上外边距会取其中较大值作为最终的边距 相同时取其中一个
**原因：**两个盒子共用一段外边距
方法:
- 避免 （写在盒子身上）
- 给这两个盒子分别嵌套一个父盒子 这个父盒子身上写overflow:hidden
选择器进阶
后代选择器
E F {
}
匹配的是E的子代F元素
子代选择器
E > F {}
匹配的是E元素的直接子代F
相邻选择器
E + F{}
匹配的是E元素紧紧相邻（下一个）的那个类型为F的兄弟元素
兄弟选择器
E ~ F {}
匹配的是E元素相邻的符合F类型的所有兄弟元素
群组选择器（并集选择器）
E,F,D,G {}
匹配的是E和F和D和G类型的所有元素
交集选择器
EF{}
匹配的是既是E类型又符合F类型的元素
伪类链接选择器
:link {} 匹配的是没被访问的a链接
:visited {} 匹配的是已经被访问完毕的a链接
:hover {} 匹配的是鼠标移入的a链接
:active {} 匹配的是当前被点击的a链接
元素的分类和转换
大致分为：行内，块级，行内块类型
display:block 显示为块类型 /inline 行内/inline-block 行内块/none 不显示，隐藏
行内特性(inline)
(1)默认宽高取决于内容的宽高
(2)并排 直到放不下才会换行
(3)设置上下外边距和宽高不起作用，但是设置左右外边距和所有内边距都有效果 ，行高属性不撑开盒子
块级特性(block)
(1)默认宽度是父盒子的100%,默认的高度取决于内容高度
(2)不并排 独立成行 以新行开始
(3)设置所有盒模型属性都可以起作用 行高可以撑开盒子高度
行内块特性(inline-block)
(1)默认宽高取决于内容
(2)并排 直到放不下才会换行
(3)设置所有盒模型属性都可以起作用 行高可以撑开盒子高度
三类元素可以互相转换 通过修改display属性的值
1.行内块实现并排的局限性
-
行内块元素会默认有间距 原因：解析了标签后面的空格
-
行内块元素具有文本对齐特性(基线对齐)导致盒子高低不一致
vertical-align: top/middle/bottom/baseline;
一般不拿行内块实现并排 我们更多的是用浮动属性实现并排
2：布局第二块：浮动
作用：并排（块级，行内块，行内）
属性：
float:left/right/none(默认值)
**特点：**float:left此盒子会找父元素的左边界停靠 ，直到遇到一个浮动盒子或者是一个行内块盒子就会停止浮动实现并排
-
每个并排的盒子都要写浮动属性
-
浮动盒子会覆盖不浮动的盒子 为什么？是因为浮动元素脱离标准流 ，形成浮动流，浮动到上一层，但是不脱离父盒子的管控
**标准流：**默认解析的布局
影响：父盒子高度塌陷 下面的盒子上移
清除浮动带来的影响
1. 给父盒子定高度
缺点:不实际(有些盒子根本没办法固定高度)
2.给父盒子加overflow:hidden
因为这个属性可以触发BFC规则（触发了高度计算的那个规则 浮动子元素就可以参与计算了）
缺点：overflow:hidden溢出隐藏 会把故意溢出的盒子清除掉
3.特定属性 clear:left/right/both
写在浮动流的下边
是盒子3的浮动气流影响了父盒子的高度 所以在盒子3下去清除浮动影响
只有块类型的元素才可以清除浮动影响
缺点：
在结构里添加了很多没有展示内容的空元素 导致我们的结构树冗杂 不利于后期维护 没有形成结构与样式 相分离
方法4：终极方法
真元素：真的存在body里的真实HTML标签
伪元素：由css通过css的伪元素选择器实现的一个元素
.clearfix::after ,.clearfix::before {
content:'',
display:block;
clear:both;
}
.clearfix::after,.clearfix::before {
content: '.';
/* 防止低版本浏览器解析''里的空格 表现成为一个小方块 */
line-height: 0;
height: 0;
font-size: 0;
/* 伪元素默认是行内元素 而清除浮动影响需要块类型的元素 */
display: block;
clear:both;
}
伪元素:
每一个父元素内部可以通过css创造2个伪元素 (一个是在所有内容之前，一个在所有内容之后)
伪元素作为这个父元素孩子存在
//在父元素的所有内容之前插入一个伪元素
父元素::before {
content:'';//设置文本内容
}
//在父元素的所有内容之后插入一个伪元素
父元素::after {
content:'';//设置文本内容
}
伪元素创造出来的元素类型为行内类型
用在不影响大盒子主题内容的小提示盒子
浮动对元素显示模式的影响
行内，行内块，块+浮动—》行内块的特点
浮动最初解决的问题
图文环绕
背景属性
插入图片的另外一种方式
background:background-color background-image background-repeat background-position background-attachment;
background-color背景颜色
background-image背景图片的路径 :url('路径')
background-repeat背景是否平铺 repeat(默认值) /repeat-x 水平平铺/repeat-y垂直平铺/ no-repeat不平铺
background-position 背景位置
background-attachment背景是否附着 （固定） scroll随着滚动条滚动(默认) fixed不随滚动条滚动
background-size:背景大小，尺寸
background-position 背景位置
图片左上角的坐标
background-position:x y;
x水平坐标
y垂直坐标
xpx ypx / x% y% / 方位值 top center left right bottom
background-position:x ;
第二个垂直的位置默认居中 center
x% y% 20% 30% 背景盒子和图片宽度的差的20% 30%背景盒子和图片高度的差的30%
50% 50% 图片居中
0% 50% 图片在左侧边界的居中位置
background-size:背景大小，尺寸
background-size:width height
px px
% % 相对于背景盒子的%多少
背景图一般用在相对的大图(广告图)
布局第三块:定位position
盒模型—》 盒子与盒子之间的距离 内容与边界的距离
浮动 —》 并排 图文环绕
定位 —》 以px级别的精确控制放置元素 想放在哪就放在哪(特殊位置、覆盖关系)(小盒子)
定位类型
position:static 静态定位(默认) / relative 相对定位 / absolute绝对定位 / fixed固定定位
定位值
left: px ; 此盒子的左侧边界距离包含块左边界的距离值
right:px; 水平坐标 此盒子的右侧边界距离包含块右边界的距离值
top:px 此盒子的上侧边界距离包含块上边界的距离值
bottom:px 垂直坐标 此盒子的下侧边界距离包含块下边界的距离值
静态定位 static
**结论：**不会使盒子移动 没有参考位置 是个默认属性 是标准流状态 未脱标 不影响其他盒子布局
所以：不适合布局 （布局上没有用）
相对定位 relative
结论:
1.可以移动盒子
2.参考位置：自身原来初始的位置
3.对其他盒子的布局没有影响 所以不脱离标准 自己移动以后还会保留原来位置
所以： 不适合做布局 因为自己走了会保留原来位置 给界面留下白色区域
作用
- 微调盒子位置(相当于外边距)
- 辅助绝对定位做布局
绝对定位
结论:
1.会发生位置变化
2.参考位置：默认在body
绝对定位的盒子是以距离最近的拥有定位属性(相对，固定，绝对)的父级盒子作为参考的
如果父级盒子没有定位属性你应该创造的是相对定位，保证布局的稳当性—》子绝父相
如果父盒子本身就有绝对或者固定那就不用再写其他定位属性
3.对其他后续的盒子有影响 它走了以后其他盒子会上移占据它原来位置 它不保留原来的位置—》
彻底脱离标准
**所以:**适合做布局
作用：
- anywhere 随意放 只要你能确定坐标 (形成层级)
固定定位 fixed
总结:
1.使盒子发生位置变化
2.以浏览器窗口作为参考(盒子不随滚动条滚动)
3.固定定位不保留原来位置—》脱离标准的—》后面的盒子上移
覆盖效果 和绝对定位类似
所以: 固定定位可以用来布局(限制:需要这个盒子不动 固定在一个位置)
z-index定位层级
设置脱标的定位盒子的展示顺序(向前向后的顺序)
结构越靠下的层级越大 越向前展示 只有彻底脱标的定位才会去设置层级
z-index 没有定位的盒子不去讨论层级 层级值默认为0值
z-index可以为负 要有相应的未脱标的参照盒
腾讯登录案例
固定定位 + 层级 + 居中
盒子水平和垂直居中
前提: 必须清楚当前盒子的宽高值
position:absolute/fixed;
left:50%;
top:50%;
margin-top:-height/2;
margin-left:-width/2;
定位对元素显示模式的影响(BFC)
块级+定位(脱标)—>行内块样子 (允许并排)
行内+定位(脱标)—》行内块样子 (设置宽高，上下外边距，行高)
span {
position:absolute;
left:0px;
top:100px;
width:100px;
height:100px;
//display:inline-block; 不用加
}
浮动和定位的区别
浮动：脱离标准流 不脱离文本流(图文环绕) 浮动盒子会覆盖伪浮动的盒子但是不会覆盖他的文本部分
定位: 脱离标准流 也脱离文本流
溢出处理
overflow:hidden 隐藏/scroll显示滚动条/auto如果溢出则显示滚动条 不溢出则不显示滚动条/visible可见的(默认值)
overflow-x:scroll/hidden/auto;
overflow-y:scroll/hidden/auto
显示和隐藏
隐藏不保留原来位置
display:block 显示/none 隐藏
隐藏保留原来的位置
visibility:visible可见显示/hidden隐藏
一.常见的浏览器解析问题
浏览器兼容处理—》浏览器表现的一致性(IE浏览器)
1. 图片下间隙问题
现象：图片和包裹图片的盒子的底边框有一定的距离 大约3px
解决:
**方法1：**修改图片对齐方式为不是基线对齐即可(top,middle,bottom) vertical-align
方法2: f父盒子加font-size:0px; line-height:0px;
**方法3：**将图片转换为块类型元素
2. 输入框和提交按钮对不齐现象
对不齐的原因：文本框的内边距和边框不算在盒子的宽高内 而按钮的内边距和边框默认算在盒子的宽高内
解决:给按钮和文本框清除边框和内边距 在加上自己的边框 然后文本框做宽高内减 按钮不用内减
二：透明度设置(IE浏览器透明度的解决)
1. 背景透明 内容不透明
background-color:rgba(); alpha 透明度 0-1
2. 背景透明+ 内容透明
opacity:0-1 透明度
IE8及其以下不支持rgba(),opacity (因为这两个属性是新增的属性 出生在IE8出生之后)
IE专属的透明度设置
filter:Alpha(opacity=30); ?透明度值 是0-100的值 30 === 0.3
能实现背景和内容一起透明
IE下实现背景透明 内容不透明
因为IE默认透明度会向下传递 所以阻断透明度的传递
- 给你的内容单独套一个盒子
- 给单独加的这个盒子设置相对定位 父盒子设置静态定位
三.圆角边框属性
作用：给盒子的角设置弧度
border-radius:10px/%; //四个角都是10px弧度
border-radius:10px 20px;// 10px 左上角和右下角的弧度值 20px 右上角和左下角
border-radius:10px 20px 30px; 10px 左上角 20px 右上角和左下角 30px 右下角
border-radius:10px 20px 30px 40px ; 顺时针 左上 右上 右下 左下
border-radius:30px/50px; 30px水平方向切线的距离 50px垂直方向切线距离
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
变圆。变椭圆
border-radius:50%;
四：经典布局
自适应:随着浏览器窗口宽度大小自己调整宽度的盒子就叫自适应盒子(相对关系%)
1. 两列自适应布局
原理: 两个盒子 左列的盒子固定宽度（px），右列盒子宽度自适应(%)
实际案例:biliB站的创作中心
<style>
* {
padding: 0;
margin: 0;
}
.left {
/* 固定宽度 */
width:200px;
height: 400px;
background-color: hotpink;
/* 脱标 盖住不脱标盒子 */
float: left;
/* 定位和浮动 */
}
/* 自适应 100%---> 左列盖在右列身上 */
.right {
width: 100%;
height: 400px;
background-color: olive;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
wqgdewquydewyd efchewvcv ewdw
</div>
</body>
</html>
2. 三列自适应布局
原理: 三列 左中右 左右两列固宽 中列100% (不通过绝对定位 就通过浮动和相对定位和外边距实现稳定的布局)
圣杯布局
(1)中间100%宽度的盒子一定要写在结构的最上面
(2) 三列浮动，左列利用外边距向左移动100%的宽度，右列利用外边距向左移动自身的宽度
(3) 中列内容居中 给左外侧大盒子设置左右两侧内边距
(4)左右两列在利用相对定位移动(left right)
双飞翼布局
(1)中间100%宽度的盒子一定要写在结构的最上面
(2) 三列浮动，左列利用外边距向左移动100%的宽度，右列利用外边距向左移动自身的宽度
(3)给中列的盒子内在套一个盒子 这个盒子去装内容 然后给这个盒子设置左右两侧外边距
3. 等高布局
伪等高-内外边距相消
原理: 父盒子高度取决于最高列高度
给每一列设置很大的下内边距，保证视觉上是等高(内边距可以添加背景色)
在给每一列设置一样的负外边距值 把内边距抵消掉 保证盒模型没变(外边距只会抵消内边距的值 但是不会抵消背景色) 最外侧的父盒子要溢出隐藏 把盒子外的背景颜色切掉
day09
真等高(背景等高法)
<style>
* {
padding: 0;
margin: 0;
}
.blue {
width:100%;
background-color: blue;
/* 溢出处理 */
overflow: hidden;
}
.purple{
width:100%;
background-color: purple;
/* 1 向左移动第三列宽度 */
margin-left: -30%;
}
.black {
width:100%;
background-color: #000;
/* 2.向左移动第二列列宽 */
margin-left: -40%;
}
.col {
float: left;
font-size: 50px;
color: #fff;
}
.col1 {
width:30%;
height: 300px;
/* 5 */
position: relative;
left:70%;
}
.col2 {
width:40%;
height: 400px;
/* 4 */
position: relative;
left:70%;
}
.col3 {
width:30%;
height: 500px;
/* 3. 向右移动第3列和第2列列宽 */
position: relative;
left:70%;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- black==purple==blue 等高 想把法让一个盒子套一个列 -->
<div class="blue">
<div class="purple">
<div class="black clearfix">
<div class="col col1">1</div>
<div class="col col2">2</div>
<div class="col col3">3</div>
</div>
</div>
</div>
</body>
</html>
CSS精灵图(雪碧图)
css sprites
图片拼合技术 (多个小图片拼在一张大图)
**原理:**利用背景图background-image的方式引入精灵图，在通过背景定位background-position的属性实现特定图片显示在固定大小的盒子里
优点:
- 减少网络请求，提高网站的加载速度
- 减少命名
- 方便统一替换风格
缺点:
测量 有可能图片显示不出来
css小箭头
两个三角形定位实现箭头
<style>
/* 一个三角形 */
.arrow::before {
content: '';
position: absolute;
left:50px;
top:0px;
width: 0;
height: 0;
border-width:5px 0px 5px 5px;
border-style: solid;
border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) red;
}
/* 另外一个三角形 */
.arrow::after {
content: '';
position: absolute;
left:48px;
top:0px;
width: 0;
height: 0;
border-width:5px 0px 5px 5px;
border-style: solid;
border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff;
}
.arrow {
position: relative;
}
</style>
</head>
<body>
<a href="">更多
<i class="arrow"></i>
</a>
</body>
</html>
盒子阴影
盒子外侧和内侧加阴影
box-shadow: 水平阴影尺寸 垂直阴影尺寸 阴影的模糊距离 阴影的尺寸 颜色 内外侧阴影;
水平阴影尺寸：左右 + 右 -左
垂直阴影尺寸:上下 + 下 -上
阴影的模糊距离 10px
内侧 inset 外侧阴影 :什么都不用写 默认就是外侧阴影
box-shadow: 0px 0px 15px 0px rgba(0,0,0,.2) inset;
文字阴影
文字的上侧下侧左侧右侧加阴影
text-shadow: 水平阴影尺寸 垂直阴影尺寸 阴影的模糊距离 颜色 ;
text-sahdow:水平+垂直,水平+上下;
text-shadow: -1px -1px 1px red,1px 1px 1px yellow;
网易云导航
- 内容撑开小盒子 padding
- a元素从行内转行内块 (盒子效果)
微信滑动门技术
一类导航盒子插入背景图的技术 ，插入的背景图随着盒子的内容要发生大小变化
结论:
你需要两个盒子去装背景图 a > span
a盒子铺背景图的左侧 0% 0%
span盒子铺背景图的右侧 100% 0%
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
.wx-contanier {
width:100%;
height: 620px;
background-image: url(./image/wxnav.jpg);
background-repeat: repeat-x;
}
.wx-nav {
width:100%;
height: 72px;
}
.nav-list {
margin-left: 200px;
overflow: hidden;
}
.nav-list li {
float: left;
margin-left: 30px;
line-height: 72px;
}
.nav-list li a {
font-size: 14px;
color:#fff;
display: inline-block;
line-height: 33px;
padding-left: 20px;
}
.nav-list li a span{
display: inline-block;
line-height: 33px;
padding-right: 20px;
}
/* a铺左侧半圆 撑开左内边距 以左上角去铺0% 0%
span铺右侧半圆 撑开右内边距 以右上角去铺100% 0%
*/
.first a,.first a span {
background-image: url(./image/lTcb_ve.png);
}
.first a {
padding-left: 20px;
background-position: 0px 0px;
}
.first a span {
padding-right: 20px;
background-position: 100% 0%;
}
.nav-list li a:hover {
background-image: url(./image/lTcb_ve.png);
background-position: 0px 0px;
}
.nav-list li a:hover span {
background-image: url(./image/lTcb_ve.png);
background-position: 100% 0%;
}
</style>
</head>
<body>
<div class="wx-contanier">
<div class="wx-nav">
<ul class="nav-list">
<li class="first"><a href=""><span>首页</span></a></li>
<li><a href=""><span>帮助与反馈</span></a></li>
<li><a href=""><span>公众平台</span></a></li>
<li><a href=""><span>微信网页版</span></a></li>
<li><a href=""><span>表情开放平台</span></a></li>
</ul>
</div>
</div>
</body>
</html>
BFC规则（了解）
是什么？ BFC(Block Formatting Context)块级格式化上下文
其实就是个块类型的渲染区 (包含块)
怎样触发BFC?
- float不为none
- position为绝对和固定的时候
- overflow:不为visible
- display:inline-block
BFC的规则?
- 同属于同一个BFC区域的盒子在垂直方向上会出现外边距塌陷现象
- 在一个BFC区域 块级元素是从上到下放置的
- 块级元素左外边距和包含块的左边界相接触 即使浮动元素也如此
- BFC区域不会与浮动区域重叠
5.计算BFC高度时，浮动子元素也参与计算
- BFC是页面的一个隔离独立区域，里面的布局不影响外面，外面的布局不影响里面
BFC解决的问题(掌握)
-
解决垂直方向上的外边距塌陷
把父盒子触发成为BFC盒子即可 (私有渲染区域 ，外部不影响内部，内部不影响外部)
-
浮动子元素默认是不参与高度计算的—》父盒子高度塌陷 —》利用规则第5条
给父盒子overflow:hidden触发成为BFC盒子
-
BFC区域不会与浮动区域重叠—>图文环绕 两列自适应
-
ss )
day10
文本溢出处理
overflow:hidden/auto/scroll/visible;
text-overflow:clip切掉/ellipsis省略号
单行文本溢出（记）
div {
width: 200px;
border:1px solid #888;
/* 文本强制在一行显示 不换行 */
white-space:nowrap ;
/* 盒子溢出 */
overflow: hidden;
/* 文本溢出 */
text-overflow: ellipsis;
}
多行文本溢出(不记，查文档)
方法1：只适用于-webkit-内核的浏览器
缺点：兼容性比较差
.dv2 {
width:200px;
/* 盒子溢出 */
overflow: hidden;
/* 文本溢出 */
text-overflow: ellipsis;
/* 声明伸缩盒 你就可以控制盒子内部文字的显示行数和方向*/
display:-webkit-box;
/* 显示2行溢出 */
-webkit-line-clamp:2 ;
/* 文字一行一行垂直显示 */
-webkit-box-orient:vertical ;
}
方法2：
伪元素的方法给文字盒子末尾+…
.dv3 {
position: relative;
width: 200px;
/* 盒子固定高度 */
height: 60px;
/* 行高和高度呈现倍数关系 */
line-height: 30px;
border:1px solid #888;
overflow: hidden;
}
.dv3::after {
position: absolute;
right:0;
bottom: 0;
content: '...';
padding-left: 8px; //不是定值 自己去调整
/* 透明色到白色的渐变 白色在左侧 */
background: linear-gradient(to left,transparent,#fff 31%);//不是定值 自己去调整
}
2. 代码规范
1.html嵌套规则
块能嵌套行内块和块和行内 行内只能嵌套少的文字和小的图标、图片
ul,ol直接子代li dl>dt+dd
p默认就是放一行或多行文字
跳转的时候要套a元素 a盒子的大小
谨慎使用h系列 建议h3以下不要用 每个界面有且只有一个h1
logo h1>a+文字
2.css书写规则
div {
布局的属性; display,overflow,float,position,margin,padding
自身属性; width,height,bgc,border
文本属性; line-,text-,color,list-,font-
其他属性;cursor,z-index,resize,vertical-align,box-shadow
}
3. 文件命名规范和图片命名规范
文件名:小写字母 单词的拼接_
图片命名: 大类性质_模块.图片类型即可 banner_lb1.jpg title_aside1.png
3. 网站三剑客TDK
<title>xiaoU(xiaoU.COM)-小U,真的好！</title>
<!-- 网站描述 -->
<meta name="description" content="xiaoU-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<!-- 关键字 -->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,xiaoU">
4. 网站的小图标引入
<link href="" rel=""> rel：文件类型 href:地址
<!-- 链接网站图标 -->
<link rel="shortcut icon" href="./favicon.ico">
5. 写代码
-
写公共的样式文件
(清除浏览器默认设置 自己写的reset.css 现成库 normalize.css )
(多张界面相同的部分 common.css 或者 header.css、footer.css )
6.字体图标
本质是一个字
阿里巴巴矢量图标库 iconfont.com
引入单色图标方式
Unicode
<style>
/* 字体图标 在你的计算机里很显然没有支持这些文字显示的文件 font-face网络字体文件路径的声明 */
@font-face {
/* 修改路径 */
font-family: 'iconfont';
src: url('./xiaoU/assets/font/iconfont.eot');
src: url('./xiaoU/assets/font/iconfont.eot?#iefix') format('embedded-opentype'),
url('./xiaoU/assets/font/iconfont.woff2') format('woff2'),
url('./xiaoU/assets/font/iconfont.woff') format('woff'),
url('./xiaoU/assets/font/iconfont.ttf') format('truetype'),
url('./xiaoU/assets/font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fdj {
font-size: 30px;
color:red;
}
</style>
</head>
<body>
<!-- iconfont全局类 -->
<i class="iconfont fdj" ></i>
</body>
</html>
缺点：容易写错
优点：兼容性比较好 ie6+
font Class
<head>
<!-- 1.字体图标样式文件 -->
<link rel="stylesheet" href="./assets/font/iconfont.css">
</head>
<body>
<i class="iconfont icon-qian"></i>
</body>
</html>
优点;简单
缺点:兼容性比较差 ie8+
8、IE低版本兼容性问题(ie6,ie7,ie8)
处理兼容性:写代码让浏览器表现一致(灵活)
IETester
双击.exe执行文件 —》 I agree —-> Language那里把单选框取消 到下面去找一个Simplified Chinese勾选 —》 切换路径盘符(尽量不要安装到C盘)
1.伪元素问题
div:after,div:before {}
2.图片类型 webp ie8下不识别webp a.jpg_webp
3.ie8下图片边框
<a>
<img src=""> 自动加上一个蓝色边框
</a>
解决办法:
img {
border:none; //取消ie8及其以下的图片边框
vertical-align:middle;// 取消图片下间隙
}
4.ie6下小高度盒子的问题
原因： ie6会有一个默认的行高 12px 把盒子撑起来
解决方法:
div {
height: 2px;
width:400px;
background-color: red;
font-size:0;
line-height:0;
overflow:hidden;
}
5.ie6下浮动双double边距问题
解决办法:
<style>
* {
padding: 0;
margin: 0;
}
.a {
float: left;
margin-left: 50px;
width: 200px;
height: 200px;
background-color: palegreen;
/* 解决: 变成是行内的类型 只针对ie6 不针对其他版本浏览器
ie6 只让ie6识别 _属性名:属性值; css属性hack
*/
_display: inline;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
</body>
</html>
6.ie7下子元素相对定位父盒子overflow:hidden/auto失效的问题
<style>
.father {
position: relative; //解决办法 给父元素也加相对定位
overflow: hidden;
width: 300px;
height: 300px;
background-color: red;
}
.son {
position: relative;
left:150px;
top:150px;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
cssHack(只针对ie)
hack:解决兼容性问题
1.条件hack
控制某几个ie浏览器版本特定识别某一个结构标签或者是css类
<!--[if IE 7]>
<p>ie6显示 其余版本不显示</p>
<![endif]-->
关系:
IE 6 选择ie6
gt IE 6 选择大于ie6版本的ie浏览器
lt IE 6 选择小于ie6版本的ie浏览器
gte IE 6 选择大于等于ie6版本的ie浏览器
lte IE 6 选择小于等于ie6版本的ie浏览器
! IE 6 选择不是ie6浏览器
2.css属性hack
设置在属性身上的特定标识 让特定的浏览器去识别
ie6及其以下 _属性名 :属性值;
ie7及其以下 *属性名:属性值; *vertical-align:top;
ie8,ie9 属性名:属性值\0; background-color:red\0;
3.选择符级hack
ie6及其以下: * html
* html .a {
background-color:red;
}
ie7及其以下 * + html
* + html .a {
background-color:yellow;
}
css hack有害作用，尽量不要用 ie10已经把hack废除
注意:
- 滑动门必须由两个盒子去装文字 a>span>文字
- a套背景图的左上角(0% 0%) span套背景图的右上角 (100% 0)
做完的效果是:
如果没办法用精灵图做背景位置的切换，那就把精灵图上的小图先拿ps选出来保存成.png格式
用单独的图去铺背景 如果这个图是渐变图 那最好还是写渐变属性实现
一：h5新增布局标签
div 大容器 span小区域
h4的布局标签不具备语义化的 h5新增一些布局的语义化标签—》既可以做布局 又可以有利于搜索引擎优化
header标签
作用:网页的最上面 有搜索框和logo的那个部分
aside侧边栏
<aside></aside>
作用:侧边的列表区
article 文章区域
作用：描述网页上的一个独立 互不干扰的区域 通常是一个文章的不同章 或者是评论区
section 文章的某一章的某一小节
作用： 描述article里的平行关系的小区域 属于article的一部分
<article>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
nav导航标签(主导航)
<nav></nav>
footer底部
<footer></footer>
语义化标签兼容性处理
ie8及其以下的ie浏览器不支持新增语义化布局标签的
解决：让它支持
方法1： 用js去创建标签
document.createElement('标签名');
document.createElement('header');
document.createElement('nav');
......
header,nav,footer,aside,section,article {
display: block;
}
但是,js创建出来的标签默认都是行内类型 你需要先转换为块类型
方法2：前辈写好库 html5shiv.js
<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
其他标签
1.figure
作用：就是装图片+ 文字的盒子
取代 div>a>img+p figure>a>img+p
figcaption figure标签的标题
<figure>
<figcaption>标题</figcaption>
<a>
<img>
<p></p>
</a>
</figure>
2.mark 标签
高亮 ====
3.time标签
用于显示一个时间
2019-03-28 10:20:35 一般就是拿span去装时间 现在你可以用time标签
现在时间是: <time datetime="2000-03-20 8:00">我的生日</time>
三:新增的多媒体标签
音频audio
<audio src="引入的音频的地址" controls >
</audio>
属性：
src:音频地址
controls:控制是否显示播放控件
muted 静音属性
autoplay 自动播放属性 (加载成功会自动播放 但是你得设置浏览器自动播放)
audio支持文件的类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dYPMBTN8-1611110109072)(E:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/%E4%B8%AD%E5%85%AC/%E6%95%99%E5%AD%A6%E6%96%87%E4%BB%B6/HTML/day14/%E7%AC%94%E8%AE%B0/media/audio.png)]
a.mp3 a.ogg a.wav
<audio controls>
<source src="a.mp3">
<source src="a.ogg">
<source src="a.wav">
</audio>
浏览器找第一个可以识别的类型去播放
视频标签 video
https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7cdabcaa763392c86b944eaf4e68d6a3.mp4
<video src="视频地址" controls>
</video>
<video controls>
<source src="a.ogg">
<source src="a.mpeg4">
<source src="a.webm">
</video>
属性:
width: 宽度
height:高度
src:
controls:
autoplay:
muted静音
poster:视频封面 插入图片 gif 默认就是视频的第一帧
四：h5新增的表单元素
form > input (type类型: text ,password ,radio,checkbox,file,button,submit,reset) select>option,textarea
新增:
type:
1.tel 电话号 tel类型并没有提供任何手机号验证
作用: 在移动端打开数字键盘
2.email邮箱
作用：邮箱验证 在移动端打开邮箱键盘
3.number
数值选择盒子 自己填入 点击上下的三角形进行数值的增减 (步长默认为1)
**作用:**打开纯的数字键盘
属性:
```html
min:最小值 max:最大值 step :步长
min,max在提交按钮有相应的提示 小于等于max 大于等于min
4.type=“url” 网址类型
作用: 网址验证 .com 打开一个网址的键盘 http: https:
5.type=“search”
**作用:**用于搜索框 提高用户体验
6. type=“color”
**作用：**提供可以选择颜色的插件
7.type=“date”
**作用:**供用户选择一个年月日的时间(不能输入)
8.type=“datetime”
**作用:**供用户输入和选择一个时间
datetime谷歌浏览器不支持这个类型 Safari支持
9.time 小时分钟 week周 month月份
-
range
**作用:**提供一个带有区间的数值 一般用在饮水量
表单新增标签
<!-- 表单 表单的标题 legend和表单的默认外框 fieldset -->
<form action="">
<fieldset>
<legend>学生信息表</legend>
姓名: <input type="text"><br><br>
密码: <input type="password">
<input type="submit">
</fieldset>
</form>
h5的下拉列表
所属学院:
<!-- h5的下拉列表必须要配合输入框 因为h5的下拉列表既可以选择又可以进行输入 -->
<input type="text" list="major">
<datalist name="major" id="major">
<option value="移动通信">
<option value="计算机技术">
<option value="音乐舞蹈学院">
</datalist>
五：h5表单新增的属性
1.placeholder：用于设置输入框的文字提示(实现js很多行代码的功能)
2.autofocus : 界面加载完成自动聚焦
注意:一个界面的表单控件里有且只有一个autofocus
3.autocomplete：自动的历史输入提示功能
autocomplete="on/off"
off默认值 关闭默认提示功能
on 开启默认提示功能
4.required：必填项 如果用户不填此属性 阻断表单提交并且提示用户
5.disabled: 禁用项
6.abled: 未禁用项
7.pattern 提供一个用于验证的模式字符串
验证：用户的输入是否合理（生活当中的一些规则去写一个模式字符串）
pattern=“模式字符串” 你哪value和pattern里面的模式字符串做对比 一致合理 不一致不合理—》阻断提交 然后提示
邮箱模式字符串 字符@字符.com
手机的字符串 11位数字(第一位是1 第二位3,5,8,9,第三位到第11位全部是数字)
密码： 3-6位数字 ===> \d{3,6} or [0-9]{3,6} 10-14的数字字母+_
8.readonly :输入框只能读不能写
9.mutiple :用在文件上传 选择多个文件进行上传
10.form 绑定表单元素
<form id="form1">
</form>
<input type="reset" form="form1">
功能：就是把没有在表单域里的表单控件和某一个id值为xxx的表单绑定在一起
六：浏览器私有前缀
私有前缀：各个浏览器可以单独识别的css属性的标识
-webkit-border-radius:10px;//谷歌浏览器可以识别并且解析
-moz-border-radius:10px;//火狐浏览器可以识别
认识:
| 内核 | 私有前缀 |
|---|---|
| Webkit | -webkit- |
| Presto | -o- |
| Gecko | -moz- |
| Trident | -ms- |
作用:为了让低版本浏览器提前支持没有被纳入标准的新增css3属性
低版本浏览器 产生---》css3新增的属性才被标准化
-webkit-box-shadow:0px 0px 10px 0px red;
-moz-box-shadow:0px 0px 10px 0px red;
-ms-box-shadow:0px 0px 10px 0px red;
-o-box-shadow:0px 0px 10px 0px red;
box-shadow:0px 0px 10px 0px red;//标准属性 w3c 高版本浏览器
一：修改表单元素默认样式
复选框举例子:把原有的样式透明度opacity属性设置为0 然后把自己想要的样式覆盖在原有的复选框身上
input:checked + label {}
<style>
form {
width:300px;
margin: 50px auto;
}
label {
width: 15px;
height: 15px;
display: inline-block;
border:1px solid #000;
margin-left: -23px;
}
form input {
opacity: 0;
}
/* 新增 表单元素选择器 input:checked {} */
/* 选择复选框 input:checked {} */
input:checked + label {
background-color: red;
}
</style>
</head>
<body>
<form action="">
<!-- 点击label 就相当于点击CheckBox label做成是正方形的样式 盖在复选框身上-->
<input type="checkbox" id="week" >
<label for="week"></label>
<span>星期一</span>
</form>
二：css3属性的私有前缀
-webkit- , -ms-, -moz-,-o-
为了就是让低版本浏览器去提前支持新增的但是未被纳入标准的css属性
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px; //标准属性
autoprefixer 自动生成私有前缀的插件
在vscode扩展里下载 autoprefixer 安装 你就可以在css文件里自动插入私有前缀 ctrl+shift+p 搜索autopre… 点击此插件 就可以自动加上前缀
三.css3新增选择器
1.结构伪类选择器
child类型
E:first-child {} 匹配的是E元素的父元素里的第一个子元素(条件:这个元素必须是E类型)
E:nth-child(n) {} 取值n>=0 n++ 一直匹配到此E元素的所有满足条件的子代都被挑选上为止
n其实可以写一写表达式
E:nth-child(n+3) {}
E:nth-child(2n) {} 匹配偶数项
E:nth-child(even) {}匹配偶数项
E:nth-child(2n+1){} 匹配奇数项
E:nth-child(odd){} 匹配奇数项
E:nth-last-child(n){} 从最后一个子元素开始匹配
E:last-child{} 匹配的就是E的父元素的第最后一个子元素(这个子元素必须是E类型)
挑选的是列表当中的前5项 和 后3项
前5项: 10个数据 5,4,3,2,1,0 -n+5
后3项: 10个数据 8 9 10 n+8
20个数据 18 19 20 总数据个数-你想要挑的项数+1+n
35个数据 33 34 35 35-3+1+n
/* 前三项 */
ul li:nth-child(-n+3) {
background-color: yellow;
}
/* 后5项 */
ul li:nth-child(n+6) {
background-color: deeppink;
}
总结：child系列更适合放在html结构单一时使用
type类型
E:first-of-type {} 匹配的是E元素的父元素的子元素当中为E类型的第一个
E:nth-of-type(n) {} t同上
E:last-of-type {} 从最后一个开始匹配
E:nth-last-of-type(){}
总结：child系列更适合放在html结构复杂时使用(过滤)
2.表单选择器
| 表单选择器名称 | 功能 |
|---|---|
| input:checked {} | 匹配的是当前被勾选的单选框或者复选框元素 |
| input:focus {} | 匹配的是当前被聚焦的输入框 |
| input:disabled {} | 匹配的是当前被禁用的元素 |
| input:enabled {} | 匹配的是目前未被禁用的元素 |
3.属性选择器
5个基本的属性选择器 []
1. 通过属性名选择器
[属性名字] {} 匹配的是拥有这个属性的元素
[class] { }
[id] { }
[a] { } a自定义属性
2.属性名和属性值去选择元素
[属性名="属性值"] {}
3. 属性名，属性值，^
^ 以什么字符开头
[属性名^="xxx"] 匹配的是拥有此属性的，并且属性值以xxx开头的元素
不要给属性值后面或者选择器里加上空格 因为空格也是字符
4.属性名，属性值，*
[属性名*="xxx"] 匹配的是拥有此属性的并且属性值里包含xxx这些字符的元素
5.属性名,属性值,$
[属性名$="xxx"] 匹配的是拥有此属性的并且属性值以xxx结尾的元素
使用场合:
一张精灵图里的不同小图片，相同类型的字体小图标，小图片
4.其他选择器
1. 文本选择选择器
E::selection {} 实现鼠标选中文本给文本加样式(加一些不能改变布局的属性)
2.首字母选择器
E:first-letter {} 会匹配这个文字的首字母
3.首行选择器
p::first-line {}
4. :target
匹配的是当前被激活选中的锚点
5.:not() 非xxx 不是xxx
.a :not(p) {}
audio:not([controls]){}
三：css3新增的背景属性
1.background-size: px px / % % / cover /contain
作用：调整背景图的大小尺寸 (宽度，高度)
**cover特点:**会铺满但是会不完整显示
contain特点:会完整显示但是不保证铺满
2.多背景属性
background:url() no-repeat 0px 0px ,url() no-repeat -100px -20px,...;
3.属性初始放置区域
放在盒模型的哪一个部分
background-orign:border-box/content-box/padding-box(以内边距开始的位置去铺)
4.背景裁剪属性
设置溢出哪个区域的图片要切掉
background-clip:border-box/content-box/padding-box;
5.背景渐变属性(相当于插入背景图)
线性渐变
background-image:linear-gradient(方向,颜色1 停止位置,颜色2 停止位置);
方向： 度数 or left ,right ,top ,bottom
重复线性渐变
background-image: repeating-linear-gradient(90deg,red 50% ,yellow 80%);
径向渐变
background-image:radial-gradient(形状 大小 位置，颜色);
形状：circle/ellipse 正方形盒子时ellipse也是圆形的 只有在长方形盒子时ellipse才是椭圆形状
大小: 最近边 closest-side 最远边 farthest-side 最近角 closest-corner 最远角 farthest-corner(默认值)
位置：渐变中心的位置 at px px / at % %
颜色：写多个颜色和停止位置
四：新盒模型
传统盒模型宽度 = width + padding-left +padding-right + border-left + border-right + margin-left + margin-right
传统盒模型问题在内边距和边框会撑大可视区域，必须得做一个内减计算 calc() 口算
新盒模型完全不需要内减计算 (更有利于%自动内减)
新盒模型宽度=width(包含了有效内容区+ 内边距+边框)
设置两个盒模型
box-sizing:border-box(新盒模型) / content-box（默认传统盒模型）;
缺点：css3新增的属性 兼容性问题 加私有前缀
五：css3文本多列布局
column-width:列宽度
column-count:列个数
column-gap:列间距
column-rule:列边框的设置 1px solid red
自己设置的列宽如果大于默认列宽，以列宽为主，修改列数，自己设置的列宽小于默认列宽，以列数的设置为主
css3动画
1.过渡动画
两个状态之间的动画的描述(最初，最终)
transition:要过渡的属性 持续的时间s 延时时间s 运动的曲线 ;
要过渡属性: 必须是可以计算出具体值的属性 width,height,opacity
比如display:none/block就叫做没有具体值的属性 是不能过渡
持续时间 2s
运动曲线: linear匀速 ease 放缓(默认值) ease-in 逐渐增加 ease-in-out 慢--快--慢
多属性过渡
transition: all 1s; all让浏览器自己去看哪些属性发生了值的变化 都会做过渡
还可以写:
transition: border-radius 2s , opacity 2s , width 3s; 要做过渡的属性以,隔开即可
2.变形动画transform
2d： x y
平移
transform:translate(x,y); px /% 水平 +X 向右 -x向左 垂直 +y 向下 -y向上
px: (30px ,50px) 30px 代表水平向右走了30px 50px 代表的是 垂直向下走了50px
% :(50%,50%) 向右走自身宽度的50% 垂直向下走自身高度的50%
(-50%,-50%)
盒子水平和垂直的居中
方法1:
div {
position:absolute;
left:50%;
top:50%;
margin-top:-height/2; //前提:必须知道盒子的宽度和高度
margin-left:-width/2;
}
方法2：
div {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto ;//前提:必须知道盒子的宽度和高度
width: 100px;
height: 100px;
background-color: yellowgreen;
}
方法3：这个方法好在不需要知道盒子的具体宽高
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: yellowgreen;
旋转rotate
transform:rotate(ndeg); deg度数 +deg 顺时针 -deg逆时针
缩放scale
transform:scale(width,height); 数值 》=0数 >1放大 <1缩小 =1 不放大不缩小
transform:scale(1.2) 代表的是宽度和高度同时放大到原来的1.2倍
显示小于12px的字体
fs:10px 不显示 —》缩小盒子 达到字体变小的效果
.fs {
font-size: 12px;
margin-left: 100px;
/* 缩放实现小字体 */
transform: scale(0.8);
}
<div class="fs">变小</div>
倾斜skew
transform:skew(x,y); x水平倾斜 度数 y垂直倾斜 度数 + 当前坐标轴的反方向 - 当前坐标轴的正方向
transform:skew(x); 只有一个参数时代表水平倾斜
3d： xyz
左手定则 手腕向下压 中指朝向自己
平移
transform:translate3d(x,y,z);
transform:translateX(px/%); 在X轴平移 + 正方向 -反方向
transform:translateY(px/%); 在Y轴平移 + 正方向 -反方向
transform:translateZ(px/%); 在Z轴平移 + 正方向 -反方向
景深属性 perspective
该属性可以设置你的眼睛到变形物体的距离(默认是0px) 才可以产生近大远小的效果 (3d效果)
perspective:npx 值越大距离眼睛就越远 越小 -npx 到你的脑袋后面
通常加在变形元素的父元素身上
变形中心
transform-origin:center center ; 默认在元素的中心 30px 60px /right center left top bottom /100% 0%
旋转
三根轴 + 角度
transform:rotate3d(x,y,z,角度);
x,y,z 向量值( 方向+- 大小) 角度
transform:rotate3d(1,0,0,45deg); 在X轴的正方向有旋转 度数为45deg
transform:rotate3d(0,1,0,45deg);
transform:rotate3d(0,0,1,45deg);
transform:rotate3d(1,1,0,45deg); 在X轴和Y轴围城的平面对角线有旋转 度数为45deg
transform:rotate3d(1,1,1,45deg); 在X轴和Y轴和Z轴围城的体对角线有旋转 度数为45deg
左手定则2 判断度数的正负
案例:立方体
原理：把6个面通过平移和旋转摆放成一个立方体即可(保持3d空间感，景深属性)
保留3d效果属性
transform-style:flat (2d效果默认值)/ preserve-3d (保留3d变形的最终状态)
通常设置到父元素身上
多个变形同时进行就写在一个transform属性里 以空格隔开即可
3.补间动画(关键帧)
多个状态动画的描述
1.定义动画 @keyframes
@keyframes 动画名字 {
}
两个状态 from... to...
多个状态 0% {} 20% {} 50% 70% {} 100% {} 无数
2.使用动画
animation: 动画名称 持续的时间 延时的时间 运动曲线 次数 往返的方向 最初和最终的状态 动画的运行和停止；
动画名称 animation-name:
持续的时间 animation-duration: 1s
延时的时间 animation-delay:1s
运动曲线 animation-timing-function :linear,ease,ease-in ,ease-in-out
次数 animation-iteration-count:n/infinite无限次 默认是一次
往返的方向animation-direction : normal默认值/alternate 往返
最初和最终的状态(最终动画结尾保留初始还是结束状态)animation-fill-mode:forwards(最终)/backwards(最初)
动画的运行和停止；animation-play-state:running/paused
移动端布局(新的布局方式)
1.弹性盒布局(伸缩布局 flex布局)
作用：这些特定属性可以将父盒子内部的子元素排列(水平，垂直)成规定好的常见布局(新式 兼容性:ie10以及+)
只要使用弹性盒布局，那么传统布局中的float,clear,vertical-align就没有用了
I、加在弹性父盒子身上的属性
display:flex;
此盒子就变成弹性盒 其子元素就是弹性子项 你就可以通过特定属性排列他们
弹性父盒子：默认是主轴方向是水平方向，默认排列方式左对齐方式
2.调整主轴方向上的排列方式属性
justify-content:flex-start/flex-end/center/space-between/space-around;
flex-start:主轴的起始端对齐排列(默认)
flex-end:主轴的末尾端对齐排列
center 居中对齐
space-between:两端对齐，中间间距均分
space-around:两端盒子的间距是中间盒子间距的一半
3.调整主轴方向
flex-direction:row水平(默认)/column垂直/row-reverse水平反向/column-reverse垂直反向;
4. 调整交叉轴的对齐方式align-items
align-items:flex-start/flex-end/center/baseline/stretch
flex-start:交叉轴起始端排列(默认)
flex-end:交叉轴末尾排列
center 居中
baseline 以弹性盒的基线为准对齐
stretch 延伸对齐 当子项没有高度时 达到高度适配父盒子效果
5.换行属性 flex-wrap
当子项的宽度和大于弹性父盒子的宽度时需要换行(默认是不换行自动分配子项宽度)
flex-wrap:nowrap(不换行)/wrap（换行）/wrap-revserse（侧轴方向上行的属性反向）
6.复合属性 flex-flow:
flex-flow:flex-direction flex-wrap ;
flex-flow:row wrap;
II、加在弹性子项上的属性
1.flex
设置子项占据弹性父盒子的空间占比属性
flex:n; n 代表此子项占据父盒子的空间比例 n=0 时 子项宽度取决于内容
flex:flex-grow flex-shrink flex-basis
flex-basis:auto ; 子项自身设置的宽度或者是由内容撑开的宽度
flex-grow:0;默认值为0 子项占据弹性父盒子的剩余空间的比例(弹性父盒子宽度>子项宽度和时)
flex-shrink:默认值为1 子项占据弹性父盒子的溢出空间的比例(弹性父盒子宽度<子项宽度和时)
flex:n 代表 flex-grow:n
flex:0 1 auto 代表的是flex-shrink：1
2.order
设置弹性子项的排列顺序
order:n;
3.align-self
设置子项自己在交叉轴上的一个排列方式
align-self:flex-start/flex-end/center/baseline/stretch;
移动端盒子布局
大屏PC端: >1200px
中屏设备:992px-1200px
小屏设备:768px-992px
超小屏设备:320px-540px
<style>
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.m-container {
/* 手机端屏幕区间 */
min-width:320px;
max-width: 540px;
height: auto;
}
.bottom-tab {
position: fixed;
left:0px;
bottom:0px;
min-width:320px;
max-width: 540px;
width:100%;
height: 60px;
background-color: #ffb121;
/* 弹性盒 */
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.item {
height: 60px;
/* flex:1 1 auto */
flex:1;
border-right: 1px solid #fff;
}
a {
text-decoration: none;
color: #424242;
font-size: 14px;
}
.item a {
display: flex;
width:100%;
height: 100%;
flex-direction: column;
justify-content:center ;
align-items: center;
}
</style>
</head>
<body>
<div class="m-container">
<!-- 头部 -->
<!-- 底部 固定定位 -->
<div class="bottom-tab">
<div class="item">
<a href="">
<img src="./image/hz01.png" alt="">
<p>电话预定</p>
</a>
</div>
<div class="item">
<a href="">
<img src="./image/hz01.png" alt="">
<p>下载客户端</p>
</a>
</div>
<div class="item">
<a href="">
<img src="./image/hz01.png" alt="">
<p>我的</p>
</a>
</div>
</div>
</div>
</body>
</html>
2.二倍图技术
用精灵图插入背景图 background-image,background-position,background-size
psd: 750px —>适配屏幕宽度为375px主流设备
psd: 640px—> 320px
你从设计稿psd拿下来的图片要比你要用的图片大2倍 包括精灵图也大2倍
假如你有一张精灵图原大小80px 乘以400px 那么你用的时候就需要通过backgorund-size属性设置大小为40px 200px 千万不要写以下的%！！！
/* 50% 50% 是将背景图缩小到背景盒子的一半 不是图片的一半 */
background-size: 50% 50%;
不光要调整图片大小 还要将位置值bgp减半!
3.LESS语言
less是css的一个动态扩展语言 (less有逻辑，可以运算，有编程语言的特点)
优点：简洁高效，适应性强，代码可读性佳，提高了代码的维护性
缺点：浏览器还不能识别less语言 你需要把less文件编译成为css文件才可以使用
LESS编译
- 软件Koala 拖拽less文件夹进去 点击要编译的文件 再点编译 显示success则成功
- 还可以用vscode自带的插件 Easy Less (你需要设置编译路径 自行百度)
LESS语法
1.变量
保存值的名字而已
@变量名:变量值; 变量值 小写字母+大写字母+_ +数字 但是数字不开头
@a:300px;
@b:50%;
@maincolor:#ff6700;
@list:320px,360px,375px,...;
.box {
width:@a;
border-radius:@b;
color:@maincolor;
}
less
less动态扩展语言(逻辑性 运算 后台语言的特点) 不是为了取代css 可读性佳 提高代码书写效率
.less —> 编译—>.css 把.css引入到.html
1.变量 (保存值)
值可以变的名字而已
变量的定义 varible.less
@变量名:变量值;
@color:#ff00ff;
@a:300px;
@b:50%;
@list:320px,360px,375px,414px,420px,540px;
@c:left;
变量的使用
index.less –>@a
.topNav {
height:@a;
background-color:@color;
border-@{c}:1px solid #ccc;
}
变量在用的时候会有两个场合，属性值 @变量名 属性名里 @{变量名}
2.导入 import
@import "./变量.less";
.nav {
width:100%;
height: 40px;
//不认识maincolor变量 取不到值
background-color: @maincolor;
@{f}:left;
}
4.嵌套
轮播图结构
div.a>div.b+div.c div.c:hover { }
.a{
a的样式
.b{
b的样式
}
.c {
&:hover {
}
}
}
&代表父级选择器
5.继承
本类可以用其他类的完整代码
.public {
width:100%;
height: 100%;
border:1px solid red;
}
.list {
// extend 继承自
&:extend(.public);
border:none;
list-style: none;
}
编译后的效果:
.public,
.list {
width: 100%;
height: 100%;
border: 1px solid red;
}
.list {
border: none;
list-style: none;
}
6.内置函数
less语言提前定义好了很多用于运算的函数
@a:200px;
@c:#222;
@list:320px,375px,414px;
@l:length(@list); @l === 3 列表长度为3 length()内置函数:计算列表长度
.g {
width:@a*2;
color:@c*3;//#666
}
内置函数的官网地址:
https://www.runoob.com/manual/lessguide/functions/
第15讲
常见的移动端布局方式(手机自适应)
一：基础常识部分
I、视口viewport
浏览器不直接呈现网页，视口是呈现网页的媒介(虚拟) ,PC端视口宽度和浏览器窗口保持一致，所以不讨论
移动端视口和浏览器窗口宽度大小不一样，所以需要设置才可以正常显示网页 默认视口宽度一般大小是980px (缩小)
设置视口属性（理想视口）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
width:视口宽度 device-width设备逻辑像素宽度
initial-scale:初始缩放比例 1.0
user-scalable:yes/no 用户可以缩放界面吗
II、物理像素和逻辑像素
物理像素是买手机时告诉你的物理分辨率(发光二极管多少)
逻辑像素:css像素 ，设备独立像素(屏幕宽度)
i3 屏幕宽度3.5英寸 i4屏幕宽度3.5英寸
设计人员在做psd设计稿时是用物理像素在做的 iphone4 物理像素640px 而你写代码用的逻辑像素320px
所以此时用图片的时候应该用二倍图
主流设计稿宽度 640px(320px) or 750px(375px)
二:布局方式
1.流式布局(%+弹性盒)
原理: 盒子宽度一般设置%(特殊情况的小盒子可以采用固定像素),盒子高度一般是auto或者固定 ，配合传统布局浮动，定位，盒模型，弹性盒实现自适应，配合min-width,max-width(320px~540px or 640px or 768px)
2.rem布局
rem:相对于html根标签的单位
假如psd宽度750px,就可以设置当前预设字体基础值1rem = 100px ; （为了好算）
当前屏幕的字体基础值=屏幕的宽度*预设的字体基础值/设计稿宽度
rem+媒体查询
媒体查询h5
询问设备条件
```css
@media 设备类型 and (查询条件) {
}
}
设备类型: screen 屏幕 打印机 print
查询条件 width:300px min-width:300px max-width:300px
@media screen and (max-width:768px) {
html {
font-size:20px; //1rem = 20px
}
}
如果设备宽度小于768px时才满足条件 则执行{}内的代码
作业：
大屏设备下类名为a的盒子宽度1000px高度:400px** 背景色红色 >1200px
中屏设备下这个盒子宽度800px高度350px 背景色粉色 992-1200px
小屏设备下这个盒子宽度600px高度250px 背景色绿色 768--992px
超小屏屏设备下这个盒子宽度500px高度200px 背景色紫色 <768px
* {
padding: 0;
margin: 0;
}
/* 响应式样式 */
/* 1.查询屏幕 媒体查询 js获取屏幕宽度 */
@media screen and (min-width:1200px) {
.a {
width: 1000px;
height: 400px;
background-color: red;
}
}
@media screen and (min-width:992px) and (max-width:1200px) {
.a {
width: 800px;
height: 350px;
background-color: deeppink;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
.a {
width: 600px;
height: 250px;
background-color: green;
}
}
@media screen and (max-width:768px) {
.a {
width: 500px;
height: 200px;
background-color: purple;
}
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
rem+js布局
换了一个查询方式
媒体查询查询的屏幕都是以区间划分的 320~360px 任何设备区的都是320px的字体基础值
不太精确 后期维护困难 js查询屏幕获取当前可视区域的宽度 px级别的精确获取
//获取屏幕宽度
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth>750){
deviceWidth = 750;
}
//预设的字体基础值 假设100px
var baseFs = 100;
//设计稿宽度
var psdWidth = 750;
//当前屏幕的字体基础值=屏幕的宽度*预设的字体基础值/设计稿宽度
var currFs = deviceWidth*baseFs/psdWidth;
//当前屏幕的字体基础值赋值于当前屏幕对应de html元素的字体值
document.documentElement.style.fontSize = currFs +'px';
rem+vw布局(不用查询屏幕)
vw自己就可以达到自适应 根据屏幕宽度不同浏览器自己计算兑换的像素值
视口单位 vw ,vh viewport width 视口宽度
**将屏幕宽度等分为100vw 750px—>100vw 1vw=7.5px 320px—>100vw 1vw = ?px **
**屏幕高度等分为100vh **
<style>
.a {
/* 750px设计稿 1vw = 7.5px 测量出a盒子宽度345px 高度234px */
width:46vw;
height: 31.2vw;
background-color: red;
}
</style>
</head>
<body>
<div class="a"></div> 不好算 为了好几算 px--->vw--->rem
750px 1vw = 7.5px
750px 1rem = 100px 1rem = 13.33333vw 1px= 0.133333vw 345px 234px
html {
font-size:13.33333vw;
}
倍率100
.a {
width:3.45rem;
height:2.34rem;
}
3.flexible.js布局
来自淘宝手淘团队，由于视口的应用目前flexible已经被废弃
http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
4.响应式布局
响应式图片
5.栅格布局gird
响应式布局之grid网格布局
二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)
1.加在容器上的属性
1、grid-template-columns,grid-template-rows
grid-template-columns:100px 100px 100px;规定项目在容器排三列，每列100px宽度
grid-template-rows:100px 100px 100px 100px;规定项目在容器排四行，每行100px宽度
grid-template-*相关
1. repeat() 第一个参数是重复的次数，第二个参数是要重复的值
grid-template-columns:repeat(3,100px);
2.auto-fill 当单元格大小固定时，容器大小不固定时这个属性就会自动填充
grid-template-columns:repeat(auto-fill,100px);
3.fr 为了方便表示比例关系，网格布局提供了fr关键字(fraction片段)
grid-template-columns:repeat(4,fr);宽度均分为4份
grid-template-columns:1fr 2fr 3fr;
4.minmax(,)函数产生一个长度范围，表示长度就在这个范围之中
grid-template-columns:1fr minmax(150px,1fr);//最小不会小于150px
5.auto 表示宽度自动
grid-template-columns:100px auto 100px; 中间列宽度自动
6.网格线 可以用方括号定义网格线名称，方便后期定位引用
grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4];
2.网格间距grid-gap
grid-gap:grid-row-gap grid-column-gap; / gap:
grid-row-gap:10px; / row-gap:
grid-column-gap:20px; column-gap:
新的网格布局把该属性的grid-取消
3、容器属性grid-template-areas
一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)
grid-template-areas: 'a b c'
'd e f'
'g h i'
grid-template-areas: 'a a a'
'b b b'
'c c c'
grid-template-areas: 'a . c'
'd . f'
'g . i' 区域不需要利用，则使用点表示
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start
终止网格线自动命名为区域名-end
4、grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行(就是子元素的排放顺序)
grid-auto-flow:row;
grid-auto-flow:column;
grid-auto-flow:row dense; dense紧凑布局 (空间利用率较高)
5:对齐方式 justify-items和align-items
设置单元格内容的水平和垂直对齐方式
justify-items:start|end|center|stretch
align-items:start|end|center|stretch
place-items是以上两个属性的合并简写形式
place-items:align-items justify-items;
6：对齐方式justify-content/align-content
设置整个内容区域的水平和垂直对齐方式
justify-content:start/end/center/stretch/space-around/space-between/space-evenly
align-content:start/end/center/stretch/space-around/space-between/space-evenly
七：grid-auto-columns/grid-auto-rows
设置多出来(没有设置的剩余项目)的大小
3*3 剩余1个
grid-auto-rows:50px;
2.加在项目上的属性
一：grid-column-start/grid-column-end
grid-row-start/grid-row-end
指定项目具体位置
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
属性简写:
grid-column:1/3;
grid-row:1/3;
另外一种写法:
grid-column-start:span 2; span 跨越几条网格线 从第一条跨越
grid-column-end:span 2;
二：grid-area
指定项目放在哪一个区域
grid-template-areas: 'a a a'
'b b b'
'c c c'
grid-area:b;
还可以写成:
grid-area:row-start / column-start / row-end/ column-end
grid-area:1/1/3/3; 相当于
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
三:justify-self/align-self/palce-self
跟justify-items属性用法一致 只是针对一个项目
体基础值**
不太精确 后期维护困难 js查询屏幕获取当前可视区域的宽度 px级别的精确获取
//获取屏幕宽度
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth>750){
deviceWidth = 750;
}
//预设的字体基础值 假设100px
var baseFs = 100;
//设计稿宽度
var psdWidth = 750;
//当前屏幕的字体基础值=屏幕的宽度*预设的字体基础值/设计稿宽度
var currFs = deviceWidth*baseFs/psdWidth;
//当前屏幕的字体基础值赋值于当前屏幕对应de html元素的字体值
document.documentElement.style.fontSize = currFs +'px';
rem+vw布局(不用查询屏幕)
vw自己就可以达到自适应 根据屏幕宽度不同浏览器自己计算兑换的像素值
视口单位 vw ,vh viewport width 视口宽度
**将屏幕宽度等分为100vw 750px—>100vw 1vw=7.5px 320px—>100vw 1vw = ?px **
**屏幕高度等分为100vh **
<style>
.a {
/* 750px设计稿 1vw = 7.5px 测量出a盒子宽度345px 高度234px */
width:46vw;
height: 31.2vw;
background-color: red;
}
</style>
</head>
<body>
<div class="a"></div> 不好算 为了好几算 px--->vw--->rem
750px 1vw = 7.5px
750px 1rem = 100px 1rem = 13.33333vw 1px= 0.133333vw 345px 234px
html {
font-size:13.33333vw;
}
倍率100
.a {
width:3.45rem;
height:2.34rem;
}
3.flexible.js布局
来自淘宝手淘团队，由于视口的应用目前flexible已经被废弃
http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
4.响应式布局
响应式图片
5.栅格布局gird
19讲:响应式布局之grid网格布局
二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)
[外链图片转存中…(img-oyFWePuV-1611110109116)]
1.加在容器上的属性
1、grid-template-columns,grid-template-rows
grid-template-columns:100px 100px 100px;规定项目在容器排三列，每列100px宽度
grid-template-rows:100px 100px 100px 100px;规定项目在容器排四行，每行100px宽度
grid-template-*相关
1. repeat() 第一个参数是重复的次数，第二个参数是要重复的值
grid-template-columns:repeat(3,100px);
2.auto-fill 当单元格大小固定时，容器大小不固定时这个属性就会自动填充
grid-template-columns:repeat(auto-fill,100px);
3.fr 为了方便表示比例关系，网格布局提供了fr关键字(fraction片段)
grid-template-columns:repeat(4,fr);宽度均分为4份
grid-template-columns:1fr 2fr 3fr;
4.minmax(,)函数产生一个长度范围，表示长度就在这个范围之中
grid-template-columns:1fr minmax(150px,1fr);//最小不会小于150px
5.auto 表示宽度自动
grid-template-columns:100px auto 100px; 中间列宽度自动
6.网格线 可以用方括号定义网格线名称，方便后期定位引用
grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4];
2.网格间距grid-gap
grid-gap:grid-row-gap grid-column-gap; / gap:
grid-row-gap:10px; / row-gap:
grid-column-gap:20px; column-gap:
新的网格布局把该属性的grid-取消
3、容器属性grid-template-areas
一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)
grid-template-areas: 'a b c'
'd e f'
'g h i'
grid-template-areas: 'a a a'
'b b b'
'c c c'
grid-template-areas: 'a . c'
'd . f'
'g . i' 区域不需要利用，则使用点表示
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start
终止网格线自动命名为区域名-end
4、grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行(就是子元素的排放顺序)
grid-auto-flow:row;
grid-auto-flow:column;
grid-auto-flow:row dense; dense紧凑布局 (空间利用率较高)
[外链图片转存中…(img-IiqB6Vvw-1611110109118)]
5:对齐方式 justify-items和align-items
设置单元格内容的水平和垂直对齐方式
justify-items:start|end|center|stretch
align-items:start|end|center|stretch
place-items是以上两个属性的合并简写形式
place-items:align-items justify-items;
6：对齐方式justify-content/align-content
设置整个内容区域的水平和垂直对齐方式
justify-content:start/end/center/stretch/space-around/space-between/space-evenly
align-content:start/end/center/stretch/space-around/space-between/space-evenly
七：grid-auto-columns/grid-auto-rows
设置多出来(没有设置的剩余项目)的大小
3*3 剩余1个
grid-auto-rows:50px;
2.加在项目上的属性
一：grid-column-start/grid-column-end
grid-row-start/grid-row-end
指定项目具体位置
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
属性简写:
grid-column:1/3;
grid-row:1/3;
[外链图片转存中…(img-4KtEvzPr-1611110109120)]
另外一种写法:
grid-column-start:span 2; span 跨越几条网格线 从第一条跨越
grid-column-end:span 2;
二：grid-area
指定项目放在哪一个区域
grid-template-areas: 'a a a'
'b b b'
'c c c'
grid-area:b;
还可以写成:
grid-area:row-start / column-start / row-end/ column-end
grid-area:1/1/3/3; 相当于
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
三:justify-self/align-self/palce-self
跟justify-items属性用法一致 只是针对一个项目
扫一扫
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
