html+css

最新推荐文章于 2024-01-18 19:00:14 发布

weixin_53651407

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_53651407/article/details/114867801

版权

day01

常识

5大常用浏览器

IE: Trident

Opera 欧朋 Presto—> Blink

Firefox 开源 Gecko

Chrome 谷歌 Webkit—> Blink

Safari ios Webkit

shell 外壳 + 内核 {渲染引擎 HTMl+CSS+js引擎}

HTML

HTML: Hyper超 Text 文本 Markup标记 Language 语言

网页结构：有什么东西

超：

 1. 超文本传输协议  
    2. 对比文本    .txt ---> 字符     .html想对比.txt   不仅仅只有文本 还可以有图片，链接，音视频，动画...

标记：

特点：毫无逻辑只要记住写上去有效果不是编程语言

一组标记具有特定功能而且这个标记完全由www组织规范 (死的)

标记–》名字英文单词

图片： img

属性：功能体现信息的保存

标签= 标记名字 + <> +属性

闭合标签（双标签）

<关键字  属性名=“属性值”  属性名=“属性值” 属性名=“属性值” 属性名=“属性值”>标签内容(文本+其他标签)</关键字>
<关键字></关键字>

非闭合标签（单标签，空标签）

<img src="体现功能">

大段文字 p paragraph 段落

超链接 a anchor 锚点

图片 img image

音频 audio audio

视频 video video

大区块 div division

小区域 span span

标签的关系

平行（兄弟关系）

<div>dsfsd</div>
<div>dsfsd</div>

嵌套（父子关系）

<div>
    父亲
    <div>子元素</div> 
<div>

标签、元素，文档

标签 ,

<a ></a>

元素

<a href="">文本内容</a>

网页文档

由多个元素组成的文档 .html

文档模板

1.

<!DOCTYPE html>
解释： h5文档声明 目的：告诉浏览器以哪个规则解析此网页文件 避免怪异模式
只能放在.html文件的第一句话 但是，它不是个标签

2.

<html></html> 根标签  所有你写的标签和Body都是它的后代

3，

 meta 元信息标签 （一个meta可以设置一个配置项）

 <meta charset="UTF-8">告诉浏览器以哪种编码方式解析该文档 


 UTF-8  万国码

常见的编码集

10二进制 1010

ASCII 美国标准信息交换码 80+ 7位二进制 8个Bit 一个字节 2^8 = 256个 < 6000+

Unicode 编码 8位

GB2312国内（忽略繁体）

GBK 国内（加入繁体）

Unicode-8、-16 -32 UTF-8

标题

1.有利于搜索引擎优化SEO ,SEM

网站标题

  <title>Document</title>

标签内容

文本类型标签(了解)

默认文字大小 16px px 基本单位分辨率px pixel像素

下划线类

underline 
<u>文字下划线</u>  
<ins>文字下划线</ins>

<ins>我吃饭了</ins>   搜索引擎抓取到

<u>我吃饭了</u>

表现形式一致区别在哪里? ins语义化标签和 u无语义化标签

怎么理解语义化?

有利于搜索引擎优化（搜索引擎的爬虫会根据你网站的语义化标签里的内容确定你网站的权重权重越大排名越靠前）
有利于机器阅读
在没有css样式时语义化标签同样会呈现一个清晰的结构方便代码阅读

中划线标签

<del></del> 语义
<s></s>没有语义

字符实体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mLsC6V77-1615858215769)(C:\Users\Administrator\Desktop\第一阶段\day01\笔记\media\常用字符编码.png)]

补充： ¥ 人民币

&yen;

斜体标签

<em></em> 语义化
<i></i>  italic 斜体  没有语义化

加粗标签

<strong></strong>语义化
<b></b>  bold 粗体

换行标签

<br>  专门用于文本换行

水平线标签

<hr  color="red" align="left/right/center" width="300">  水平

align:水平对齐方式

段落标签

用于放一行或者多行字符
<p></p>

标题标签（语义化）

<h1>一级标题</h1>
<h2>2级标题</h2>
。。。。
6

不用h3以下的标签
一张界面有且只有一个h1标签（h1权重很大）一般用在logo盒子

上下标标签

平方 次幂 x<sup>2</sup>
化学    co<sub>2</sub>

格式化输出标签

<pre>
    
    int a = 10;
    float b = 12.45;

</pre>

布局标签

大区域，大容器

<div></div>  宽度默认100% 高度取决于内容的高度


一般可以装任何小的文字盒子 而且还可以大图  ,p,div,span

特点： 1. 一行一个独立成行独成一行

小区域

<span></span>  用于几个字 或者小的图标，图片,em,strong....

<span>
    <ins>sagfsdgdfh</ins>
</span>

特点：1：并排宽高取决于内容

2.span标签默认有间距说明的是span具有文本的特性

列表标签

独立区域（布局的一些盒子）

直接子代li

无序列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oj1YpRWH-1615858215774)(C:\Users\Administrator\Desktop\第一阶段\day01\笔记\media\wxlb.png)]

<ul>   unorder  list 
    <li>数据项/<div></div></li>  list
    <li>数据项</li>
    <li>数据项</li>
    <li>数据项</li>

</ul>

有序列表

<ol>   order  list 
    <li>数据项/<div></div></li>  list
    <li>数据项</li>
    <li>数据项</li>
    <li>数据项</li>

</ol>

自定义列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EMHL3Cpf-1615858215777)(C:\Users\Administrator\Desktop\第一阶段\day01\笔记\media\zdy.png)]

<dl>  define list
    <dt>旅游咨询</dt>  define title
    <dd></dd>  define data

</dl>

功能标签

图片

<img src=""  alt="" title="">

src:图片的路径
2种：

   绝对路径：网络地址  根目录 E:/a/1.jpg
   相对路径：从你当前引入图片的文件出发找图片  /根目录 只不过是工程项目的顶级目录 
./同级目录 ../上一级 ../../



alt: 图片加载失败时的文字提示

title:鼠标悬停时的文字提示

width : 宽度
height:高度  

图片是自动缩放的  原宽：原高  3:4

超链接

作用：1.跳转界面 2.跳转到某一个界面的某一个部分(锚点链接)

<a  href=""  target="">热点文字</a>

href:要链接的文档地址

特点：当前界面跳转

**target:**设置链接的打开方式

_self :本页打开(默认)
_blank:新页打开

base标签

一次性统一设置a链接的打开方式放到head标签里

<base href="" target="">


href=""设置基础地址（首页地址  ）
target=""

超链接的用法

文字链接

图片链接

<a  href=""  target="">
    <div>
        <img src="">
    </div>
 
</a>

邮箱链接(淘汰)

<a href="mailto:1621255538@qq.com">我的邮箱</a>

下载链接（淘汰）

<a href="./a.zip">下载</a>

锚点链接

what? 点击a链接跳转到界面的某一个位置

步骤:

抛下锚 (定位) id=“随便起”

链接锚 a链接href =“界面地址#锚点名字”

day02

1. css语言介绍

css: cascading style sheets 层叠样式表

作用：文本修饰，边框，内外距离，布局(盒模型，浮动，定位)，弹性盒… ,背景，文本布局，动画

，渐变，圆角，阴影…

角色：样式美容师

2. 写法

css属性

style = {

属性名 3:“属性值”;

属性名1 :“属性值”;

属性名2 :“属性值”;

属性名 3:“属性值”;

}

3.种引入方式

行内引入

样式直接写在标签内部

 <div     style="width:200px;height:200px;color:red;backgroundcolor:aqua;color:yellow">   
 </div>

特点：只对一个元素起作用

缺点：

样式和结构没有形成分离
代码繁杂冗余没有复用
后期维护困难

优点：

内部嵌入

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 样式表 */
        /*
        1.挑选元素  4个css选择器 
           写法 :
          选择器类型  {
              css属性名1:属性值;
              css属性名2:属性值;
              css属性名3:属性值;
              ....
          }

    </style>
</head>

优点:

1.在一定程度上形成了样式和结构的相分离

代码的复用

css基础选择器

1.全局*

* {} 匹配的是包含html以及它的后代的所有元素

2.标签选择器

 标签名选择器
           tagName {

           }

3.类选择器

 类选择器  
           (1)起一个名字(分类) class="类名字"  随便起  不以数字开头  -连接两个单词 
            big-box or  bigBox    product-item
           (2).类名  {}

案例：Google logo实现

4.id选择器

唯一识别

1.给你要跳选的唯一的一个元素 写id="id名" id名可以用_  big_box 
2. 使用 #id名 {}

建议:不要频繁使用id选择器

外部链接

单独创建.css文件 通过link标签引入结构文件中
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link 外部文件链接的方式 rel:文件类型-->
    <link rel="stylesheet" href="./a.css">
    
</head>

优点：

1.彻底形成分离

2.代码复用程度高

优先级

行内 > 嵌入 > 外部链接 (就近原则)

行内适用场景： 1. 覆盖其他两个样式 2. js获取和设置计算值 left,top

嵌入的样式适用场景: 1.覆盖公共样式文件里的样式

外部场景: 普通使用

4.文本相关的样式

字体样式 font-/font

font-size:字体大小 16px

font-family:字体类型

font-family:simsun,Arial ;

可以写多个以,隔开
中文字体不要直接写中文微软雅黑—》“Mocrosoft YaHei”—》字体编码
多个英文单词 “Times New RoMan” or单引号
中文字体优先写英文字体后
依次找直到找到符合条件的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VppCXalq-1615858215781)(media/sans-serif.png)]

font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;

font-style:字体形态

font-style:normal默认值 /italic倾斜  /oblique倾斜
 em,i {
           font-style: normal;
        }

font-weight字体粗细

font-weight:英文单词lighter light normal bold bolder  / 数值 100-900 100细  900粗  400正常(默认值)

复合写法

font: font-style font-weight font-size/line-height font-family;

前两个省略 但是第三个和第4个必须写
font: normal 400 12px Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;

行高属性

line-height:40px/150%/1.5;

line-height=font-size 20px + 行间距 20px

150%当前行高是当前字体的150%倍
1.5 当前行高是当前字体的1.5倍

单行文本垂直居中

line-height=盒子高度

文字水平居中

text-align:left默认值/center/right;

文本缩进

text-indent:32px/2em;  +n 向右  -n向左

颜色

color:
background-color:

16进制法: #6位16进制  0-9 a-f   #000000黑色 --- #ffffff 白色  #ff0000 --->#f00
英文单词法 red ,yellow....
三原色表示法rgb(r,g,b); 10进制  00(16)-->0(10) ff(16)--->255(10)
r:0-255
g:0-255  
b:0-255

透明度颜色: rgba(22,33,44,0-1);  a: alpha 0-1 1不透明  0 完全透明 0.1<0.2 
0.05非常透明  0.5 --->.5

单位

px / em /rem/%

font-size:100px;  绝对单位
font-size:2em; 相对单位  em 相对父级元素字体大小
font-size:2rem;相对单位  rem相对于根标签 html元素  移动端布局

width:100%; 取得是父盒子的有效内容宽
height:100%;

width:auto;
height:auto; 由内容撑开的

文本修饰样式

转换字母大小写

text-transform:lowercase小写字母/ uppercase大写/capitalize首字母大写

空格属性

white-space:normal(默认:多个解析一个)/nowrap不换行/pre格式化输出
             /* 强制一行显示 */
            white-space: nowrap;

文本修饰符

text-decration:none(没有)/overline顶线/line-through中划线/underline下划线
a {
    text-decration:none;
}

字符间距

letter-spacing:10px/0.2em;

词间距(只适用于英文)

word-spacing:10px;

垂直对齐属性

规则：文本性质的元素，默认的对齐规则叫基线对齐

文字和图片以基线对齐而图片的底线相当于文字的基线 —》图片上文字下

解决:

vertical-align:top顶线/middle中线/baseline基线(默认)/bottom底线;

不确定是不是满足你的效果

表格标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8RJLaYNx-1615858215783)(media/table.jpg)]

表格适用于显示行和列二维数据

组成部分：大盒子 table > 表格头部 thead + 表格主体部分tbody +表格底部tfoot

表格头部 thead > 一行 tr > th字段

表格主体部分tbody > 多行 tr*5> 多列 td(单元格)

表格底部tfoot：备注（大部分表格无底部）

<table>
    <caption>水暖小队工资表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>基本工资</th>
            <th>岗位工资</th>
        </tr>
        
    </thead>
    
    <tbody>
        <tr>
            <td>张二蛋</td>
            <td>20000</td>
            <td>3000</td>
        </tr>
         <tr>
            <td>Mike</td>
            <td>30000</td>
            <td>20000</td>
        </tr>
         <tr>
            <td>二妮</td>
            <td>5000</td>
            <td>800</td>
        </tr>
    </tbody>
    
   

</table>

一般表格:table>tr>td

表格默认属性

border="1" 表格边框 
cellpadding:单元格内容和边框的距离  默认大小 但是设置成为0
cellspacing:单元格和单元格之间的距离  但是设置成为0
align:left/right/center;水平对齐属性

单元格td合并属性(默认属性)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DCAHEPfZ-1615858215784)(…/…/day02/笔记/media/联通表格.jpg)]

跨行合并 : 垂直方向从上到下合并 rowspan

步骤：从哪个单元格开始合并在起始单元格写属性(最上面) rowspan=“n” n就是跨的行数

相应的删除被跨越的那一个单元格删除的行数 = n -1 ;

跨列合并：水平方向从左到右合并 colspan

步骤：从哪个单元格开始合并在起始单元格写属性(最左侧) colspan=“n” n就是跨的列数

相应的删除被跨越的那一个单元格删除的列数 = n -1 ;

css属性

width:
height:
细线边框属性: border-collapse:collapse合并(细线边框);

表格宽高auto 根据情况定列等宽行等高

用途：

1.展示二维数据 2.老式布局（已经淘汰）

day03

1、css样式优先级

优先级，继承性(text-,font-,line-,list-,color) 有 inherit关键字的都是可以继承，层叠性(相同优先级下,代码执行顺序)

**优先级:**比较选择器的权重

  浏览器默认样式 + 继承属性 < *  < tagName < class < id  < 行内样式

选择器类型	权重
*	0（2进制）
tagName标签名	1（2进制）
class	10（2进制）
id	100（2进制）

10个class 10*10 = = id

2、元素分类和转换

大致3个类

块级类

代表元素: div,p,h1~h6,ul,li,table,dl,dt,dd,ol…

特点：

默认宽度是100% ,高度取决于内容高度
设置宽高起作用
行高可以撑开盒子
独立成行

行内类

代表元素: span,a,em,i,strong,…

行高不能撑开盒子
设置宽高不起作用
并排

行内块类

代表元素:img,input

特性：

1.并排中间有间距

2.设置宽高起作用

3.不要设置行高不起作用

元素的转换

display展示模式

display:block块类型 / inline-block行内块 / inline行内类型

a {
    display:block;//由内容撑开 有蓝色有效区
}
img {
    display:block; // 取消文本特点
}
div {
    display:inline-block; 并排 但是我们不在乎间距
}
span {
      display:inline-block; 并排 但是我们不在乎间距 + 宽高 +行高
}

3、盒模型

布局第一个核心

盒模型作用：设置盒子与盒子之间的距离，设置内容与边界的距离

盒模型是网页中展示区域的一种描述，包含四部分：外边距margin，边框border，内边距padding，有效内容区width,height

外盒模型:

boxWidth=margin-left + margin-right+border-left+border-right+padding-left +padding-right+width;

boxHeight=margin-top + margin-bottom+border-top+border-bottom+padding-top +padding-bottom+Height;

内盒模型 = 可视区不加外边距

有效内容区 width,height

width:100%占满/50%一半;

height:100%/50%;


width:auto;height:auto;  auto 取决于内容 

width:1000px;height:50px;


width:2rem/2em;

min-width:
max-width:
min-height:
max-height:

div {
    width:80%;
    max-width:400px;
    min-width:200px;
    
}

内边距padding

功能：内容与边界的距离

加内边距会撑大盒子需要内减 width,height

padding:10px; 上下左右内边距10px 
padding:10px 20px ;10px上下      20px左右
padding:10px 20px 30px; 上10px 左右20px 下30px
padding:10px 20px 30px 40px; 顺时针 上右下左

width:auto; 加内边距以后会自己内减不会溢出

width:100%; 加内边距以后不会内减会外扩导致溢出

溢出以后可以拿

            不能计算 100%-40px 
            通过一个方法 calc(操作数1  运算符  操作数2);
            + - * /

            calc(100% - 40px)

边框border

border:1px solid red;
border:边宽  边型  边色;

border-width:边宽
border-style 边型 solid实线  dashed虚线  dotted小圆点虚线  double双实线
border-color:red/rgb()/rgba()/#ff0000;  


border-left:1px solid yellew;
border-top:1px solid yellew;
border-right:1px solid yellew;
border-bottom:1px solid yellew;

border-left-color: yellew;


border-width:1px; 四条边都是1px 
border-width:1px 2px 3px 4px;顺时针

border-width:1px 1px 0px 0px;上右1px 左下没有边框
border-color:red yellow transparent transparent ;   transparent透明色

边型属性必须给出边色默认取前景色 color

边框加了以后也要内减

边框经典案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H1ZfHh3M-1615858215786)(media/边框案例.png)]

**实现思路：**每个小盒子设置右下边框或者左上边框大盒子设置左上或者右下边框

边框的独特应用

做一个三角形尖角朝上的三角形

 <style>
        .trangle {
            width: 0px;
            height: 0px;
            border-left:10px solid transparent;
            /* border-top:0px; */
            border-right:10px solid transparent;
            border-bottom:10px solid palegoldenrod;
        }

    </style>
</head>
<body>
   <div class="trangle">

   </div>

day04

1、外边距margin

功能:移动盒子位置

margin:10px; 四个方向都是10px
margin:10px 20px ; 上下10px 20px左右
margin:10px 20px 30px;
margin:10px 20px 30px 40px;

margin-left/margin-top...

右下外边距不会移动盒子位置但是会使盒模型变大

课堂案例:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FzxDv4i4-1615858215787)(media/外边距练习.png)]

发现的问题:

1.子盒子设置上外边距会带着父盒子一起向下移动 ----》外边距塌陷现象

2、外边距塌陷现象

父子嵌套的塌陷

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2ww5tcY-1615858215788)(media/父子关系塌陷.png)]

让父盒子有明确的盒模型区
方法1：

border-top:1px solid #fff;
方法2：

padding-top: 1px;

利用BFC规则 —》让块类型元素形成密闭的私有空间，外部不影响内部，内部不影响外部

方法： overflow:hidden;触发BFC规则

上下的兄弟塌陷

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HNr9gNYW-1615858215789)(media/兄弟关系塌陷.png)]

解决办法：

1.你要避免问题的出现

2.各自套一个父盒子给父盒子加overflow:hidden

4.选择器进阶

作用：挑选元素

复合选择器—》由基础选择器组合而来的

1.父子关系

(1)后代选择器

  ```css

E F {

}
匹配的是E的后代类型为F的元素

{

}

.a .b {

}
```

（2）子代选择器

E > F {
    
}
匹配的是E的直接子代 类型为F的元素

2.兄弟关系选择器

(1)相邻选择器

E + F {
    
}匹配的是E的紧紧相邻的下一个兄弟元素  但是必须是F类型的
.a + .b {
    
}

(2)兄弟选择器

E ~ F {
    
}匹配的是E的类型为F的兄弟元素
.a ~.b {
    
}

3.数学关系

(1)并集

E,F,H,T.... {
    
}
匹配的是所有你写上去的复合条件的元素

(2)交集

EF {
    
}匹配的是既是E类型又是F类型的元素

5.背景属性background

css提供的引入图片的方式一般用于插入与内容无关的长条形广告图，大面积图片

or 非常小的类似于图标的小图

background:  背景图片地址   背景图片是否平铺   背景图片位置/背景图片大小尺寸  背景图片是否移动  背景颜色 ;

背景图片地址 background-image:url(图片地址);
背景图片是否平铺: background-repeat:no-repeat不重复  / repeat默认值铺满 /repeat-x/repeat-y;

背景图片位置:坐标(x,y)
background-position: x y;  px px/ left top right bottom center / % % 

left top 左上角  图片的左上角放到盒子的左上角 
right bottom 右下角 图片的右下角放到盒子的右下角
center center 中心处 图片的中心和盒子中心重合

left ; 第二个值默认是center 



20% 20% 取背景盒子和图片的宽高差值的20% ;
100% 100% 图片在盒子右下角

100% 50%  === right  center 



背景图片大小尺寸（css3） background-size:width height;
background-size:px px  / 100% 100%;

50% 50% 代表图片的大小为背景盒子宽度的一半和高度的一半



背景图片是否移动 background-attachment:srcoll移动，卷曲(默认) / fixed 不动  固定

6、表单标签

功能：收集用户信息(搜索框，登录模块，注册模块)

form 块类型 input 行内块

<form action="" method="" name="">
  

</form>

表单控件

<input type="">

type	类型	作用
type=“text”	文本框	输入字符，没有长度限制，显示出来
type=“password”	密码框	输入字符没有长度限制不显示小黑点
type=“radio”	单选框	小圆圈可以勾选
type=“checkbox”	复选框	正方形可以勾选
type=“file”	文件上传域	只可以选择一个文件上传
type=“submit”	提交按钮	点击即可将数据提交到对应地址
type=“reset”	重置按钮	点击内容清空
type=“image”	图片提交按钮	点击即可将数据提交到对应地址

表单控件标签

textarea文本域

select下拉列表

<select name="" id="">
    <option value=“”></option>
    <option value=“”></option>
    <option value=“”></option>
</select>

表单控件属性

name:后期提交的数据的键名（必须属性）

value:后期提交的数据的值(必须属性)

checked 单选框和复选框默认被勾选的属性

逻辑属性

checked = “checked” 一般省略不写值只写名字

selected 下拉列表option默认被选中

size:控制下拉列表option显示的长度 size=1 默认值1

minlength:用户输入字符的个数最小值 3位

maxlength:用户输入字符的个数最大值 6位

placeholder 默认文字提示

表单数据的两个提交方式的比较

GET 和POST提交的区别是什么？

1、GET是默认提交方式将数据以参数的形式拼接到地址栏后面(?)

POST是将数据提交到form data 用户看不到

2、 GET安全性低于POST

3、 GET提交有数据量的大小限制一般用于提交少量数据

POST一般用于提交大量数据

4、GET适合于提交不敏感数据 POST用于提交敏感数据

7.浮动属性

**作用：**专业做并排

display:inline-block 并排局限：1、中间有间距 2、垂直方向上对不齐

浮动

float:left左侧/right右侧/none不浮动（默认）

影响

父盒子高度塌陷(高度0)

什么原因？

浮动属性会使标准流盒子脱离标准流形成浮动流不占据界面位置

(规则：浮动子元素不参与高度计算)

特性：

浮动元素会覆盖标准流盒子但是不覆盖文本流（产生层次）
浮动元素并不会脱离父盒子(左右边界)
浮动元素遇到浮动元素和行内块类型的元素会停止浮动(并排)
文本会环绕浮动元素进行排放
浮动气流的影响是单向只会影响后续元素不会向前影响

清除浮动影响

1.给父盒子定高

缺点:不实际通常父盒子高度一般都是auto

**2.**给父盒子加overflow:hidden属性

触发BFC规则 —> BFC规则：是BFC盒子那么这个盒子里的浮动子元素要参与高度计算

缺点：会切掉你故意溢出盒子外侧的元素

**3.**前辈创造的属性专门用于清除浮动影响

clear:both/left /right;

 <!-- 两个类型  块  清除浮动影响的标签必须是块类型-->
       
 <div style="clear:both"></div>

缺点：文档树庞大加了很多没有展示具体数据的空标签会对后续js操作带来影响

**4.**伪元素法实现

伪元素：css创造的元素(默认行内类型)

真元素： <></>

::after ::before

E::after {
    
    content:'';  必备属性  功能：此伪元素的文本内容
    
}插入一个元素到E这个元素的所有内容之后(最后一个子元素存在)
E::before {
    content:''; 必备属性
    
}

 <div style="clear:both"  class="a clearFix"></div>

.clearFix::after,.clearFix::before {
    content:'';
    display:block;//清除浮动影响必须是块类型
    clear:both;
}

子元素浮动父元素身上写clearfix类

块元素+浮动 —》并排

行内，行内块 + 浮动 -----》中间间距取消了然后文本基线对齐的现象不存在了

day05

定位position

盒模型：

浮动：并排

定位： 1、压盖效果 2、特殊位置

计算值不稳定布局

定位

定位类型:

静态定位：

position:static;

特性:

1.位置的变化:no;--->默认值  就是标准流   不能布局
2.参考对象:
3.脱离标准:
4.作用：例子：在ie8一下解决透明度兼容性问题

不能用作布局

相对定位：

position:relative;

1.位置的变化:yes;
2.参考对象:自身初始位置
3.脱离标准:no
4.作用:
     (1)微调元素位置(外边距)
     (2)辅助绝对定位

不适合布局因为会保留初始的空白区

绝对定位：

position:absolute;

1.位置的变化:yes;
2.参考对象:初始是body
绝对定位是以距离自己最近的拥有定位属性(除了静态均可)的父级盒子作为定位参考
3.脱离标准:yes
4.作用:
   布局 ： 看父元素是否有除了静态的定位属性   yes--->不用加相对  no--->加相对定位

非常适合布局，又是随着滚动条动子绝父相

固定定位:

position:fixed;

1.位置的变化:yes;
2.参考对象:浏览器可视窗口

3.脱离标准:yes
4.作用:
    滚动条滚动 盒子不动   侧边的功能链接盒子 ，回到顶部，黑盒子压盖时

适合布局

定位值：描述元素的位置坐标

left: 定位元素相对于参考对象左侧边界的距离
top:定位元素相对于参考对象上侧边界的距离
right:定位元素相对于参考对象右侧侧边界的距离
bottom:定位元素相对于参考对象下侧边界的距离

(left,top)  or (right ,top) or (left,bottom) or (right ,bottom)


left ,top right,bottom:px/% 移动父盒子的宽高的%多少/rem;

定位实现盒子垂直居中和水平居中

先向右向下移动父盒子的宽高的一半(left:50%;top：50%)，在继续向左向上移动自身宽高的一半

我们必须定位元素的宽高值

层级属性z-index

层次关系对拥有定位属性的盒子而言 HTML结构越靠下的层级值越大越向前展示

大小关系z-index值越大越向前展示

z-index:n;  n 可以为正负  
z-index:333;  
z-index:0;默认的标准流
z-index:-1/-100/-2000;

定位和浮动的关系

相同点:

定位(绝对，固定)—脱标准和文本流

浮动----》脱标准,不脱文本流（没有层次 z-index不能写）

共同点：脱标 —》不区分块还是行内类型(设置宽高，设置任何方向的外边距内边距行高撑起来)

元素的展示模式

行内特点

1. 并排 有间距
2.设置宽高不起作用  上下外边距也不起作用  左右起作用  可以设置四个方向内边距 上内边距溢出父盒子
3. 行高不可以撑开盒子 
4. 不能嵌套块元素 ，行内块  (除了a)

块类型特点

1.独立成行 一行一个 
2. 可以设置宽高 默认宽度100% 
3.可以设置上下左右内边距和外边距
4. 行高可以撑开盒子
5.能嵌套任何类型元素

行内块

1. 并排 有间距
2.设置宽高不起作用 可以设置上下左右内边距和外边距
3. 行高可以撑开盒子

课堂案例

腾讯登录框

相对定位练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pb59c9zC-1615858215790)(media/相对定位扩展.png)]

position:relative;
left:100px;
top:200px;

or  

position:relative;
right:-100px;
bottom:-200px;

相对定位是可以压盖标准流盒子有z-idnex属性设置向前向后展示

显示和隐藏

两种写法

第一种:不保留原来的位置(删除)

display:block显示的/none隐藏的;

第二种:保留原来的位置(opacity)

visibility:visible可见的/hidden隐藏

盒子阴影和文字阴影

盒子阴影

box-shadow:h-shadow v-shadow blur size color inset内阴影/外阴影(不写);
h-shadow:水平方向阴影尺寸  px +px水平右侧阴影 -px水平左侧阴影
v-shadow:垂直方向阴影尺寸  px +px水平下侧阴影 -px水平上侧阴影

一般，这两个值为0 四周阴影

blur:模糊距离

size:纯色的尺寸 （一般0px）
color:
inset内 不写就是默认外阴影

文字阴影

text-shadow:h-shadow v-shadow blur color ;
h-shadow v-shadow :0px

text-shadow:-1px -1px 1px yellow ，1px 1px 1px red;
左上是1px 的黄色  右下是1px红色

day06-Day07

滑动门技术(推拉门)

由特殊背景图片(单一图片不涉及渐变色)铺在一个宽度不确定的盒子身上的技术

原理：两个嵌套盒子(父子关系) 外侧盒子铺特殊背景图的左侧 (bgp:0 0) 内侧盒子铺特殊背景图的右侧(bgp:100% 0%)

鼠标移入直接铺图就行不要突然增加内边距！！！！

精灵图技术(雪碧图)

sprites

在一张大图拼合了许多小的独立图片 —》精灵图

原理：

利用背景图片background-image插入一张大图在特定大小的盒子里，通过backgroud-postion属性移动图片位置使你想显示的小图显示在这个盒子里(适合切换和显示小盒子的小图)

优缺点:

优点：

1.减少了http请求的次数提高了网站的加载速度

方便的动态替换图片(:hover)
方便的统一替换风格

缺点：

需要测量和计算误差

圆角边框

border-radius

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LtmQHLhR-1615858215791)(media/圆角边框.png)]

border-radius:10px; 四个角都是10px
border-radius:10px 20px; 10px 左上角和右下角 10px 右上角和左下角 20px
border-radius:10px 20px 30px ; 左上角10px  右上角和左下角20px 右下角30px
border-radius:10px 20px 30px 40px; 顺时针


border-top-left-radius:10px;

border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
 水平切线/垂直切线  (10px,40px)左上角  顺时针


border-radius:50%; 正方形变圆  长方形变椭圆

经典布局（大区域）

盒模型，浮动，定位

自适应：一个盒子的宽度会随着浏览器窗口or父盒子的宽度自动做调整

px/% px绝对单位 %父元素相对单位

两列自适应布局

原理：左列固定宽度，右列宽度100% 左列在右列的上面先写(html) ,左列左浮动盖住右列标准流盒子

三列自适应布局

原理：左右俩列固定宽度，中间列自适应(100%)

圣杯布局

原理：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居中

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .c {
            /* 3.最外侧盒子设置左右两侧内边距 */
            width:auto;
            padding: 0px 220px 0px 200px;

        }
        .center {
            width:100%;
            height: 400px;
            background-color: peru;
            float: left;
        }
        .left {
            float: left;
            width: 200px;
            height: 400px;
            background-color: yellowgreen;
            /* 1.向左走100%宽度 外边距 -100% */
            margin-left: -100%;
            /* 4.向左移  相对定位  left: -200px*/
            position: relative;
            left: -200px;
        }
        .right {
            float: left;
            width: 220px;
            height: 400px;
            background-color: red;
            /* 2.向左走 自身的宽度 外边距 -220px */
            margin-left: -220px;
            position: relative;
            right:-220px ;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="c clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

双飞翼布局

原理：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用中间列盒子的内容盒子的外边距把中间列内容居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
            
       
        .c {
            /* 3.最外侧盒子设置左右两侧内边距 */
            width:auto;
           
            min-width: 700px;

        }
        .center {
            width:100%;
            height: 400px;
            background-color: peru;
            float: left;
            
        }
        .left {
            float: left;
            width: 100px;
            height: 400px;
            background-color: yellowgreen;
            margin-left: -100%;
          
        }
        .right {
            float: left;
            width: 100px;
            height: 400px;
            background-color: red;
            margin-left: -100px;
          
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        .content {
            /* width= auto-200px  自动内减 */
            margin: 0px 100px;
        }
    </style>
</head>
<body>
    <div class="c clearfix">
        <div class="center">
            <div class="content">
                京东is阿金都是啥都看泼洒开灯水电费坡口机度搜附近二级坡物权法坡度是奇偶发第三方坡口机SAP东风破电视剧安排速度快破奥斯卡打破as披萨店看破啥快递德里克马上就到泼洒爱神的箭泼洒记得看泼洒奥施康定【披萨爱斯达克【披萨卡的【披萨客as【跑快点泼洒开批斗建瓯市付款计划赴ID手机废了的萨克
            </div>
        </div>
        <div class="left">2222222</div>
        <div class="right">222222</div>
    </div>
</body>
</html>

等高布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hmpz9Qiv-1615858215793)(media/不等高.webp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OcFXtsnz-1615858215795)(media/等高.webp)]

伪等高效果

内外边距相消法

        * {
            padding: 0;
            margin: 0;
        }
        .c {
            width:100%;
            min-height: 300px;
            overflow: hidden;
        }
        .col1 {
            float: left;
            width:30%;
            height: 300px;
            background-color: teal;
            padding-bottom: 999px;
            margin-bottom: -999px;
        }
        .col2 {
            float: left;
            width:40%;
            height: 400px;
            background-color: red;
            padding-bottom: 999px;
            /* 400+999 -999=400 */
            margin-bottom: -999px;
        }
        .col3 {
            float: left;
            width:30%;
            height: 500px;
            background-color: deeppink;
            padding-bottom: 999px;
            margin-bottom: -999px;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="c clearfix">
        <div class="col1">1111</div>
        <div class="col2">2222</div>
        <div class="col3">3333</div>
    </div>
</body>
</html>

真等高（背景盒子等高）

原理：在列盒子外侧套与列数相同个数的盒子 , 从第2层盒子开始利用外边距向左移动，

接下来将相应的列利用相对定位向右移动，给最外侧盒子上写overflow:hidden

day08-day10

PS基础操作

标尺设置

ctrl+R 或者视图–》标尺鼠标放上去右键切换单位为像素

标尺工具

按shift拉出水平线和垂直线

按shift+alt可以测量角度

吸管工具

标尺那点住吸取颜色即可

文字工具

编辑—》首选项—》单位与标尺 ----》文字单位设置为px

抓手工具

快捷键空格

选择工具

快捷键 V

作用：选择图层，拖拽图层

切片工具

1.切刀选择区域文件—》导出—》存储为web所用格式选择切片改类型

背景透明选png 颜色单一选gif 普通图片选 jpg

基于参考线的切片拉参考线选中图片选择切片点基于参考线的切片

文件—》导出—》存储为web所用格式按shift多选切片—>选择切片改类型 —》存储
cutterman

小U商城

6张 95% 还原度 + 盒子

1.创建文件夹，引入小图标

小U商城文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yao1b7AT-1615858215795)(media/项目文件创建.png)]

小图标引入

 <link rel="shortcut icon" href="./favicon.ico">

小图标要放在根目录下和首页同级

文件命名规范

统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。

原则： 1）方便理解，见名之意

2）方面查找

例如：

首页—index
产品列表—prolist产品详细页面—pro_detail
新闻列表—newslist新闻详细页面—news_detail
发展历史—history
关于我们—aboutus
联系我们—linkus，contactus
信息反馈—feedback
留言—leavewords

图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

banner：放置在页面顶部的广告，装饰图案等长方形的图片
logo：标志性的图片
button：在页面上位置不固定，并且带有链接的小图片
menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
pic：装饰用的图片

例子：

banner_sohu.gif, banner_sina.gif
menu_aboutus.gif,menu_job.gif
title_news.gif
logo_police.gif
pic_people.gif

代码规范

html

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；

不要忽略可选的关闭标签，例：和。

块元素可以嵌套行内元素和行内块,行内元素不可以套块元素(a除外)

复合标签的直接子代按照规定写(ul>li,ol>li,dl<dt+dd)

一个界面上有且只有一个H1元素,一般用在logo上

自定义属性时,最好用data-属性名命名属性名字方便获取

CSS

尽量用class属性取挑选元素 .类名 {}

不要写超出三个的类选择器

不要出现任何单独的标签选择器!!!

#id 100 权重最大父元素 id

css书写规范

div.a {
    布局相关的属性;  display,overflow,float,position,margin,padding
    本身的属性;width,height,border,bgc,
    文本的属性;text-,font-,...
    其他属性;z-index,border-radius,box-shadow,cursor,resize...
    
}

网站三剑客(head)

TDK

Title 网页标题 4-6词词语

<title>   </title>

Description 描述

<meta name="description"  content="U.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

Keywords

网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东

小字体图标

国内的：阿里矢量图标库(放大不失真)

国外的：iconmoon

文本溢出处理

单行文本溢出

实现方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图：
dome1

多行文本溢出

实现方法1：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
 overflow: hidden;
 text-overflow:ellipsis;

效果如图：
dome2

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
兼容性差

实现方法2：

兼容性比较好伪元素…加在盒子末尾

.box2 {
            position: relative;
            width: 150px;
            /* 高度是行高的倍数 显示几行就是几倍数 */
            line-height: 30px;
            height: 90px;
            border: 1px solid red;
            overflow: hidden;
          
        }
        .box2:after {
            content: '...';
            position: absolute;
            right: 0px;
            bottom:0;
            padding-left: 20px;

        }
<h3>方法2</h3>
    <div class="box2">
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
    </div>

鼠标样式

cursor:pointer小手/text文本/move带箭头十字架/crosshair十字架/default箭头/auto自动

cursor:url(图片路径),auto;  auto是当图片不符合要求时就采用默认的样式 
png 体积小

小箭头实现

由两个三角形定位实现的

 /* 黑色  */
        .arrow::before {

            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            border-width:0px 10px  10px 10px;
            border-color: transparent transparent #000 transparent ;
            border-style: solid;



        }

        /* 白色三角形 */
        .arrow::after {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            width: 0;
            height: 0;
            border-width:0px 10px  10px 10px;
            border-color: transparent transparent #fff transparent ;
            border-style: solid;

        }

BFC规则

1. 什么BFC规则？

Block Formatting Context 块级格式化上下文

块级元素的渲染区域规则 BFC盒子外部不影响内部内部不影响外部

2. 哪些属性可以触发BFC规则？

1. float不为none
   2. position属性为absolute和fixed
   3. oveflow不为visiable 
   4. html 根标签 
   5. display为inline-block

3. BFC有哪些规则

1. BFC盒子内部的子标签按照垂直从上到下排
   2. 共用一个BFC盒子的垂直方向上的外边距会发生塌陷现象
   3. 子标签都会父盒子的左边界停靠，即使浮动元素也如此
   4. BFC盒子内部浮动元素也要参与高度计算
   5. BFC区域和浮动元素不重叠
   6. BFC盒子是一个密闭空间   外部不影响内部  内部不影响外部

4.解决的问题

2—》外边距塌陷

3—》浮动特性

4—》清除浮动影响

5----》图文不环绕 (p+overflow)

常见浏览器兼容性问题处理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZgJ459RG-1615858215799)(media/浏览器不支持显示.png)]

1. ie6下小高度盒子问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-517uulBY-1615858215800)(media/ie6下小高度问题.png)]

2.双边距问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JiR5F4Fg-1615858215801)(media/ie6双边距.png)]

3.ie7下子元素相对定位父盒子overflow失效问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-74p0qi6R-1615858215802)(media/overflow.png)]

常见的兼容性问题

1.ie8下图片边框问题

<a>
    <img  src="">
</a>

2. 背景复合写法

不能写成这样必须把每个属性值以空格隔开

background:url()no-repeat  center center ;

3. 图片下间隙问题

图片和包裹他的盒子的底边框有个默认大概3px间距

原因：图片和文字基线对齐 —》图片具有文本特性间距其实就是文件基线和底线之间距离

解决办法：

父盒子身上加 font-size:0;line-height:0;
写到图片身上不让图片以基线对齐 top/middle/bottom
让图片转块 img {display:block}

4. 文本框与按钮对不齐现象

 <form action="">
        <input type="text" class="txt">
        <input type="submit" class="sub" >
    </form>

文本框是传统盒模型边框和内边距外扩按钮的内边距和边框是自动内减所以写的时候不要内减按钮，内减文本框就行！！！

5. ie8下透明度的问题

透明度实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1SfB8xku-1615858215803)(media/其他浏览器.png)]

背景透明，内容不透明

div {
    background:rgba(0,0,0,.2); 0---1  0.05 0.5  .5 .05
}

背景和内容一起透明

div {
    background:rgb(0,0,0);
    opacity:0.2;  0---1 
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MgzAVDWe-1615858215804)(media/ie8专属滤镜.png)]

ie8不支持rgba和opacity 属性 IE有自己的专属透明度滤镜

IE透明度属性(实现背景和内容一起透明)

filter:Alpha(opacity=30)   0-100  30 --->0.3 100--->1

ie8下背景透明和内容不透明应该这样实现：

思路：阻断透明度的穿透

给内容单独一个盒子不要写在背景颜色盒子里

给内容盒子加相对定位父盒子加静态定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Lgyd2K4-1615858215805)(media/ie8解决背景透明内容不透明.png)]

css hack（IE）

条件hack

需求：ie8-以下可见此盒子

<!--[if gt IE 6]>
  <p>HJKHI</p>
<![endif--]>

条件： ！ 非  > < >= <=  是 

! IE 6
>= gte  [if gte IE 7]  gt equal  ie7,ie8及其以上可以看到见
<= lte
< lt
>gt 
[if IE 6] 只要ie6才能看到

ie10以上不能用废除了！

css属性hack

_属性名:属性值; ie6-以下识别  _color:red;
*属性名：属性值; ie7-以下识别  *color:yellow;
属性名:属性值\0; ie8-ie9可以识别 color:blue\0;

div {
    color:blue\0;
    *color:yellow;
    _color:red;
    
}

选择符级hack

识别一个类

* + html  .a {  ie7可以识别
    color:red;
}

* html .a {
    color:yellow; ie6识别
}

图片类型以及适用场所

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Da3zH4q0-1615858215806)(media/图片格式.png)]

轮播图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e76fDNql-1615858215807)(media/轮播图.png)]

day11

HTML5

新增的标签

布局语义化标签

header头部,nav导航,aside侧边栏,article独立区域,section是article的一部分,footer底部

适合用在移动端因为ie8-不兼容

解决ie8-语义化标签兼容问题

我们自己写js代码创建标签
用前辈写文件 html5shiv.js

新增的表单type类型

form>input type=“text/password/file/radio/checkbox/button/”

submit/reset/image textarea select>option

1、 email邮箱类型

<input type="email" name="">

1.可以基础格式的验证   @前后有没有内容 
2.自动弹出相应邮箱键盘 @ com .

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GlX6QVV3-1615858215810)(media/email.png)]

2.url网址类型

<input type="url">  

1. 可以基础格式的验证   关键字http:// https,ftp:
2. 弹出网址键盘

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zsH9J7gf-1615858215810)(media/url.png)]

3、number类型

<input type="number">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zctVN7J-1615858215812)(media/number.png)]

4. tel类型

<input type="tel">  
1.没有验证 (js,pattern)
2. 弹出手机键盘

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7mn30qos-1615858215813)(media/tel.png)]

5. color类型

色盘

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uacvOKf8-1615858215814)(media/color.png)]

6. range类型

<input type="range"> 标尺滑块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i1SXMqGk-1615858215815)(media/range.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJC2y1QT-1615858215816)(media/range美化.png)]

7. date 日期

<input type="date"> 年月日

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-spap9Grn-1615858215817)(media/date.png)]

8.时间 time

<input type="time">时分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u71o0Vgm-1615858215819)(media/time.png)]

9.月份

<input type="month">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1DBAXFOm-1615858215820)(media/mounth.png)]

10.星期周

type="week"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2shlmRk-1615858215821)(media/week.png)]

11.本地时间 datatime-local（Chrome）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7nO77KZ-1615858215822)(media/datatime-local.png)]

12. datetime (Safari)

13.搜索框

<input type="search">  为了小小的改善体验 X

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9nesKvr8-1615858215825)(media/search.png)]

h5表单新增的标签

下拉列表(既可以又可以输入)

<input type="search" name="city"  list="city">
<datalist name="" id="city">
    <option   value="北京"/>
    <option   value="上海"/>
    .....
</datalist>


list 属性绑定用户输入的数据到下拉列表

meter表示进度的元素(率)

<meter min="0" max="100" value="80"  optimum="98"  low="60" high="95"></meter>

fieldset

逻辑性包裹功能没有实质性的样式

<form>
    
    <fileset name="">
        
        <legend>表单标题标签1</legend>
    
    </fileset>
    <fileset name="">
       <legend>表单标题标签2</legend>
    </fileset>
</form>

label标签

1.改进鼠标的点击功能 2.信息标注

<form>
  <label for="userTel">手机号:</label>
  <input type="tel" id="userTel">

</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wmqcZwgz-1615858215827)(media/ktlx.png)]

表单元素新增的属性

minlength ,maxlength,size,checked,selected,placeholder

h5新增属性

autofocus自动聚焦属性

写到谁身上谁就会在界面一加载出现自动聚焦的光标
autocomplete自动的输入提示功能

autocomplete="on开启/off关闭(默认)"

前提： 1.此元素要有name属性  2.要成功提交一次（历史记录）

pattern 模式字符串匹配属性
required必填项
readonly只读属性
disabled禁用 enabled可以用的
multiple 文本上传域多选上传文件

新增的多媒体标签

audio音频标签

<audio src="音频文件地址"></audio>

src:路径
controls 播放控件
loop="loop" 自动循环播放  默认是播放一次
muted 静音属性
preload = "auto/load/none"
autoplay 自动播放属性 与浏览器版本有关  与你设置的浏览器参数有关

audio支持.wav .ogg .mp3
<audio  controls>
   <source src="a.mp3">
   <source src="a.ogg">
   <source src="a.wav">
</audio>

video

<time datetime="2020-6-15">中秋节</time>

2q4wfrse<mark>safsf</mark>safdsf

2q4wfrsesafsfsafdsf

day12

css3新增的选择器

结构伪类选择器 : or ::

类型1：child类型

E:first-child {} 匹配的是E的父元素的第一个孩子  这个孩子必须是E类型 如果不是则匹配失败
E:last-child {} 匹配的是E的父元素的最后1个孩子  这个孩子必须是E类型 如果不是则匹配失败
E:nth-child(n) {} 匹配的是E的父元素的第n个孩子  这个孩子必须是E类型 如果不是则匹配失败

n的条件  从0开始 整数 可以有关于n的表达式  n+2 自动自增
E:nth-child(even) {}  2n偶数even  2n+1奇数odd 3n /n+6 / -n+10

E:nth-last-child(n){} 匹配的是E的父元素的倒数第n个孩子  这个孩子必须是E类型 如果不是则匹配失败

案例： 10个盒子并排奇数个红色偶数个粉色前三个黄色后五个绿色

有可能挑选失败适合用于HTML非常单一的结构ul>li,ol>li

类型2： type类型

E:first-of-type{} 匹配的是E的父元素里的E类型的第一个  
E:last-of-type {} 
E:nth-of-type(n) {}

n的条件  从0开始 整数 可以有关于n的表达式  n+2 自动自增
E:nth-of-type(even) {}  2n偶数even  2n+1奇数odd 3n /n+6 / -n+10

E:nth-last-of-type(n){}

适合于复杂结构

属性选择器[]

全局选择器

1.[属性名]

[class] {} 匹配的是拥有class属性的元素
[a] {} 匹配的是拥有a属性的元素

2.[属性名=“属性值”]

    [a="sh"] {

            font-size: 100px;

        }

^匹配的是属性值以…字符开头的

     [a^="w"] {
            text-decoration: underline;
        }

*4. 匹配的是属性值包含…字符的

[a*=“e”] {

background-color: yellowgreen;

}

/* /* $匹配的是属性值以…字符结尾的 */

[a$=“y”]:hover {

background-color: orangered;

}

功能：精灵图和字体图标全局公共样式提取

表单选择器

input:checked {} 匹配的是被勾选的单选框或者复选框
input:focus {} 匹配的是当前聚焦的元素 （鼠标选中文本框）
input:disabled {} 匹配的禁用元素
input:enabled {}匹配的是没有被禁用的元素
input::placeholer {}匹配的是文本框里的提示文字

其他选择器

:not() 非不是除了…

p:not(.a){} 除了类名为.a的p元素其他的p元素全部挑选

:not(body){
    
}
audio:not([controls]){
    
}
p:not(p:last-of-type){}

::selection

鼠标选中文本时的样式

：:first-letter

匹配第一个字母

：:first-line

匹配的是第一行

：root

匹配的是html元素

 :root {
            --color:yellow;
            --w:300px;
        }

:target

匹配的是当前被激活的锚点

#spring:target {

color:red;

}

css3背景属性

1. 多背景属性

一个背景盒子可以很多张背景图片

background-image:url(),url(),url()....;
三张默认在左上角放置  越写前的图片越向上展示

background-repeat:no-repeat;
background-position:0px 0px ,right bottom,center center;

2.背景尺寸

设置背景图的大小

background-size:npx npx / 100% 100%/cover/contain;

% :以背景盒子作为参考  
cover:保证填满盒子  可能导致图片不完全显示 比如说登录注册界面的大背景图 ---》保证中间图片是原来大小显示
contain:保证图片完全显示 可能会有留白区域

3.背景图的初始放置区域

针对盒模型的放置边框 + 内边距 + 有效内容

background-origin:content-box内容区/border-box边框区/padding-box内边距(默认值)

4.背景裁剪区域属性

设置背景图片超出哪个盒模型区域就切掉

background-clip:content-box内容区/border-box边框区/padding-box内边距(默认值)

5.背景渐变属性

线性渐变

background-image:linear-gradient(方向，颜色1 停止位置，颜色2 停止位置....);

方向: 度数值0deg ,90deg/方位值 to right 从左到右 to top 从下到上...
建议用度数值！！！！

停止位置： %  20%

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlXMyt50-1615858215829)(media/线性渐变方向值.jpg)]

文字渐变

            background-image: linear-gradient(90deg,red 30%,yellow 70%);
            /* background-size: 5px 5px; */
            /* 文字透明 */
            color:rgba(0,0,0,0);
            /* 背景裁剪属性  text 溢出文字裁剪 只能用在移动端 */
            -webkit-background-clip: text;

径向渐变

background-image:radial-grandient(形状  大小  位置 , 颜色1 停止位置，颜色2 停止位置...);

形状:circle圆形 / ellipse（背景盒子正方形---》圆  长方形---》椭圆）默认值

大小:最近边 closest-side/最远边farthest-side/最近角colsest-corner/最远角farthest-corner默认值

渐变中心位置:px px /% %  at 50% 50%

新盒模型

新盒模型：内容包含了边框和内边距内减盒模型 width = 有效内容区(auto)+padding+border

传统盒模型 = 内边距+内容+边框+外边距；—》外扩 Width = 有效内容区(width)+padding+border

新盒模型  box-sizing:border-box;
传统盒模型  box-sizing:content-box;(默认)

ie8及其以下不兼容移动端要用新盒模型

用户界面

cursor:

resize:设置用户是否可以拖拽一个盒子

resize:none禁止/vertical垂直/horizontal水平/both双向

文本多列布局

            /* 列的个数   默认的列宽327*/
            column-count: 4;
            /* 列宽度 */
            column-width: 200px; 

            column-gap: 10px;
            /* 列边框 出现在间距中间 */
            column-rule: 2px dashed  red;

浏览器的私有前缀

作用：为了让低版本的浏览器提前支持未被纳入标准的css3属性

-webkit-属性名:属性值; Safari/Chrome
-o-   Opera 
-ms-  IE 
-moz- Firefox

私有属性;
标准属性;

-webkit-box-shadow:0px 0px 10px 1px red;
-ms-box-shadow:0px 0px 10px 1px red;
-o-box-shadow:0px 0px 10px 1px red;
-moz-box-shadow:0px 0px 10px 1px red;
box-shadow:0px 0px 10px 1px red;

day13

css3动画

补间动画关键帧动画

过渡动画 (两个状态)

描述一个元素在两个状态之间的切换最初—》最终有时间持续

transition:要过渡的属性  持续时间s  运动的曲线  延时的时间s;
运动的曲线:linear匀速 / ease 默认值/ease-in...

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGbm3gB5-1615858215830)(media/ydqx.png)]

多属性过渡

              /* 过渡属性以,隔开 */
              transition: left 3s linear 0s,background-color 1s linear 0s; 
         或者  transition: all 3s linear;

过渡属性不能过渡没有具体计算值的属性 display,overflow不能过渡

变形动画

transform:

2d变形

平移

tranform:translate(x,y);  +x 沿x轴正方向  -x沿x轴负方向  +y -y
tranform:translate(300px,0);向右300px
tranform:translate(0px,300px);向下300px

平移实现居中

不需要知道盒子的宽高

            position: absolute;
            left:50%;
            top:50%;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);

需要知道盒子的宽高

 position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;

 position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;

缩放

transform:scale(width,height);  width,height  >1 放大  < 1缩小
transform:scale(2,0.5);

倾斜

transform:skew(x,y);+x +y -x -y
+xdeg 沿着X轴的反方向倾斜
-xdeg 沿着X轴的正方向倾斜

旋转

transform:rotate(ndeg); +ndeg顺时针 -ndeg 逆时针

会使坐标系旋转

transform:rotate(ndeg) scale(1.5);
transform:rotate(ndeg) translate(100px,0px) 先旋转坐标系  然后平移  不是向右 
transform: translate(100px,0px)  rotate(ndeg);

变形中心

默认盒子中心
transform-origin:0px 0px /100% 0%/right bottom;

3d变形

坐标轴：左手定则手向下压

平移

transform:translate3d(x,y,z);  +x -x +y -y +z -z
transform：translate3d(300px,300px,300px);
transform:translateX(300px)  translateY(300px) translateZ(300px);


transform:translateX(300px);
transform:translateY(300px);
transform:translateZ(300px);

旋转

transform:rotate3d(x,y,z,ndeg);  x,y,z 向量值  
x: 在x轴方向上有旋转   +x 绕x轴正方向旋转  -x 绕x轴负方向旋转
y: 在y轴方向上有旋转  
z: 在z轴方向上有旋转 (2d旋转)

ndeg 45deg -45deg

transform:rotate3d(1,0,0,45deg)   绕x轴旋转45deg 向屏幕里躺倒
transform:rotate3d(1,-1,0,45deg)  绕面对角线的正方向旋转45deg
transform:rotate3d(1,1,1,45deg)   绕体对角线的正方向旋转45deg
transform:rotateX(45deg)  rotateY(45deg)  rotateZ(45deg)

transform:rotateX(45deg)
transform:rotateY(45deg)
transform:rotateZ(45deg)

景深

设置你的眼睛到变形物体的距离—》营造出3d空间效果 —>近大远小

perspective:0px;  800px 1000px

一般来说要加到父元素身上

把背面隐藏前面展示

backface-visibility: hidden;

关键帧动画（至少两个状态）

多个状态的动画

定义动画(关键帧描述)

@keyframes  动画名称  {  10s
    0% {
        
    }
    25%{
       
    }
    50% {
        
    }
    75% {
        
    }
    100% {
        
    }
    
    or 0% {}  100%{}两个状态  
    or from {} to{}
    
    
}

使用动画

animation:动画的名称 动画持续的时间 运动曲线  延时时间 执行次数 运动是否反向执行 执行的状态
最后一帧的状态;

动画的名称:  animation-name
动画持续的时间: animation-duration:
运动曲线 animation-timing-function
延时时间 animation-delay
执行次数 animation-iteration-count:1默认/3/infinite无限次
运动是否反向执行 animation-direction:normal正向/alternate反向
执行的状态 animation-play-state:running播放/paused停止
最后一帧的状态 animation-fill-mode:forwards停留在最后一帧/backwards回到第一帧(默认);

自动添加css3前缀的插件

autoPrefixer 快捷键 ctrl+shift+p 选择该插件 run 但是在.css文件里用！！！！

day14

弹性盒（伸缩布局）

传统布局局限:结构不灵活不能复用

弹性盒作用：一套处理常见布局的css属性（规定）规定父盒子是一个弹性盒，那么子元素就叫弹性子项然后通过给父盒子或者子项写此属性实现子项排列和对齐

有了弹性盒就不能存在float,clearfix,vertical-align,display:block/inline-block/inline

弹性盒兼容性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Ut3CLra-1615858215831)(media/弹性盒兼容性.png)]

主轴方向：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1qkQ4oX-1615858215832)(media/主轴方向.png)]

一：弹性盒父盒子身上的基础属性

1：声明父盒子为弹性盒

display:flex;

子元素此时弹性子项
默认左对齐排列
默认排列方向: 水平方向
默认主轴方向：水平方向

2:设置主轴方向

 flex-direction: row 水平/column垂直/row-reverse水平反转  /column-reverse 
flex-direction:row/column/row-reverse/column-reverse
flex-direction:row/column/

3:设置主轴方向上的排列方式

justify-content: 
         flex-start:左对齐 (默认值)
         flex-end:右对齐
         center:同时居中
         space-around: 首尾两个弹性子项的间距是中间子项间距的一半
         space-between:两端对齐中间间距平分

4:设置交叉轴方向上的排列方式

align-items:
          flex-start
          flex-end
          center
          baseline 以基线对齐
          stretch  延伸 ，占满 (默认值 在子项没有高度时会占满整个父盒子)

5.设置换行属性

就是子项宽度和大于父盒子宽度时

flex-wrap:wrap换行/nowrap不换行(默认)/wrap-revserse如果主轴方向是水平方向 多行倒置

6.复合属性 flex-flow

flex-flow:flex-direction flex-wrap;
flex-flow:row wrap;

二加在子项身上的属性

flex

功能：设置当前子项的宽度占父盒子宽度的比例没有单位

flex:flex-basis flex-shrink  flex-grow;

flex-shrink(宽度减小)

子项占据父盒子溢出空间的比例 —》子项的宽度和大于父盒子宽度时

flex-shrink:1;默认值1
flex-shrink:n;

flex-grow（宽度增加）

子项占据父盒子剩余空间的比例 —》子项的宽度和小于父盒子宽度时

flex-grow:n;(0-n)  默认值为0

flex-basis（宽度auto）

如果你没设置子项宽度值那么这个值就是根据flex-grow自动分配出来的值

如果你设置了本身的宽度值那么经过溢出或者剩余的计算所取到的宽度值

 flex:flex-grow;
 flex:1;---->flex:auto 1 1;

order属性

设置子项在主轴方向上的排列顺序

order:n; order:32; < order:42; 主轴的末尾端end

align-self

设置交叉轴方向上单个子项的对齐方式

align-self:flex-start/flex-end/center/baseline/stretch;

局部布局方案

lESS

less: less is more

less是css动态扩展语言不是为了取代css 提高css书写效率

.css --> .less 而浏览器不识别.less 写.less—>软件编译—>.css —>.html

软件编译

Koala

安装 --》设置—》简体中文 —》自动编译勾选 normal

拖拽文件夹！

Easy Less

安装EasyLess —>首选项—》设置—》搜索lesscomplie—>settings.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hdqDapiQ-1615858215834)(media/less02.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EQq086fJ-1615858215835)(media/less03.png)]

1.变量 (名字：值)

值：改变的

@变量名:200px;
    
    1.区分大小写
    2.数字+字母+下划线+$  不以数字开头

@a:300px;
@b:320px,375px,360px,414px,420px,540px;
@len:length(@b); length() 内置方法---》计算list的长度

@f:float;
@l:right;

.box {
    width:@a;
    @{f}:@l;
}
当变量用在属性名里时要加{}

类混入

.a {
    width:200px;
    height:200px;
    overflow:hidden;
}
.b {
    .a;
    background:url() no-repeat;   
}
.c {
    .b;
    
}

函数混入

.bs(@size:50%) {  @size:形式参数 不参与运算  占位  @size:50%  50%默认值
    border-radius:@size;
}
.a {
    .bs(50%); //50%  实际参数
    or 
    .bs();  不传递参数时取默认值
}
.c {
     .bs(20px)//20px
}

.box-shadow(@a,@b,@c,@d,@f){
    box-shadow:@arguments;  // @arguments 实参列表
}
.s {
    .box-shadow(0px,0px,10px,1px,red); @arguments:0px,0px,10px,1px,red
}

继承

.a {
    width:200px;
    height:200px;
    overflow:hidden;
    border:2px solid #000;
}
ul.nav li{
    //&代指父元素选择器
    &:extend(.a);
    
    background:url() no-repeat;   
}

以并集选择器的方式共用代码，减少css冗杂而类混入是直接复制代码到另一个类里造成了代码的冗余

嵌套

根据html结构将css样式也拿{}包裹起来

 <div class="box"></div>
    <!-- 轮播图 -->
    <!-- 可视区域 -->
    <div class="pic-box">
        <!-- 照片条 -->
        <ul>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
        </ul>
        <!-- 箭头 -->
        <div class="arrow" id="prev"></div>
        <div class="arrow" id="next"></div>
        <!-- 小圆点 -->
        <div class="c">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
pic-box {
    width: 100%;
    height: 400px;
    position: relative;
    margin:  0a auto;
    ul {
        width:500%;
        height: 100%;
       position: absolute;
       left: 0;
       top: 0;
       li {
           width:20%;
           a {
               display: block;
               img {
                   width:100%;

               }
           }
       }
    }
    .arrow {

    }
    #next {
        
    }
    #prev {

    }
    .c {
        span {
            &:hover {
            }
            &:first-child {
            }
            &:after {
            }
        }
    }
}

day15

移动端界面 —》自适应（不写px 大盒子%）

设备的划分

大屏: >1200px
中屏：992px---1200px
小屏：768px--992px  pad
超小屏:<768px   手机 (320px-540px)

分辨率ppi

对角线下每英寸像素点的多少

dpr倍率 =物理像素/逻辑像素;

物理像素和逻辑像素

物理像素—》设计稿

逻辑像素也叫css像素和设备独立像素—》写代码

PC端：物理像素=逻辑像素

移动端 dpr

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUBLSQDK-1615858215837)(media/手机尺寸.png)]

ios i3 和 i4

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7AYweHp-1615858215838)(media/各设备的逻辑像素.png)]

视口

视觉窗口 viewport

呈现移动端的界面

   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no ">


width=device-width 视口宽度=设备宽度
initial-scale=1.0  初始缩放比例 1倍
user-scalable=no   禁止用户缩放

常见主流布局

流式布局

原理：

布局盒子宽度% 高度auto 或者定高，小的间距可以采用固定像素，限制大的布局盒子的最大最小宽度

局限性：宽度变化，高度变化，丑没有实现文字自适应

div {
    width:100%;
    min-width:320px;
    max-width:640px;
}
图片自适应: img {width:50%;max-width:100%;}

rem布局

rem单位去自适应

rem:相对于html元素的字体单位

默认的字体大小  1rem = 16px

步骤：

知道设计稿的宽度 640px —> 预设一个字体基础值为了方便计算 1rem = 100px

html {font-size:100px}

获取屏幕宽度设置不同屏幕宽度下html字体值
量设计稿 w:320 === w:3.2rem

h5媒体查询

查询设备参数是否符合条件符合则执行{}里的代码

@media 设备类型  and (查询条件) {  screen and print
    
    样式代码
    
}

@media screen and (min-width:320px) and (max-width:640px ) {
    .box {
        bgc:red;
    }
    
}
当屏幕宽度满足大于320px小于640px时box盒子的背景色是红色

练习 ： 大屏下  box背景色红色   中屏下  box蓝色  小屏下  box 黄色  超小屏下紫色

适配文件

    <style>
        @media screen and (min-width:320px) {

            html {
                font-size: 42.67px;
            }

        }
        @media screen and (min-width:360px) {
            html {
                font-size: 48px;

            }
            
        }
        @media screen and (min-width:375px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width:414px) {
            html {
                font-size: 55.2px;
            }
            
        }
        @media screen and (min-width:420px) {
            html {
                font-size: 56px;
            }
            
        }
        @media screen and (min-width:540px) {
            html {
                font-size: 72px;

            }
            
        }
      
        @media screen and (min-width:750px) {
           /* 预设基础值 */
            html {
                font-size: 100px;
            }
            
        }
        .box {
            width: 3.14rem;
            height:2.85rem ;
            font-size: 0.5rem;
            background-color: yellowgreen;

        }
    </style>
</head>
<body>
    <!-- 750px 量出 box w:314px height:285px 50px -->
    <div class="box">字体大小 </div>
</body>
</html>

js查询

//获取当前屏幕的宽度（视口宽度）document.documentElement.clientWidth;
//计算当前屏幕对应的字体基础值  公式： 当前屏幕宽度*预设字体基础大小/psd设计稿的宽度
//给html元素的font-size属性设置字体大小

//当前屏幕宽度
var screenWidth = document.documentElement.clientWidth;

var psdWidth = 750;//设计稿的宽度  

var preFS = 100;//预设字体基础值
if(screenWidth>750){
   screenWidth = 750;
  }


//当前屏幕html字体值
var screenFS = screenWidth*preFS/psdWidth;

//给html元素设置字体大小
document.documentElement.style.fontSize = screenFS + 'px';

视口单位布局

视口单位: 具有相对性的单位相对视口的单位—> 不用查询屏幕

视口等分为100份宽度100份 100份

视口宽度: 100vw

视口高度：100vh

一个视口宽度 100vw (viewport width) 320px—>100vw 1vw= 3.2px

一个视口的高度100vh (viewport height)

假如： 750px —>100vw 1vw = 7.5px

盒子 width:280px width:280/7.5vw

375px—> 280/7.5vw*3.75

**为了方便计算：vw和rem换算 **

html {
    font-size:13.33333333vw;倍率 300px /100 = 3rem
}

量下来一个盒子在750px设计搞上如果是380px  则直接在width设置380/100rem

day17

flexible.js 自适应布局手淘团队—》引入即可自适应

px—> rem 300px—>?rem

如果是750px的设计稿那么1rem = 750px/10 = 75px

day18-day19

响应式项目

自适应：盒子宽度高度自发做调整但是并没有改变布局

响应式：盒子宽度高度自发做调整+改变布局

**精髓：**媒体查询你先写PC端然后利用媒体查询超小屏写样式覆盖PC端即可

**案例：**总共10个子项>img

PC端版心1190px 并排5个子元素

手机:100% 并排一行2个

缺点：在PC端也会加载移动端资源导致文件体积大加载的速度变慢移动端也如此

git的使用

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。

二、下载安装

https://git-scm.com/downloads

在网页中搜索地址在官网中选择自己的系统的软件下载

下载后打开安装程序：

选择自己的安装位置：

选择自己需要安装的部件：

后面的选项建议默认：

NEXT后进入到了安装界面：

安装完成后:

打开码云注册并且登录 https://gitee.com/（记住账号和密码和邮箱！！）

绑定邮箱：首先需要对配置git这个分布式版本控制系统。如图，分别输入以下代码

git config --global user.name “xxxx”

git config --global user.email “xxxx@xxxx.com”

这里的name和email记得换成自己所注册的！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RX4CBP8m-1615858215846)(media/git注册.png)]

接下来就可以管理本地代码了

方法1：在本地建库联系远程仓库

1.在你想记录或者提交的文件的工作目录下右键点击 git Bush Here

假设我有一个想提交的文件叫1.txt

弹出git命令窗口输入以下命令 git init 创建一个本地仓库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AREHM73z-1615858215847)(media/gitinit.png)]

git status 此命令可以查看工作目录下的文件

红色的颜色的文件就是修改了，但是没有提交到本地仓库的文件，我们再输入git add 1.txt回车，接着git status ，发现1.txt变成绿色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXaVFgOF-1615858215848)(media/gitadd.png)]

接着输入 git commit -m"the first version"回车，接着git status，提示说没有文件需要提交，工作区很干净。

git commit -m  "the first version"  提交暂存区文件到本地仓库  "  "里的文字说明可以根据自己提交的内容定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCuKmR3Y-1615858215849)(media/gitcommit.png)]

实现分布式版本控制系统过程是这样的：工作区——>暂存区——>本地仓库。（只有被提交到本地仓库的文件才能查看项目每个版本的信息）

git status是用来查看当前工作状态，假如有文件为红色，说明文件修改了，此时在工作区。git add AA.docx 之后文件在暂存区，git commit -m "the first version"之后文件在本地仓库并备注此版本是第一版本。

如果我们需要更新版本的话。

直接打开1.txt 修改内容并保存

此时在控制台输入git add 1.txt并回车，输入git commit -m "the second version"并回车

此时我们需要返回到第一个版本的时候怎么办呢？、

如果是大部分的修改我们很难对文件或者从程序直接修改，所以我们通过git来实现，这也体现了git 的优势。

操作如下：

控制台输入git log --pretty=oneline,查看最近提交的历史

输入**git reset --hard HEAD^**就可以回退到上一个版本（也可以输入”git reset --hard 版本号“，回退到指定版本,这个版本号就是刚才查的版本前面的哈希数，不一定要输入全部哈希数，输入一部分即可）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f2IygaWL-1615858215850)(media/回退版本.png)]

然后我们打开我们的文件查看

已经退回到了以前的版本。

如果又需要退回到刚才修改的版本怎么办？

操作如下：

输入git reflog查看修改历史

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y50djerK-1615858215851)(media/回退指定版本.png)]

记住回退版本的哈希标识的前几位：写如下命令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jnsXZpvE-1615858215853)(media/回退指定版本2.png)]

查看文件就会发现又回到了第二个版本！

接下来，将本地仓库与你的gitee远程创建的仓库进行关联

git remote add origin 远程仓库地址;  默认远程仓库名字叫origin 你也可以改此名字

这里，远程库的名字就是origin，这是Git默认的叫法，也可以改成别的，但是origin这个名字一看就知道是远程库。
然后再测试一下是否成功：

git remote

应该会输出origin

接下来，提交代码到远程仓库

git push -u origin master

方法2：在远程建库，本地下载

1.建库

git clone 远程仓库地址
git add . 添加文件到暂存区 git status 查看当前工作目录下的文件状态
git commit -m"信息描述" —》提交到本地仓库
git push 推送到远程仓库
写代码之前拉一下 git pull 保证本地仓库和远程仓库文件一致

gitee的使用

头像—》设置—》修改资料 —》ssh公钥 —》添加公钥

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKIr6SE1-1615858215854)(media/sshkey.png)]

获取公钥

git打开输入以下命令

$ ssh-keygen -t rsa -C "xxxx@xxxx.com"  你的邮箱

查看ssh秘钥:

$ cat ~/.ssh/id_rsa.pub

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gDc0jKOw-1615858215856)(media/公钥形成.png)]

day19

网格布局：

特色：二维布局多行多列布局水平方向垂直方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yotY5UNq-1615858215857)(media/网格布局.png)]

网格容器(grid container) > 单元格 (item)

由单元格组成的有效区内容区如果有3*3布局网格线水平方向4条垂直方向 4

1. 父盒子必须声明网格属性

display:grid;

没有默认样式？不知道你想要几行几列

2.列宽，行高设置

gird-template-rows:100px 100px 100px;  3行 每一行网格的高度是100px 
grid-template-columns:100px 100px 100px;  3列 列宽100px 




grid-template-rows:100px 50px 30px;
gird-template-rows:repeat(3,100px);重复  (number,大小)

grid-template-columns:repeat(3,1fr);  fr  fraction分片 1:1:1
grid-template-columns:1fr 2fr 3fr;  
grid-template-columns:30% 40% 30%;  

grid-template-columns:100px auto 100px;  3列  左列100px 右列100px  auto 中间列自适应

grid-template-columns: 100px minmax(100px,auto) 100px;  minmax(最小值，最大值)

grid-template-columns: repeat(auto-fill, 100px)表示每列宽度100px，然后自动填充，直到容器不能放置更多的列

3.区域属性

grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

如果某些区域不需要利用，则使用"点"（.）表示。

grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: column;

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

让1号项目和2号项目各占据两个单元格，然后在默认的grid-auto-flow: row情况下，会产生下面这样的布局。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iXPSA5ro-1615858215858)(media/dense后效果.png)]

justify-items 属性， align-items 属性， place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

这两个属性的写法完全相同，都可以取下面这些值。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

.container {
justify-items: start;
}

justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图完全一样，只是将水平方向改成垂直方向。）

start - 对齐容器的起始边框。

四、项目属性

下面这些属性定义在项目上面。

4.1 grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}

1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线

4.2 grid-column 属性， grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

.item {
grid-column:  / ;
grid-row:  / ;
}

下面是一个例子。

.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}

上面代码中，项目item-1占据第一行，从第一根列线到第三根列线。

这两个属性之中，也可以使用span关键字，表示跨越多少个网格。

.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}