江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. 网站建设

HTML+CSS3-详细笔记合集

admin••网站建设•阅读24

笔记批注 < !—橙色 ctrlalto 重述存在问题 --------> < !----红色 ctrlaltr 重点知识点&#xff1a;如面试题 ----> < !—浅蓝 ctrlaltb —

笔记批注

< !—橙色 ctrl+alt+o 重述存在问题 -------->

< !----红色 ctrl+alt+r 重点知识点：如面试题 ---->

< !—浅蓝 ctrl+alt+b —>

Tips:

  1. qq:ctrl+alt+a屏幕识图

  2. windows10:

    • ctrl+shift+s 提取文字
    • window+shift+s 屏幕截图

Day0621-01~0628-03*

软件准备

  1. 软件的安装
    1. 常用的编辑器 (3)
      1. Vscode H-builder sublime
    2. 汉化插件
      1. chinese
    3. 编码提示
      1. Html Css
    4. 浏览器运行插件
      1. open in browser/open in default browser
    5. 服务端运行插件
      1. live server
  2. 编辑器的设置
    1. 自动保存
      1. auto save
    2. 字体大小
      1. font-size
    3. 折行显示
      1. word-wrap on
  3. 浏览器
    1. 产看页面的常用浏览器包括?
      1. IE(edge) ,safari,firefox,Opera,chrome;
      2. edge浏览器是IE浏览器的更新
    2. 开发工程师推荐使用的
      1. chrome firefox safari
  4. 图像处理相关软件
    1. PxCook
      1. (https://www.fancynode/)
    2. Ps
      1. 功能:专业的图像处理软件，UI，产品，前端开发；

基础知识

  1. 网站与网页的关系

    1. 多个网页组成了一个网站；

  2. 网站定义：

    1. 站点：文件夹的创建
    2. 文件夹：存储小的文件和文件夹
    3. 文件：图像 word excel txt

  3. 建立站点：

    • 文件夹包括，使用用途，功能
      • css img js html
      • 存储样式文件，图片文件，js功能型交互，骨架文件
      • 文件分类，网站看起来整洁，整齐；
    • 站点命名遵守______和________
      • 规则:定义（人人必守）
        • 命名 数字英文混合，英文下划线开头，不建议使用中文
        • 可使用字母，数字，下划线（_）,连接符（-）
        • 特殊符号不可 $@^&%
      • 规范:定义（可遵守，可不遵守）
        • 见名知意：不建议拼音
          • 页面命名（4）
            • 首页/注册页/登录/详情
            • index/login/submit/detail
        • 驼峰命名
          • 多个单词组成，其他单词首字母大写

  4. 设置谷歌浏览器为默认

    1. 步骤
      1. 搜索引擎
      2. 默认浏览器

  5. 网页格式文件

    1. 后缀两种

  6. 网站的组成部分

    1. HTML部分
      1. 基础骨架
    2. CSS部分
      1. 基础骨架修饰
    3. JS部分
      1. 行为交互层

  7. html与html5与h5

    1. html 超文本标记语言：每个字母的含义，Hyper(超级)，Text(文本)，Markup(标记)，Lauguage(语言)
    2. html5： html第五个版本；
    3. h5：h5是技术的总称，包含了js，html,css各种各样的高级函数（app)

标签语言

  1. 单标签又名

    1. 样式

      1. 独立的出现，只有开始没有结束

    2. 语法

      1. < hr >
  2. 双标签

    1. 样式：

      1. 成对出现，又开始有结束

    2. 语法：

      1. <标签名 属性=“属性值”> </标签>
  3. 标签的总结：
    1. 出现:单标签独立出现，双标签结束必须带上/
    2. 标签的修饰符放在开始标签的位置除，并且与标签名字之间带上空格
    3. 属性与属性值之间的链接
    4. 属性值用引号引起来
    5. 属性与属性值之间空格隔开
    6. 所有标签放在尖角号内

标签类型一：文本修饰

  1. 加粗
    1. 语法 两种：b/strong
    2. 作用
    3. 开发选择 strong 语义化，更加明显；
  2. 倾斜
    1. 语法 三种：i/em/var
    2. 作用
    3. 开发选择 em, var不适用的原因，js中有一个关键词用来声明变量；
  3. 下划线
    1. 语法 一种：
  4. 删除线
    1. 语法一种：
  5. 角标
    1. 两种：sup /sub
  6. 文本修饰 font
    1. 属性：
      1. 颜色 color
      2. 字体 face
        1. 默认浏览器字体为：宋体
      3. 大小 1-7
  7. 空文本标签
    1. sapn
  8. 超链接
    1. 基本语法
    2. 功能
      1. 不同页面 超链接
        1. 绝对路径
          1. 文件夹
          2. 网址
        2. 相对路径
          1. 同级：./
          2. 同级文件夹下方的文件： …/
          3. 根目录： / or
          4. 灵活：…/ …/
      2. 相同页面 锚点功能
        1. 应用场景
        2. 基本语法<a href href=“#id选择器的名称”
        3. 点击区域：a
        4. 跳转区域：p
          1. 自动生成文本lorem*30自动生成书籍

标签类型二：区块划分

  1. 文本标题

    1. 特点：4 块级，独占一行，加粗，双标签
    2. 应用场景：

  2. 段落

    1. 语法：p

  3. 列表

    1. 有序 ol (older)

      1. 语法：

        <ol type='a'>
	<li></li>
</ol>

      2. 属性：

        1. type =“a/A /1/I /i”
        2. start =“5”

    2. 无序ul(unorder)

      1. 语法：

        <ul>
	<li></li>
</ul>

      2. 属性：

        1. type=“disc/circle/square/none”

    3. 自定义列表

      1. 语法：

        <dl>
	<dt></dt>
	<dd></dd>
</dl>

      2. 使用场景：自定义问答列表，图文混排,通常dt搭配多个dd使用，但不排除多个dt的出现；

标签类型三：单标签

  1. hr

    1. 取消阴影标签 noshade=“noshade”
    2. 颜色 color=“red”
    3. 宽度 width=“500px” 高size
    4. 水平对齐 align=“left”
    5. 高度 size=“500px” 不是css属性，是html标签属性

  2. br

    1. 单标签,只有开始没有结束

  3. img

    1. 基本语法：
    2. alt与title属性区别？
      1. alt图片破损的时候才会显示，不破损不显示，占页面的空间
      2. title鼠标放于图片上方才会显示
      3. 相同点都是提醒文本；不同点alt破损时才会提醒，title鼠标悬停才显示；altz占页面空间，；
      4. 推荐seo搜索引擎的优化；提高网站排名
    3. src=“” 图片加载路径包括
      1. 绝对路径
        1. 直接插入计算机的c/d盘为起点的图片的路径；
      2. 相对路径
        1. 同级关系：直接使用名称；
        2. 上级关系：上一级…/ 上两级…/…/ + 文件夹的名称 逐级向下；
        3. 根目录开始：/表示根目录；
    4. width=“宽度属性”/height=“高度属性”
      1. 实际开发的过程种不推荐使用，容易引起图片的失真变形，如果图片只设置其中一个属性的话，就会等比放大

基础代码创建

  1. !+tab英文 自动补全

  2. 手敲

<!DOCTYPE html>
<!-- doc   document(文档)  type类型  doctype(声明文档类型)   html页面文件-->
<html lang="en">
<!-- html 超文本标记语言, 所有的标记所有的标签都需要放在html里面 lang="en" -->
<head>
    	<!-- head 头部:网页的头部 -->
   		<meta charset="UTF-8">
    	<!-- meta 定义字符编码格式的 编码格式被设置成了UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<!-- 视口 -->
    	<title>我的第一个页面</title>
    	<!-- title 标题:网页的标题 -->
</head>
<body>
    	<!-- body 主体:网页的主体 所有想要给用户看的东西都需要在body显示 -->
    	我是一个粉刷匠,粉刷本领强;
</body>
</html>

Day0628-03

复习：

    1. 复习前面讲解的知识点
        1.  标签基本语法
        
        2. 标签:页面中常用的标签有哪些
        
            1.  第一模块:文本修饰标签
               - 加粗:b,strong 双
               - 倾斜:i,em,var 双
               - 下划线:u 双
               - 删除线:s,del 双
               - 角标: sup 上,双 sub 下,双
               - 超链接:a标签 双; 超链接,锚点
               - 字体修饰标签:font 双, 属性:color,size,face
               - 普通文本:span标签; 只会横向显示;

​
​ 2. 第二模块:区块划分的模块标签
​
​ - 段落:p 双
​
​ - 区块划分:div 双,纵向显示
​
​ - 标题标签:h1-h6 双; 纵向,独占,h1最大,h6最小

Day0630-04

复习

  1. 复习周四讲解的内容

    1. 列表标签

      • 有序列表

            <ol>
        <li></li>
    </ol>

      • 无序列表

           <ul>
        <li></li>
    </ul>

      • 自定义列表

          <dl>
        <dt></dt>
        <dd></dd>
    </dl>

           2. 图片标签

    <img src="路径" alt="" title="" width="" height="">

    • src=“资源” 引入路径:(相对,绝对.）

    • alt=“破损文件的提示”

    • title=“鼠标划过的时候提示”

    • width=“设置图片的宽度”

    • height=“设置图片的高度”

          3. 其他标签

    • 水平线:hr

          <hr noshade="noshade" color="red" width="宽度" size="高度" align="水平对其方式">

    • 换行标签:br ==》强制让文本换行

表单

  1. 作用：收集用户的信息；

  2. 基本语法：

    <form></form>
action="提交地址" 开发时候需要将他提交到对应的文件或地址中，例如：asp,jsp文件；
method="提交方法" get/post
target="打开方式" _black/_self/_parent/_top

  3. 基本控件：

    <input type="?"> 
type="text/password/submit/reset/button"
普通文本/密码框/提交按钮/重置按钮/普通按钮

  4. ps

    input经常搭配 <label for="id" 使用>
id代表input中的id属性；
name属性表示传输路径中等号前的内容;
value代表input中需要传输的值;

​ id与name不可混淆

CSS基本/引入

  1. 基本语法：
选择器{
	属性：属性值；
}

  1. 基本语法特点：

    • 属性和属性值需要使用冒号(:)链接;
      每一组属性和属性值结束后需要使用分号(;)分割
      建议最后一组属性添加上分号(😉

  2. 网站的组成部分：

    1. HTML,CSS,JS(骨架部分，骨架的修饰，一系列的操作)

  3. CSS定义：

    1. css本质释义为层叠样式表，cascading style sheet;页面中出现多个样式的时候会出现相互覆盖的情况；

  4. css注释：

    1. /***css的注释语句/

  5. 面试题:

    1. CSS基本语法由几个部分组成:(多,填空)

      两个部分组成:选择器;样式规则(样式声明)

    1. CSS样式规则由几个部分组成:(多,填空)

      两个部分组成:属性;属性值

    2. 样式表总共有几种?分别是?基本语法是?

      1. 样式表总共有三种。分别是:行内样式,内部样式,外部样式
        • 行内样式及基本语法:
        • 内部样式基本语法:
        • 外部样式表基本语法:

    3. 样式表的优先级是?从大到小进行排列

      • !important>行内样式>内部样式>外部样式

  6. css引入格式：

    1. 外部使用方法

      • 含义:外部使用也称之为,外部样式表,外联样式表,

      • 基本语法:把对应的CSS语法放在一个独立的以.css为后缀名的文件中,
        两个文件是独立开来的,如何产生联系呢?
        通过link产生联系

          ~~~~~~~css
  <link rel="stylesheet" href="CSS路径">
  ~~~~~~~

        ​ rel=“读取的文件” 必须携带

    2. 内部使用方法

      • 含义:把CSS的基础语法放在一个style标签里面,这个标签需要(通常情况下)放在head里面,对页面结构修饰

      • 基本语法:

        <head>
    <style>
        选择器{
            属性:属性值;
            属性:属性值;
        }
    </style>
</head>

    3. 行内使用方法

      • 含义:把CSS语法放在标签开始位置处

      • 基本语法:

        <div style="属性:属性值;属性:属性值;"></div>

        如果你的CSS语法放在标签连, 标签就是选择器,只对这一个标签修饰,引号就是花括号

    4. 总结优缺点：

      1. 外部样式表:能充分的做到结构样式分离;以独立的文件显示的修改易维护
      2. 内部样式表:可行,但是结构样式并没有充分的分离,如果代码过多的话,容易造成不必要的麻烦,来回滚动屏幕如果代码量过多的话,容易出现,头重脚轻的效果
      3. 行内样式表:能修饰元素,但是结构样式没有分离,代码看起来比较混乱,代码比较冗余;不易于维护

    5. 样式表的优先级：

      1. !important>行内样式>内部样式>外部样式

选择器01

  1. 定义:查找页面元素的一种方式方法,(方法有很多)

  2. 标签选择器

  3. 含义:通过标签,元素的名字查找页面的元素

div{}  谁叫div就匹配到谁,实现{}里面的样式
p{}    谁叫p就匹配到谁,实现{}里面的样式

  1. 优点:

    1. 直接匹配,快捷

  2. 缺点:

    1. 一下子匹配了所有的同名标签,精准度不够高，如何提高精准度

  3. class类名选择器

    1. 含义:通过给标签起class的类名,然后再CSS里面通过这个类名查找页面的元素

    2. 基本语法:

        <div class="box1"></div>
    <style>
    .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
    }
    </styles>

    查找:.box1{属性:属性值;属性:属性值;}

       3. 注意事项
   
       1. 类名中的<font color='orange'>.</font>不能省略
   
       2. 如何使用,起名字的时候, 我们通常情况多个名字共用一个class,多个名字之间使用空格隔开;
                  实现效果与代码执行的先后顺序有关系
   
       3. 不同的标签,可以起相同的类名===其实类名的精准度也不是特别高如何提高下回分解
   
       4. 起名字
   
                  以字母,数字,下划线,连接符配合使用
                  不能以数字开头,
                  不能使用中文
                  不能使用特殊符号
                  box1 bobo1  box-1 box_1
                  1box 不行
                  你好  不行

Day0703-05

选择器02

  1. id选择器

    1. 含义:通过给元素起一个id名字,然后再CSS里面通过id名字查找元素

    2. 基本语法：

      <div id="box"></div>
<style>
	#box{
        width: 300px;
        height: 300px;
        background-color: blue;
    }
</styles>

      1. 注意事项:

        • 属性不可重复：使用时,id属性任何一个标签都可以携带,但是唯独你的属性值不能重复

        • 唯一性：考虑js获取问题,为了达到js和HTML,CSS的统一,所以遵循id具有唯一性

  2. 标签选择器

    div {
width: 100px;
height: 100px;
background-color: red;
}

  3. 通配符选择器

    1. 含义:用来匹配页面中的所有的元素

    2. 基本语法:

      *{}

*{margin:0;padding:0}

    3. 作用:用来匹配页面元素取消自带的内边距和外边距

    4. 问题:

    • 直接使用*{} 多此一举;有一部分不需要取消内外边距;

    • div,span,b,u,li,dt,没有必要取消

  4. 群组选择器：

    1. 含义:

      1. 用来节约代码的,能把公共代码部分提取出来,

    2. 基本语法:

      ​ 1. 选择器1,选择器2,选择器3,选择器4{margin:0;padding:0}

  5. 结构选择器

    /*后代选择器*/
ul li {
border: 2px solid gray
}
/*子代选择器*/
ol>li {
border: 2px solid red
}
/*相邻兄弟选择器*/
e+f{
            background-color: pink;
}
/*f是e后面紧邻的兄弟元素*/

/*通用选择器*/
e~f{
            background-color: pink;
}
/*f是e后面所有的相抵元素*/
  1. 相邻兄弟选择器：
    1. 只能选出该对象的后面一个
    2. 并不是两个对象一同选出
    3. 加号前后是否有空格不影响
    4. 必须是紧挨着的兄弟，间隔的兄弟无法选出
  1. 通用选择器：
    1. 只能选出该对象后面的一个
    2. 并不是在此区间内部的兄弟对象一同选出；
    3. ~前后是否有空格不影响
    4. 必须是后面的其中一个兄弟，前面的无法选出

  1. 选择器的权重值

    • id(100)>类(10)>标签(1)>通配符(0)//虚拟的值
    • 复合类型选择器：权重值虽然相加但无法进位

  2. 面试题

    <style>
/* 1+1+1+...+1=12 */
      div>div>div>div>div>div>div>div>div>div>div>.p1 {
      color: orange
      }

/* 10 */
        .p1 {
        color: red
        }
</style>
  <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <p class="p1">你好呀我是div里面的</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Day0705-06

文本的规则

  1. 大小

    1. 语法：font-size
    2. 属性值：px
    3. 最小12px ;默认为16px

  2. 加粗

    1. 文本加粗显示:font-weight;
    2. 值：
      1. 100-900/100 400 700 900
      2. 关键词类型
        1. lighter
        2. normal
        3. bold
        4. bolder
    3. 使用原因：
      1. 方便字体使用：取消自带的加粗或者样式效果
      2. 样式结构的相互分离

  3. 倾斜

    1. 语法：font-style:
    2. 取值：italic/oblique/normal

  4. 修饰线：

    1. 语法：text-docoration （复合属性写法）
      1. 多个线条的共同使用：text-decoration:underline line-through overline;
      2. 空格隔开即可；
    2. 单一属性：
      1. text-decoration-line:line-through/underline/overline
      2. text-decoration-color:red;
      3. text-decoration-style:dotted;

  5. 水平对齐方式：

    1. text-align:left/right/justify/center; (默认值是left)

  6. 文本的行间距：

    1. line-hight:数值 px;

    2. 多行文本之间的距离：

    3. 单行文本之间的距离：

    4. 应用场景：单行文本的垂直居中：

      height: 30px ;
line-height:30px;
text-align:center;

  7. 段落开头空两个汉字的大小距离：

    1. 语法：

      text-indent:64px
text-indent:-20px

    2. 使用场景：

      1. 文本的首行缩进
      2. 文本的隐藏内部元素（相同的做法还有font-size:0 px）;

  8. 字体大小写转换：

    1. 小型==》大写：

    2. 大写字母==》小写：

    3. 所有字母==》小写：

    4. 每个单词首字母==》大写：

      font-variant:small-caps;
text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;

  9. 文本左右间距：

    1. 字符间距：letter-sapcing:
    2. 词间距：word-sapcing:

Day0705-07

文本属性：

  1. 单一属性
  2. 复合属性：
    1. 字体：
      1. font:weight style size/line-hight family
      2. font:30px 'Microsoft yahei '(必带)

背景规则：

  1. 背景颜色：
    1. background-color:
    2. 取值：
      1. 英文单词
      2. rgb
      3. rgba

  2. 背景图片：
    1. url（…/）
  3. 背景平铺：
    1. background-position:
    2. 取值：
      1. x y
      2. left right center
  4. 背景图尺寸大小：
    1. background-size: x y
    2. background-size:cover /contain 覆盖:铺满盒子为止，包含有宽或高填满盒子；
  5. 背景图位置：backgroung-position;
    1. x y
  6. 背景图的固定or滚动:background-attachement;
    1. scroll / fixed;
  7. background-repeat:
    1. no-repeat

案例：视觉差效果

  1. background-position:fixed ;

Day0707-08

精灵图

  1. 又称雪碧图，妖怪图，定义：
    1. ui设计师在页面中使用到的小图标，放在同一个背景透明的图片，通过调整背景图片的位置来实现对应图标的显示
    2. 优点：减少服务器的请求次数，减少时间/资源的耗费；请求一次过后图片缓存于浏览器当中；
  2. 精灵图的制作；
    1. 处理为透明的图片，修改为png格式的图片；

列表属性

  1. 列表的属性讲解
    1. 有序
    2. 无序
    3. css属性：
      1. 单一属性：
        1. list-style-type:
          1. square
          2. disc
        2. list-style-image:url()
          1. 实际开发几乎不用，背景图片更利于调整位置； 修饰图片覆盖type
          2. 列表 的文字与图片插入之后，位置调整不便，因此使用背景图片添加背景的图片；
        3. list-style-position:inside/outside;在文本的内部或者外部
      2. 复合属性：
        1. list-style:type image position
        2. list-style:square url(…/img/xiao.png) center;
      3. 常用：list-style:none;
    4. 什么叫做继承性：
    5. demo文本列表

浮动布局

  1. float:布局，避免品字形布局
    1. 取值：多余的class修改为id
    2. 属性：left/right/none;

Day0710-09

Border三角行的绘制

  1. none /transparent 的取值；
  2. opacity(东西变透明)

盒子模型margin/jpadding;

  1. 取0

  2. 负数

    1. padding 无意义
    2. margin 有意义

  3. auto

    1. 居中（版心，适用于普通文档流，float：不可行）

  4. 问题一：兄弟

    1. 问题1兄弟二上边距，兄弟一下边距—外边据塌陷（取最大值）

    2. 解决办法：

      1. 两个盒子加上浮动

        or

      2. 给下面盒子添加父集，父集添加

        1. float:left;
        2. position:absolute;
        3. overflow:hidden;
        4. 添加上边距/内边距/overflow-hidden/行内块/浮动

    3. 原理：

      1. 形成独立区域，区域里面设置内外边据border宽高不受干饶
      2. 横着 保持独立区域

  5. 问题2：父子

    1. 给父亲添加 以下会触发BFC存在独立区域，解决问题；
      1. float:left;
      2. overflow:hidden;
      3. position:absolute;
      4. border-top:

边框模型

  1. 单一属性：

    1. border-width:

    2. border-style:solid/double/dashed/dotted;

    3. border-color:

  2. 符合属性：

    1. border:10px solid gray;

页面的布局

  1. 通栏
  2. 版心
  3. logo使用图片
    1. 原因：需要交互

Day0712-10

页面搭建

  1. 创建css文件夹

    1. 01.css
      1. .banxin{width:966px;margin: 0 auto}
    2. public.css
      1. html,body,p,ul,ol,li,h1,h2,h3,h4,h5,table,form,dl,dt,dd,input,img{margin:0;padding:0}
      2. ul,ol,li{list-style:none;}
      3. img{display:block;}//解决三像素的留白
      4. input{border:none;outline:none}

  2. 编写页面

    1. 划分区块

    2. 分析页面

      1. –引入文件
      2. –引入的优先级防止样式的覆盖，公共样式的优先；
      3. –.log>*{margin-top:32px}好东西，简写代码；
      4. 每一个结构结束，多敲空格隔开，注释

    3. 文本水平居中，垂直居中

      1. text-align:center;lne-hight:;hight;

    4. logo旁边的小竖杠

      1. background:url(…/img/shu.png) right center;

    5. 背景颜色渐变

    6. 原点的距离省的调整距离

溢出

  1. overflow:hidden;

  2. overflow:

    1. visibile;溢出可见（默认值）
    2. hidden;（隐藏）；
    3. scroll;两边都加滚动条，无论是否超出；
    4. auto;某方向超出哪一个方向有滚动条 使用频繁

  3. 溢出的案例

Day0714-11*

复习

  1. margin与padding特殊取值；
    1. 0
    2. padding不能为负值；margin可以为负值；
    3. margin
      1. margin :0 auto;----元素位于水平居中
      2. margin:上下距离
        1. 外边距重合, 一较大值为主的;
        2. 解决思路：
          1. —给下面的盒子添加浮动;
          2. —给下面的盒子添加一个父元素,给父元素添加浮动,定位,oveflow;
      3. margin:左右的距离
        1. 距离相加: 触发了BFC;
      4. margin:父子之间的距离
        1. 也是重合;
        2. 解决问题:
          1)父元素触发BFC (添加浮动,定位,oveflow)
          2)父元素添加上边框
          3)父元素添加padding

溢出

  1. 属性：overflow:

    visible;超出显示
hidden;超出隐藏
scroll;超出滚动,默认两个没有功能的滚动条,谁溢出哪一个方向有功能
auto;  超出自动,无滚动条,只有一个方向超出,哪一个方向有功能

  2. 应用场景：

    1. 单行文本溢出显示文本

      width：**px;
overflow: hidden;
text-overflow:ellipsis; 
white-space: nowrap;

    2. 多行文本溢出显示文本开发效果；

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

      /*不要设置固定的高度*/
width:300px;
border:5px solid #ddd;
/*转换元素类型，盒子可以伸缩*/
display:-webkit-box;
/*文本竖直显示*/
-webkit-box-orient: vertical;
/*将溢出显示到第三行*/
-webkit-line-clamp:3;

元素类型–按显示形式分类

行内

  1. 不能直接设置宽高
  2. 自带间距
  3. 文本的修饰标签
  4. 原因：（为什么以上元素为行内）
    1. 浏览器内部的计算属性
    2. display取值设置了inline
    3. 控制台–conputed:查看 inline

行内块

  1. input,textarea,img,select
  2. 原因：（为什么以上元素为行内块）
    1. 浏览器内部的计算属性
    2. display取值设置了inline-block
    3. 控制台–conputed:查看 inline-block
  3. 图片属于特殊的行内块，它是横着排列

块级

  1. 独立成行
  2. 可以设置宽高
  3. div,p,h1,ul,ol,li,table,dt,dd新增的语义化（至少五个）
  4. 原因：（为什么以上元素为块级）
    1. 浏览器内部的计算属性
    2. display取值设置了block
    3. 控制台–conputed:查看 block

display

  1. 元素类型：display的取值由哪些？
    1. 常用：
      1. inline,inline-block;block;none;grid(让元素以网格形式显示)；flex(元素以弹性盒子显示)
    2. 不常用：
      1. list-item:列表形式显示 table:表格形式显示 table-row table-cell
    3. display取值大概有30多种，常用和不常见就了解这么多，如果开发时需要到了我会查阅文档

Day0717-12*

复习

  1. PC端的布局

    1. 版心:排版布局的中心位置;位于浏览器的水平中间位置;无论缩小放大位于浏览器中心位置；
    2. 通栏:有一个颜色,从设计稿的左侧通到右侧,这种效果我们称之为通栏布局；
    3. 通栏布局内: 不设置宽度,只设置高度；

  2. 溢出:

    1. 定义：元素有设置宽高,但是内容过多,导致超出显示

    2. 属性:

      overflow： hidden visible auto scroll；

    3. 案例:单行文本溢出显示省略号

          div{
        /* 1)必须要给宽度 */
        width:300px;
        /* 2)让文本不这行 */
        white-space:nowrap;
        /* 3)文本溢出隐藏 */
        overflow:hidden;
        /* 4)超出的文本显示三个原点 */
        text-overflow:ellipsis
    }

    4. 案例:多行文本溢出显示省略号

        div{
        /*注意:不能设置噶度*/
        /*1)给一个宽度*/
        width:300px;
        /*2)设置旧版的弹性盒子,变成一个可伸缩性的盒子*/
        display:-webkit-box
        /*3)控制我们相识行数*/
        -webkit-line-clamp:3;
        /*4)设置子元素的一个排列方式,垂直排列*/
        -webkit-box-orient:vertical
        /*5)超出文本隐藏*/
        overflow:hidden;
    }

  3. 元素类型:

    1. 区分:元素显示类型:
      1. 行内元素
        元素横向显示,不能实现宽度高度,
        b,strong,i,em,var,u,del,s,span,font,sup,sub,a
      2. 块级元素
        元素纵向显示,能实现宽度高度,默认独占一整行
        div,ul,ol,p,li,dl,dt,dd,table,form,h1-h6,h5新增的语义化标签
      3. 行内块元素
        元素既有行内元素的特点,也有块级元素的特点
        横向现实,还能实现宽度高度
        input,select(下拉菜单),textarea,img

元素类型1

  1. 案例：三角形的制作

  • ​ 最初使用div; 后继div会导致文本折行,必然使用浮动,反而复杂

    ​ 使用span；不能实现宽高; 必然转换类型,inline-blocK

  • <div class="box">
    更多
    <span></span>
</div>
<style>
.box{
    width: 120px;
    height:40px;
    background-color: gray;
    margin:100px auto;
    text-align: center;
    line-height: 40px;
    color: white;
}
span{
    display: inline-block;
    /* 设置宽度高度0px */
    width: 0px;
    height:0px;
    border:5px solid transparent;
    border-top:5px solid white
}
</style>
  1. 案例：a元素的居中,扩大点击面积；

  • 转换为blcok后,盛满盒子:考察继承性，块元素,没有宽度的话会独占一整行,父元素的一整行

  • 纵向撑开原因:继承line-height，不是高度

  • <div class="box2">
        <a href="#">百度一下</a>
</div>
<style>
.box2{
    width: 120px;
    height:50px;
    border: 1px solid gray;
    margin:0 auto;
    text-align: center;
    line-height: 50px;
}
/* a====行内元素 */
a{
    border:1px solid red;
    /* 转换一下元素类型 */
    display:block; 
}
</style>

元素类型2–行内块

  1. 特点：

    • 默认的垂直对其方式:基线形式对齐

    • 默认下面会有3px的留白问题

    • 解决方式：vertical-align:

      planA. 
baseline;====基线(默认值)
bottom;======底线
middle;======中线
top;=========顶线
vertical-align的取值不能为baseline即可;

planB.
改变元素的类型,更改成块级元素

元素类型3–隐藏

  1. 知识点：

    • 如何影藏一个元素（考察点:非单纯考察方法,而是考察元素占位）

    1. display:none; (不占页面空间)

    2. visibility:hidden/visible;(占页面空间)

      1. width:0; height:0;(不占页面空间)
        • 注意：内部有内容的情况下，内容会保留原地，因此配合overflow:hidden;溢出隐藏；

    3. opacity:0;(设置透明度)

    4. transform:scale(0);(缩放)

  2. 案例：二级菜单的显示隐藏

    •  ~~~~~~~~~~~~html
  <style>
         ul {
             list-style: none;
         }
 
         .list {
             width: 600px;
             height: 50px;
             background-color: orange;
             margin: 100px auto;
         }
 
         .list>li {
             float: left;
             width: 120px;
             height: 50px;
             text-align: center;
             line-height: 50px;
         }
         /* 默认情况下所有的二级都不显示 */
         .list ul{
             display: none;
         }
         /* 鼠标滑到对应的li上面的时候,让里面二级ul显示出来 */
         .list>li:hover>ul{
             display: block;
         }
         .list ul>li:hover{
             background-color: purple;
             color:white
         }
     </style>
     <body>
     <!-- 导航:二级菜单 -->
     <ul class="list">
         <li>上路
             <ul>
                 <li>亚瑟</li>
                 <li>花木兰</li>
                 <li>猪八戒</li>
                 <li>杨戬</li>
                 <li>典韦</li>
             </ul>
         </li>
         <li>中路
             <ul>
                 <li>小妲己</li>
                 <li>王昭君</li>
                 <li>安其拉</li>
                 <li>米莱迪</li>
                 <li>周瑜</li>
             </ul>
         </li>
         <li>下路
             <ul>
                 <li>鲁班七号</li>
                 <li>后裔</li>
                 <li>黄忠</li>
                 <li>马克菠萝</li>
                 <li>成吉思汗</li>
             </ul>
         </li>
         <li>辅助
             <ul>
                 <li>瑶妹</li>
                 <li>大鱼</li>
                 <li>蔡文姬</li>
                 <li>孙膑</li>
                 <li>张飞</li>
             </ul>
         </li>
         <li>打野
             <ul>
                 <li>猴子</li>
                 <li>李白</li>
                 <li>澜</li>
                 <li>兰陵王</li>
                 <li>赵云</li>
             </ul>
         </li>
     </ul>
 </body>
 ~~~~~~~~~~~~

定位1–基础

  1. 原理：元素去某位置显示；或相对于某一个位置显示

  2. 属性：

    position：
1)静态定位;
    static;默认值,普通文档流定位,
2)相对定位:
    relative;相对于自己的位置进行微调
3)绝对定位:
    absolute;
    a)子元素添加绝对定位,父元素有定位,则参照父元素,父元素没有定位则参照就近已有定位的父级元素
    b)子元素添加绝对定位,所有父元素都没有定位,则参照的事浏览器窗口左上角的body位置
        因为元素会被滚上去(卷上去)
4)固定定位:
    fixed;
    相对于浏览器窗口左上角进行位置的调整;
5)粘性定位:
    主要是想的一个效果是滚动吸顶的效果,滚动的过程中吸附在浏览器窗口顶部

  3. 搭配

    知识点:
    元素的位置发生改变,配合偏移属性
    四个偏移属性:
        top; 距离顶部有多少距离
        right;距离右侧有多少距离
        bottom;距离底部有多少距离
        left; 距离左侧有多少距离

静态

  1. static;
    1. 定义：默认的值，无任何功能，不会让元素位置发生改变
    2. top,left…偏移属性也不会生效；

相对

  1. relative;
    1. 定义：相对于自己的位置进行微调
    2. 层级：
      • 有定位比无定位元素级别高,会盖住无定位元素
      • 全都添加相对情况：默认后面的盖住前面

绝对

  1. absolute;

    1. 情况1：未搭配relative

      • 参照点：浏览器窗口左上角的body

    2. 情况2：父元素搭配relative

      • 查找父元素的位置进行调整

    3. 情况3：父元素未代培relative ,就近父辈搭配relative

      • 就近的父级元素没有定位的话,参照最近的已有定位的元素

固定

  1. fixed;
    1. 定义：相对浏览器窗口位置调整
    2. 特点：不受滚动条的滑动影响位置
    3. 应用场景：垃圾广告，楼梯导航，向上返回箭头

粘性

  1. sticky;
    1. 应用场景：滚动吸顶效果

Day0719-13*

复习

  1. 定位属性及取值：

    1. position:static/absolute/relative/sticky/fixed;

      a)相对定位 relative
相对于自己的位置进行微调

b)绝对定位 absolute
1)相对于父元素进行位置的微调
2)相对于浏览器窗口左上角的body进行微调

c)固定定位 fixed
1)相对于窗口进行位置的微调

d)粘性定位 sticky
是相对定位和固定定位的结合体

e)静态定位 static
普通文档流定位

元素的位置微调,配合偏移属性移动
top/right/bottom/left

定位2–应用：

1. relative:
	1. border-top制作三角形；三角形偏上；使用relative微调
	2. 相对于自己的原来位置微调

2. absolute:
	1. 半遮罩：
    	1. opacity:.3;z-index:1;宽度自适应，为0或者内部元素撑开；
    	2. 放置图片超过盒子
    	3. 两个div
	2. 轮播图
    	1. 左右按钮
    	2. 小原点 ul>li

3. fixed:
	1. 流氓广告,返回置顶,楼梯层,遮罩层 

    	1. fixed;一直保持在窗口的某一角，不随滚动条位置移动而改变；
    	2. <font color='orange'>父亲添加fixed,子元素添加absolute?</font>
    	3. <font color='orange'>自己添加fixed,相对窗口浏览器</font>
    	4. <font color='orange'>整个窗口的灰色遮罩层</font>
        	1. 遮罩层通常写在html布局的结束位置处;防止结构混乱；
            ~~~~~
            width:100%;
            height:100%;
            body没有内容，无高度，继承
            position：fixed;//解决办法
            //由于fixed添加后参照窗口，则有了高度；
            ~~~~~
  1. 总结：
    1. 静态定位我们几乎不用
    2. 粘性定位我们也几乎不用(只实现一个滚动吸顶的效果)
    3. 固定定位,只应用于相对于窗口位置调整的元素
    4. 剩下的我们经常使用的定位:
    5. 剩下的：子绝父相对

定位特殊情况：

  1. 情况1：

    • 固定定位或绝对定位自适应会影响宽度（内部文本），需要自己设置

  2. 情况2：

    • 浮动和绝对定位和固定定位让margin:0 auto 失效

    • （原因：浮动和该两种定位会脱离文档流，使文档不占页面空间）

  3. 情况3：

    • 所有元素都添加定位：会产生堆叠效果，默认后面覆盖之前；
    • （相对定位）有定位的层级默认更高；
    • 都添加定位,后面遮盖前面;
    • 调整层级(z-index)，取值越大层级越高，可支持负数
    • 默认z-index的取值为auto;可以理解成0

  4. 情况4：

    • 完成水平垂直正居中盒子
    1. 子元素位于父元素水平垂直正居中；
      1. left:50%;margin-left:-子的一半；
    2. 元素位于浏览器垂直正居中
  • 我的问题：fixed相对父亲盒子，父盒子是body还是六浏览器窗口

父亲是body就会滚动，浏览器窗口就不会

BFC

1. 前提：
	1. 有一个共同的父亲，垂直上面的是重合的；
2. 解决办法
	1. overflow:hidden;两种使用；（不为visible）
    	1. 隐藏
    	2. 触发BFC
	2. 使用浮动，float:且不为空;
	3. posiiton：为绝对，固定，（不为relative）
	4. display: 有值，行内块元素 (不为行内元素，none,块级)
3. 解决问题
	1. margin高度塌陷
	2. 父子关系margin塌陷
	3. 父子关系margin重合
	4. 答：我开发的项目中，哪一个项目那一块区域，出现外边据重合的问题，我是用了什么方法解决的；
4. 定义：BFC是一个绝对独立的空间,比如body，BFC的内部元素是不会影响到外部元素, 由此就可以解决margin 穿透以及margin合并的问题.
  1. 重合

  1. 塌陷：

  2. 高度塌陷

表格&表单

边框

  1. border =“表格的边框”
    1. width:;
    2. height:;
    3. width,height;
      1. 取值无单位代表像素单位；
      2. 可以设置百分比高度，高度不能直接设置百分比高度，body父盒子没有高度
    4. bgcolor=“red”;
    5. bordercolor=“orange”;
    6. 水平对齐 align=“left/right/bottom”
    7. 边框间的距离
      1. cellspacing
      2. cellpadding
      3. frame
      4. rules

Day0721-14*

复习

  1. 定位案例
    1. 位置偏移的案例(相对定位,三角形.
    2. 半遮罩,轮播图(绝对定位.
    3. 固定定位(广告位置.
    4. 粘性定位
    5. 水平垂直正居中
  2. 定位的特殊情况
    1. 绝对定位和固定定位会让margin:0 auto失效
    2. 会产生堆叠效果,默认后面覆盖前面的,需要调整层级顺序的话则需要使用z-ind
    3. 定位(绝对和固定. 也会触发BFC
    4. 定位能实现水平垂直正居中
  3. 表格
    1. 作用:用来收集用户信息的
    2. 基本语法:
      • table>tr>td 双标签
    3. 标签属性:table
      1. border=“1”
      2. width,height
      3. bordercolor
      4. bgcolor
      5. align
      6. cellspacing
      7. cellpadding
      8. frame
      9. rules

表格：行列

tr

  1. tr标签属性；

    • （只能修饰,行内式）tr
    1. height( 宽度不行，由table修饰)
   1. height="4"
2. 背景色
   1. bgcolor="red"  不是backgroundcolor
3. 水平对齐
   1. align="left/right/center"
4. 垂直对齐
   1. valign="top/bottom/middle"

td

  1. td标签属性

    • (行内式使用)

    1. 宽度

      1. 宽度影响所在列一整列单元格所在的宽度

    2. 高度

      1. 高度影响一整行单元格所在的高度

    3. 背景颜色

      1. bgcolor=“red”

    4. 单元个的水平垂直居中

      1. align=“left/right/center”
      2. valign=“top/bottom/middle”

    5. 合并

      1. colspan=“数量” 水平方向 删除格子/添加数量
      2. rowspan=“” 删除格子/前排添加数量

    • （CSS属性使用）

      empty-cells: hide;

table

  1. table（CSS属性）

    1)边框属性 :CSS 属性只能添加外边框
border:1px solid gray;
2)单元格与单元格之间的检举
border-spacing: 0px;
3)边框线合并,1px的细线边框
border-collapse: collapse;
4)表格的布局算法 
    fixed;不用每次加载计算距离大小,但是不灵活 
    auto;灵活性比较强,但是每次刷新页面的时候都需要重新计算大小 
table-layout: auto;

表格：新增标签

  1. caption(标题标签)

    <table>
    //头部
	<caption>表格的标题</caption>//插入位置,caption 无论放在表的头部尾部都会显示在之前
    <tr>
        <th></th>//列标题
        <td></td>
    </tr>
    <tr>
    </tr>
    //尾部
</table>

  2. th可以替换td

  3. 表格的行分组标签(方便数据结构分类)

    1. thead
    2. tbody 表格主体
    3. tfoot
    4. 以下代码不可实现效果的原因
    table>tr>td{
border:1px solid gray
}
/*修改后*/
table>tbody>tr>td{
}

    1. 自己写的table如果没有添加行分组一类的标签，浏览器渲染之后会主动添加tbody标签

    2. 注意事项

      1. 一个表格可以有多个表格的主体 tbody
      2. 一个表格可以

  4. 列分组

    <table>
        <!-- 写法1 -->
        <colgroup >
            <col  class="list1">
            <col span="2" class="list2">
        </colgroup>
        <!-- 写法2 -->
        <colgroup class="list1">
        </colgroup>
        <colgroup span="2" class="list2">
        </colgroup>
    <tr>
        <td></td>
        
	    <td></td>
         <td></td>
        
         <td></td>
	    <td></td>
    </tr>

    //第一列colgroup默认为第一组 列数为1
    //第二列colgroup默认为第二组 列数为2
    //span为同一组的列数 列数为2

表单基础1

  1. 定义：收集用户信息

  2. 语法：表单的一系列的控件

  3. form标签

    1. 属性

      1. action=“提交” method=“提交方法” target=“打开方式”

    2. input控件

      1. type属性

        1. text 输入框

          1. 特点：不换行

        2. password 密码框

        3. 按钮类

          1. button 普通按钮
            • button 在form表单域当中配合form的action可以实现跳转，再添加ttype="buttom"又变回普通的button了
          2. submit 提交按钮

        4. reset 重置按钮

          • value给一个值显示在按钮中，可以选中，也可以显示在文本框中
          1. image 图像按钮

        5. 单选：

          1. type=“radio” 起名后配合name
            1. name作用：命名+分类(解决共选问题)+传输与否

        6. labe fot 与id 的连用

      2. 多选

        1. type=‘checkbox’

          1. 属性

            1. enable/disabled/checked 可以直接写属性值
            • 单选与多选name都是起到分组的作用
            • 单选：解决共选问题（多选一）

        2. 文件上传

          1. type=“file”

        3. 隐藏区域

          1. type=hidden 配合属性value=“***” 可以提交上传隐藏的字段到数据库服务器中

    3. select控件

      1. 下拉菜单(默认可显示一个)

        <select>//菜单
	<option> 文本 </option>//选项
</select>

      2. select属性：

        1. size=“ ” 表示列表显示的数量 配合multiple 实现多选多个

        2. multiple属性 如果只带multiple默认显示四个选项

      3. option属性：

        1. value 推荐加上，方便js的获取
        2. selected 默认选中；
        • 只设置多个selected无法多个选中，需要辅助multiple

      4. textarea控件

        1. html中空行会显示到网页,为避免标签内部又空文本，结构页面不能折行
        2. 应用场景：
          1. 个人简历,经验,项目介绍,留言区
        3. cols 输入列数==宽度
        4. rows 输入行数==高度
          1. 文本超出所设置cols 与rows情况会显示滚动条；并且会占据空间
        5. 实际开发：不使用cols，rows直接使用width ,height;
        6. textarea style=“resize:none;” 禁止拖拽vertical/horizontal 垂直方向拖拽/水平方向拖拽

    4. 其他控件

      1. 字段集（某区域功能区域的划分）

        <fieldset>
	<legend>标题</legend>
</fieldset>

        • 使用场景：边框线上加标题 （形式：豁口标题） position:absolute同样可以实现；

      2. 浮动框架集

        1. 行内块元素 默认自带3像素的–间距

        2. 公共的头部header.html

        3. 公共的尾部footer.html

        4. 引入：

          <body>
	<iframe src="" frameborder="">
	//页面的独有代码
	<iframe src="" frameborder="">
</body>

          • iframe需要重新设置

            高度：因为iframe本身的框架比内部引入的高度高；

            转化为块级：本身为行内块元素，自带3像素边距

            取消border:iframe自带边框

          • 出现滚动条:

            iframe默认150px,尾部内容实际多于框架时就会出现滚动条，解决办法，设置高度为同高度

Day0726-15*

复习

  1. 复习一下周五讲解的内容

    1. 表格:用来展示用户信息的

    2. 基本语法:

      1. table>tr>td

    3. 标签属性

      1. table标签属性
            width
            height
            border
            bgcolor
            bordercolor
            cellspacing
            cellpadding
            frame
            rules
            align

2. tr标签属性
            height
            bgcolor
            align
            valign

3. td标签属性
            width
            height
            bgcolor
            align
            valign
            colspan
            rowspan

    4. CSS属性

      1) table
            border-spacing
            border-collapse
            table-layout

2) td
            padding
            empty-cells

    5. 表格中的一系列的标签

      1)thead,tbody,tfoot;
2)caption
3)th
4)单元格的列分组
	<colgroup span="数值"></colgroup>

  2. 表单

    • 收集用户信息的

      1)input类:<input type="?">
        输入框:type="text"
        密码框:type="password"
        按钮类型:type="submit"
                type="reset"
                type="button"
                type="image"
        双标签button
        单选框: type="radio"
        默认存在共选:name="取值"
        复选框: type="checkbox"
        文件域: type="file"
        隐藏域: type="hidden"

    • select类

      <select multiple size="显示多个">==下拉菜单
    <option value="值" selected></option>==下拉菜单选项
    <option></option>
    <option></option>
</select>

    • textarea类

       <textarea></textarea>
 CSS属性里面的宽度,高度,resize属性

    • 其他类型

      1. 字段集和字段集标题
    <fieldset>
        <legend>标题</legend>
    </fieldset>
    
2. 引入浮动框架集==行内块
    <iframe src="路径"></iframe>

宽度自适应

  1. 语法： auto/或者不设置

  2. 类型：

    1. 行内：随着内容撑开，内容决定宽度高度
    2. 块级元素：默认独占一行

  3. 不同于宽度百分百：

    1. test1：添加内边距外边据（在不添加盒子模型的情况下）
      1. 百分百表示的是与父亲盒子完全相同额外加；总宽度增加（如果是相对整个屏幕，则出现滚动条）
      2. auto自适应 宽度继承父盒子后，内容会相对减少；总宽度不变

高度自适应

  1. 语法： 元素不设置高度 或者auto

  2. 类型：

    1. 行内元素高度自适应：

      1. 文本折行
      2. 文本或者内容撑开

    2. 块级元素：

      1. 被文本或内容撑开
      2. 独立成行

  3. 应用场景

    1. 内容不设置高度导致的问题：

      1. 内容过少，导致头部与尾部连接在一起影响美观的情况：
        • 解决办法：min-height/body:100%+html:100%（背景精灵图使用过）
      2. 内容过多：

    2. 高度自适应：

      • 相关属性：

        min-height;最小的高度,不能比这个高度小，大于此高度则高度自适应
min-width;最小的宽度
max-height;最大的高度
max-width;最大的宽度
//窗口的自适应，当窗口缩放会影响元素的大小，因此宽度高度赋值推荐使用百分比为单位；
width:50%;

      通过内容撑起来li

      减少宽度/padding 使用盒子的左右内容边据

      单行文本，行高可以替代height

      蓝色标签不设置宽度，利用宽度自适应，margin left/right 将蓝盒子固定宽度；最外侧的li宽度是固定的；

伪元素选择器

::first-letter{}
    作用:匹配元素内第一个字符
::first-line{}
    作用:匹配元素内第一行字符
::before{
    content:"";
}
    作用:想元素内部正前方追加内容
::after{
    content:"";
}
    作用:向元素内部正后方追加内容

伪元素：字符

/* 如何匹配div里面第一个字符,对他进行修饰 */
div:first-letter{
    color: red;
    font-size: 30px;
    font-weight: bold;
}
/* 如何匹配修饰第一行文本 */
div:first-line{
    background-color: red;
}

伪元素：追加

/* 向前追加 */
div::before{
    content: "炳松说:'";
    color:green;
    font-weight: bold;
}
/* 向后追加 */
div:after{
    content: "方全也这么认为";
    color: green;
    font-style: italic;
}

清除浮动：

  1. 场景：高度塌陷–》浮动导致父盒子高度减少；

    1. ::after{ clear:both}
    2. 固定高度
    3. 补位置
      解决办法：
      1. 额外标签法 添加clear:both
      .wnqc:after{
      /只需要3行代码/
      content:“,”;
      display:block;
      clear:both;
      /为啥要加后面的,解决杠精的问题/
      width:0px;
      height:0px;
      font-size:0px;
      oveflow:hidden;
      visibility:hidden;
      }
      
2. overflow:hidden;//功能：溢出隐藏；解决高度塌陷;
~~~~~~~~
相关属性：
clear:
none; 不清除浮动带来的影响
left; 清除左侧浮动带来的影响
right;清除右侧浮动带来的影响
both; 清除所有浮动带来的影响
~~~~~~~~

Day0727-16*

复习

  1. 宽度高度的自适应

    1. 宽度自适应

      • 默认的情况下:width:auto;

    2. 高度自适应

    • 默认的情况下:height:auto

    1. 窗口的自适应

         html,body{
   height:100%
   }

    2. 最值属性:

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

  2. 伪元素：

    :first-letter{}
:first-line{}
:before{}
:after{}

  3. 高度塌陷:

    1. 定义：父盒子没有高度，子元素浮动之后，把父元素的高度降低

    2. 方案：

      1. 添加最小高度

      2. 清除补位元素的部位效果：clear:none/left/right/both

      3. 当所有元素都浮动的话

        • 可以自己补一个元素,必须是块
        • overflow:hidden

      4. 清除法：

        .wnqc:after{
    content:"";
    display:block;
    clear:both;
    width:0px;
    height:0px;
    font-size:0px;
    overflow:hidden;
    visibility:hidden;
    opacity:0
}

  4. 动态计算宽度高度

    1. 使用calc函数完成;

  5. 两栏和三栏

    1. 主要是想的效果:后台管理系统布局中
    2. 两栏布局
      上下,下面分成左右
    3. 三栏布局
      上下,下面分成左中右

  6. 后台管理系统的布局分析

动态计算宽度与高度

  1. 宽度：calc( 100% - 30px )
    1. 必须带前后的空格 （有弊端calc）
  2. 高度：calc(100% -200px )

两栏布局

法一：calc()
<style>
.left{
w200px
h100%
float:left
}
.right{
w:calc(100% -200px)
h100%;
float:left;
}
</style>
<body>
.top
.bot>.left+.right
</body>
法二：自适应
<style>
.left{
w200px
h100%
float:left//注意使用自适应的时候，只有靠左侧的盒子使用了浮动；
}
.right{
height:100%;
margin-left:200px；

}
</style>
  • 总结：两栏布局推荐高度使用 calc 宽度使用 自适应。

三栏布局


    <style>
        *{
            margin:0;padding:0;
        }
        html,body{
            height:100%;
        }
        .top{
            height:100px;
            background-color: red;
        }
        .bot{
            height:calc(100% - 100px);
            background-color: green;
        }
        .lef{
            width: 200px;
            /* height:200px; */
            height:100%;
            background-color: yellow;
            float: left;
        }
        .cen{
            width: calc(100% - 400px);
            /* height:300px; */
            height:100%;
            background-color: aqua;
            float: left;
        }
        .rig{
            width: 200px;
            /* height:200px; */
            height:100%;
            background-color: yellow;
            float: left;
        }
    </style>
<body>
    <div class="top"></div>
    <div class="bot">
        <div class="lef"></div>
        <div class="cen"></div>
        <div class="rig"></div>
    </div>
    <!-- 三栏布局:上下, 左中右; calc() -->
</body>

  • 总结

    1. 法一：中间的盒子宽度 100% -（左边宽+右边宽）px；

    2. 法二：自适应

      1. 中间：margin-left:200px margin-right:200px
      2. 法一：最左左浮动；最右边右浮动（不可取）
      3. 法二：调整结构：首尾的 盒子左右浮动中间的不加浮动（否则按照内容自适应给宽度）
      4. 法三：左一浮动，右一定位；

后台管理系统

  1. 宽度 使用自适应；高度使用calc()

HTML5基础

  1. 定义

    1. 超文本html5的第5个版本

  2. 区别特点：

    1. 遵循文本类型/.html/.htm为后缀名的文件

    2. 新增了一部分的内容；语义化的标签；增强型的表单，canvas绘图，svg绘图，d对应的新增一些高级的标签

    3. html5语法，字符编码格式依旧UTF-8;

    4. 不区分大小写；

    5. 单标签不用带/ br input img

  3. 部分双标签可以当作单标签使用

    1. < p > lorem 不写结尾，在下一个标签开始前都为段落;

    2. li option

  4. 所有标签都可以省略

    1. html style head 但是title 与meta-uft-8;不建议省略

  5. html5新增的内容有

    1. 语义化的标签

    2. 增强型的表单

    3. 音频和视屏

    4. canvas绘图，Svg绘图

    5. 拖拽API

    6. 离线存储和本地存储

    7. 地图功能

  6. HTML5新增的语义化标签有哪些

    1. 定义：通过名字知道意思
    2. header 双标签
    3. section 双 主体
    4. footer 双 主要内容
    5. main 双 主要内容
    6. footer 双 尾部
    7. aside 双 侧边栏
    8. nav 双 导航
    9. article 双 文章区域
    10. figcaption（无间距） 双 独立区域的标题 区别 fugure（有间距）
    11. mark 双标记区域（行内） 文本的高亮显示，荧光黄；
    12. audio 双 音频
    13. video 双 视频
    14. address 自带倾斜的效果
    • 特点：
    • 没有像p一样的上下间距
    • 方便设置元素，区块划分

Day0728-17*

复习

  1. 动态的计算宽度高度

    • 使用了动态计算的函数:calc()

  2. 两栏和三栏

    1. 两栏:上下,下面分左右
      • calc函数+浮动
      • 自适应+浮动
    2. 三栏:上下,下面左中右
      • calc函数+浮动
      • 自适应+位置调整(布局)+浮动
      • 自适应+浮动+定位
    3. 后台管理系统（两栏布局）

  3. H5

    1. 定义：HTML（超文本标记语言）的第五个版本

    2. 新增的内容包括

      1)语义化的标签
2)增强形的表单
3)音频和视频
4)canvas和svg绘图
5)新增的一些API方法
6)离线存储,和本地存储
7)地图功能

      • 语义化标签：

        header,footer,section,main,article,aside,nav,address，mark,audio,video,figure,figcaption

      • 音频和视频

        视频:<video src="路径" controls="控件" loop="循环播放" autoplay="自动博凡" muted="静音"></video>
音频:<audio src="路径" controls="控件" loop="循环" muted="静音" autoplay="自动播放"></audio>
//autoplay //自动播放（ 谷歌停用了该功能，可以使用muted解决问题 ） 
//loop 循环播放 
//muted 静止声音
//poster 缓慢加载 ，转圈儿
//controls 如果没有控件 就无法正常加载
//火狐浏览器，禁止声音和自动播放配合使用就能自动播放

      • 部分增强型表单

        基本语法:<input type="?">
1)颜色拾取器: <type="color">
2)搜索框: <type="search">
3)拨号盘: <type="tel">
4)数值: <type="number"  配合其他属性: min="" max="" value="" step="">
5)滑块:<type="range" 配合其他属性: min="" max="" value="" step="">

增强型的表单2

表单控件：待修改

//基本语法：
<input type="?">
//日期 包含年月日
input type="date"
//月份：
type="month"
//周期：
type="week"
//时间
type="time"(（基于UTC时区,分，秒及几分之一秒)
//获取本地时间(不包含时区)
type="datatime-local"
//电子邮箱
type="email"
//注意事项：
    1）在提交表单时，会自动验证 email 域的值形式
    2）没有输入值是可以跳转成功，不合理；因此添加属性:required属性,验证不能为空
    3）标准格式@ 以及后缀域名
    4）提交多个邮箱 添加属性:multiple属性,多个电子邮箱之间使用逗号隔开
//地址栏
type="url"
//注意事项：
    1)没有输入任何东西的话也会默认跳转
    2)如果输入的话,则必须按照地址栏的格式输入,
        地址就行:互联网地址,本地地址,路径地址
            http://
            ftp://
            c://
    3)如果不输入的话,直接验证通过是不合理的
        属性required
        
        待删除
input type="color"//颜色拾取器
input type="search"//搜索框 换行会被从输入的值中自动移除。
input type="tel"//拨号盘 在手机端会唤起九宫格的数字拨号盘，PC端无效果
input type="number"// 点击增加减少 搭配属性 min max value step(步长)
input type="time" //不含时区的时间控件
input type="range"
//滑动条 滑块。 应用在音频，视频，进度条，默认在中间位置,搭配属性 min max value step, 通过js获取具体的值 min可以为负数
datetime：的日期时间输入控件）。
email：
number: 用于应该包含数值的输入域。只能输入数字
range：
url：用于编辑URL的字段。
//没有输入内容也会默认跳转；
//互联网地址；本地地址；路径地址；

表单属性：

<--1)数值滑块----->
min
max
value
step=""
<--2）验证不为空----->
required
<--3)提交多个电子邮箱----->
multiple
<--4)关联属性----->
for
<--5)禁用属性----->
disabled
<--6）只读----->
readonly
<--7)自动获取----->
autofocus 高亮
<--8)自动补全信息----->
autocompleted 配合name属性
<--9）name
分组，方便js获取；分需，解决共选问题；起名字----->
<--10)autocomplete="off"----->
解决提示文本的自动补充
<--11）模糊搜索（京东数据库）----->
list 实现模糊搜索的功能 list="id"
<datalist id="city">
<option value="shanghai">上海<option>
<option value="shengzheng">深圳<option>
</datalist>
<--12）placeholder
提示文本，占位符-->

HTML5进阶：（css3新增）

css1/2回顾：

  1. css1:id选择器，标签选择器，群组选择器，后代选择器，伪类选择器
用法描述
#id选择 id=“xxxx” 的所有元素。（具有唯一性，一个页面只可使用一次）
.class选择 class=“xxxx” 的所有元素。
element选择所有 element (标签） 元素。
element1,element2可同时选择多个选择器，各个选择器中间用逗号隔开。
element1 element2选择element1的所有后代选择器为element2的元素。
:link伪类选择器，设置默认鼠标未操作过的效果。
:visited伪类选择器，设置访问过后的效果。
:hover伪类选择器，设置鼠标移入的效果。
:active伪类选择器，设置鼠标点击未释放的效果。
:first-letter选中指定选择器中的首字母
:first-line选中指定选择器中的第一行
  1. css2:通配符选择器，子代选择器，相邻兄弟选择器，属性选择器，伪类选择器；
用法描述
*选择所有元素。（常用于重置css代码）
element1>element2选中element1下的所有选择器为element2的子代元素。
element1+element2选中element1紧接的下一个同级element2元素且element1和element2拥有相同的父元素。（注意：相邻和选中一个必须同时满足）
element1~element2选中element1后的所有同级element2元素且element1和element2拥有相同的父元素。（注意：同级即可，不必相邻，可选中多个）
[element]选中带有element的元素。
[element=value]选中element属性值为value的元素。
[element~=value]选中element属性值中包含独立单词为value的所有元素，若还有其他单词可空格隔开。
:focus选中获得焦点的元素。
:first-child选中属于父元素的第一个子元素。
:before给指定选择器标签内最开始加入一个内联元素
:after给指定选择器标签内最末尾加入一个内联元素
:lang(language)选中指定元素中lang属性值开头为language的元素。
  1. css3:通用兄弟选择器、伪类选择器、伪元素选择器、否定选择器、状态伪类选择器
用法描述
element1~element2选中element1后的所有同级element2元素。（注意：与element1+element2的区别，不必相邻且可选中多个）
[element^=value]选中element属性值中前几个字母为value的元素。
[element$=value]选中element属性值以value结尾的元素。
[element*=value]选中element属性值中包含value的元素。
:first-of-type选中属于父元素的第一个指定类型的子元素。
:last-of-type选中属于父元素的最后一个指定类型的子元素。
:only-of-type选中属于父元素的仅有指定类型的元素。
:only-child选中属于父元素的唯一一个子元素
:nth-child(n)选中指定位置的子元素。(n可以是具体数字也可以是表达式)
:nth-last-child(n)选中指定位置的子元素,从最后一个子元素开始计数。(n可以是具体数字也可以是表达式)
:nth-of-type(n)选中指定位置的指定类型元素。(n可以是具体数字也可以是表达式)
:nth-last-of-type(n)选中指定位置的指定类型元素,从最后一个子元素开始计数。(n可以是具体数字也可以是表达式)
:empty选择没有子元素的元素。
:root选择文档的根元素。
:enabled选择每个启用的< input>元素。
:disabled选择每个禁用的< input>元素。
:checked选择每个被选中的< input>元素。(只有Opera浏览器支持该选择器）
:not(selector)选择非指定选择器的元素。(注意：不能嵌套，)
::selection)选择被用户选取的部分元素。

兼容

  1. 常用浏览器 5种

  2. 兼容性不好问题

    1. chrome -webkit-
    2. safari -webkit-
    3. firefox -moz-
    4. opera -o-
    5. ie -ms-

  3. ie 浏览器 依旧需要维护

渐近增强，优雅降级

  1. 渐近增强，优雅降级的定义（争对浏览器的缓慢改变的功能供给，提高体验度）
    1. 增强用户的体验度；首先建立基础功能网站，随着时间的退役，根据用户的需求，完善网站的功能。考虑兼容， 开始建立兼容性比较低的网站，随着时间，兼容高版本浏览器实现对应的功能
    2. 降低功能。网站开发时，建立功能完备的网站，随着时间，用户体验度，考虑低版本浏览器的兼容问题，逐步减低用户体验功能共给，简化网站功能。
      1. 压缩不需要的功能，排除干饶，简约，高效；

新增选择器03（属性，结构，否定，目标，ui，动态）

####　属性选择器

  1. 基本语法 .

    1. [class] 匹配所有包括类名

    2. E[class] 匹配所有div带有class的属性元素

    3. E[class=“name”] /[class=“name”] 匹配带有对应属性值的元素

    4. *(包含)or^(开始)or$(结尾)

    5. [class~=‘box’ ]多个属性值中包含box的元素

      <div class="box box1">

    6. [id|=“hh”]页面中带有对应名字子元素，名字中含有-短横线

      [id|="hh"]{}//匹配-hh
<id class='a-hh'></div>

    • 注意的：

      • ~ 与 * 不同

        • ~匹配的classmo某个类名中全部类名的固定单个类名

        • *匹配的是class某个类名中全部类名有共同部分的

结构伪类:

  1. :first-child

  2. :last-child

  3. nth-child(even偶数/odd奇数/n+1;2n+1;2n(偶数))

  4. :nth-of-type(){}

  5. :nth-last-of-type(){} //倒着数固定类型排列几个

  6. X:only-child //X元素当中，匹配下面唯一一个

    ul li a:only-child{//匹配ul内部li当中，只有一个子元素的（多于一个，少于一个匹配都不成功）
            background-color: pink;
            font-size: 34px;
        }
<ul>
    <li><a href="">我a</a></li>
    <li>我啥也不是</li>
    <li>我啥也不是</li>
    <li>我啥也不是</li>
    <li>我啥也不是</li>
    <li>我啥也不是</li>
</ul>

  7. X:root //匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

  8. X:empty //匹配没有任何子元素（包括包含文本）的元素

否定伪类

  1. :not(:first-child)

    ul>:not(:first-child){}
ul>             从当前元素里面去找目标内容
:not()          排除掉一些元素
:first-child    匹配到的是第一个元素

IE6-8浏览器不支持:not()选择器。

目标伪类

  1. ：target() //互动才会产生效果

    <style>
        ul>li:target{
            background-color: green;
            font-size: 40px;
        }
    </style>
<body>
    <!-- 目标伪类 (必须配合:锚点)
            点击a超链接，快速跳转并修改选中的target id的样式；
            基本语法:  :target
    -->
    <a href="#box1">第一张</a>
    <a href="#box2">第二张</a>
    <ul>
        <li id="box1">你好呀,我是一张</li>
        <li id="box2">你好呀,我是二张</li>
    </ul>
</body>
UI状态伪类
  1. :focus/ :enabled/ :disabled/ :checked/ ::selection用于表单控件中
    1. selection 必须使用双冒号
    2. 前几个都是用于input，最后的是文本的选中
动态伪类
E\:link     链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E\:visited  链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E\:active   用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E\:hover    用户行为选择器  选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a\:hover
E\:focus    用户行为选择器  选择匹配的E元素，而且匹配元素获取焦点

Day0731-18*

复习

  1. 增量型的表单以及对应的新属性

    1. 增强型表单

      颜色拾取器
搜索框
拨号盘
数值
滑块
日期
月份
周期
时间
本地时间
电子邮箱
地址栏

    2. 增强型表单的新属性

      min
max
step
value
for
list
disabled
readonly
autofocus
autocomplate
multiple
required

  2. css相关知识点，

    1. 渐近增强，优雅降级

      • 浏览器开发网站来说
      • 渐进增强,主要考察的事缓慢的改变增加用户的功能供给,提高用户的体验度;向未来看
      • 优雅降级,慢慢的降低用户的功能供给,视图兼容低版本的网站,向之前看

    2. css对应兼容

      属性和属性值的前缀:
    Chrome   -webkit-
    firefox  -moz-
    Opera    -o-
    ie       -ms-
    safari   -webkit-

    3. css3新增

      • CSS3是以模块化的形式进行增加的
      • 选择器
      • 新属性:多背景,渐变,过渡,2d,盒子模型,弹性盒子,网格,多列,边框等等

      1. 属性选择器

        [属性]
[属性=属性值]
E[属性]
E[属性=属性值]
[属性^=属性值]
[属性$=属性值]
[属性~=属性值]
[属性|=属性值]
[属性*=属性值]

      2. 结构伪类

         :nth-child
 :first-child
 :last-child{}
 :nth-of-type(){}
 :nth-last-of-type(){}

      3. 否定伪类

        :not(被排元素)

      4. 空伪类元类

      5. 目标伪类

        :target{}

      6. 动态伪类

      7. 活动链接

新增选择器04（空伪类，根目录结构伪类）

空伪类选择器(结构伪类)

  1. :empty 选中 指定元素，没有任何元素

    • 回车也算内容

    • div:empty{background-color:red;}
<div>

</div>//无法匹配//回车算换行符，同样是内容

  2. ：only-child{}

根目录伪类(结构伪类）
  1. ：root 匹配页面有且仅有的一个也就是html页面
    • 场景：开关灯
<style>
/* 
1)匹配获取焦点的元素，谁获取到I焦点，谁被匹配到
*/
input : focus{
	background-color: 0 red; /*选中聚焦的表单*/
}
/* 
2)获取到禁用的元素*/
 input :disabled{
	 background-color: orange ;
     appearance:none;
} 
/* 
3)匹配可用元素*/
input:enabled{
	background-color: green;
    
    
/* 
4)选中效果*/
p::selection{
	background-color:orange;
}
/*
5)修改选中效果*/
    [name="marry"]:checked{
        appearance: none;
    }
    /*主要应用于单选框或者复选框，
    场景：选中修改选中的背景图达到修改样式的目的
*/
</style>
<body>
    用户名: <input type="text" autofocus> <br>
    密码框: cinput type= "password"> <br>
    确认密码: <input type=" password"> <br>
    电话号码: <input type="tel"> <br>
    电子邮箱: <input type= ”email"><br>
    <input type= ”submit"> 
    <input type= ”reset">
    <input type=" button" value=" 普通按钮" disabled>
    <p>
    </p>
</body>

  1. 勾选换图的效果

    
    <!-- 要求:修改:婚否的单选框为购物车样式的选矿 -->
    <!-- 如何找到婚否? 使用的属性选择器,name属性-->
    <style>
        /* 找到元素,取消默认样式,取消完毕后设置自己样式 */
        [name="marry"]{
            /* 取消默认样式 */
            appearance: none;
            /* 设置自己的样式 */
            width: 30px;
            height:30px;
            border:1px solid gray;
            border-radius: 50%;
        }
        /* 修改选中样式 */
        [name="marry"]:checked{
            /* background-color: red; */
            /* 想要使用图片我们就使用背景图 */
            background-image: url(../img/111.png);
            /* 用来调整背景图片尺寸大小的, cover覆盖,会把这个区域铺满,如果你的图和元素不成正比例的话则会被裁剪 */
            background-size: cover;
        }
    </style>
<body>
    <!--问题:属性选择器:-->
    用户名:<input type="text"> <br>
    密码框:<input type="password"> <br>
    婚否: <input type="radio" name="marry">已婚 <input type="radio" name="marry">未婚 <br>
    性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女
</body>

属性继承

  1. 定义：html可以从父元素位置继承一部分css属性；即使当前元素没有定义该属性；
  2. 分类：
    1. 字体系列： font,font-family,font-weight,font-size,font-size
    2. 文本系列：text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,color
    3. 元素可见性：visibility
    4. 表格布局属性：caption-side,border-collapse,border-spacing,empty-cells,table-layout;
    5. 列表布局属性：list-style-type,list-style-image,list-style-position,list-style;
遗忘的知识点：	
    contain：缩放背景图片以完全装入背景区域，可能背景区域有部分空白。
    cover：缩放背景图片以完全覆盖背景区域，可能背景图片部分看不见。
    appearance: none;取消默认样式，使用background-image:设置自己的样式；

字体模块

字体引入

  1. 格式：ttf后缀

    1. DaFont (www.dafont) :提供了大量的免费字体，可以按照不同的分类进行浏览和下载。
2. FontSquirrel (www.fontsquirrel) :提供高质量的免费字体，其中-些字体还可以用于商业用途。
3. Google Fonts (fonts.google) : Google提供的免费字体库，包含了各种风格的字体，可以直接在网页中使用或下
载到本地。
4.1001 Fonts (www.1001fonts) :提供了大量的免费字体，可以按照不同的分类进行浏览和下载。

  2. 字体的引入语法：

    @font-face{
 font-family:自己取的字体命名；
 src:url(../字体文件夹/);
 font-weight:normal;
}
div{
/* 设置字体 */
font-family: 勇体;
}
字体图标

  1. 定义：遵循字体所有属性的常用图形

  2. 网址：

    1）https://icomoon.io/
2）https://www.iconfont/ 阿里字体图标库

  3. 使用

    1. 我们可以去案例图标，把而要的东西添加到购物车页面

    2. 点击购物车图标，点击下载代码/不要下载素材;

    3. 把对应的压缩包解压之后的文件夹，直接放在站点即可

    4. html页面

      <!---使用方法一：
	1. 若字体的大小不生效，将站点下的字体文件夹的字大小16px注释掉---->
<!-- 4.1使用的图标:先要引入-->
<link rel="stylesheet" href="../font_ 4ehum60kkms/iconfont .css">
<style>
*{
    margin:0;padding: 0;}
box{
    width : 200px;
    height :200px;
    border:10px solid 0 gray;
    font-size: 150px ;
    text-align: center;
    line-height: 200px;
    color :#red;
    }
box:hover{
    background-color: 0 orange;
    color:■white ;
	}
</style>
<body>
    <div class="box iconfont icon-heart"></div> 
    <!--4.2 iconfont 不能省略 是大的图库的名称-->
    <!--4.3 打开iconfont.css 检查是否需要注释掉font-size:16px的代码--->
</body>

    5. 阿里巴巴字体图标库如何添加新的内容：

    6. 阿里图标库iconfont下载和在旧有的iconfont中添加新的图标_已下载好的icon图标,再下载新的图标怎么放进去_cherry_vincent的博客-CSDN博客

    7. 下载好的文件，打开iconfont.css除开引入字体的.iconfont{…}这一段不用粘贴进来都需要，拷贝进来即可；

    8. 疑惑：

      1. 如果字体图标的引入link放在style下方会发生的情况–同样也能实现/但是需要注释掉iconfont.css中的16px
      2. 不会在图标库当中添加新的字体图标
文本特效

  1. 文本的阴影

    text-shadow:h-shadow v-shadow blue color;
h-shadow: horizontal-shadow; 水平向右方向的距离 
v-shadow: vertical-shadow; 垂直向下方向的距离
//总和右下角
blue: 模糊距离；
color: 阴影颜色；

  2. 特殊的

    1. 添加多个方向的影子，中间用逗号隔开；取值在前则层数在上；

      text-shadow:-5px -5px 5px red,5px 5px 10px blue;

盒子特效

  1. box-shadow:

  2. 取值：

    box-shadow:h-shadow（水平移动距离）  v-shadow（竖直方向距离）  blur（模糊距离） size（阴影扩大的大小） color inset（内阴影）；

  3. 特殊的，多个阴影中间用逗号隔开：

    box-shadow:10px 12px 5px red, -10px-10px 15px blue;

  4. demo

    .box{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: orange;
    box-shadow:10px 12px 0 red, 20px 20px 0 black;
}

多背景模块

  1. 语法：

    background: bgcolor url() no-repeat posiiton/size fixed；

  2. 先写的图片在前，显示时在上面：

    background: bgcolor url() no-repeat posiiton/size fixed,bgcolor url() no-repeat posiiton/size fixed；

  3. 使用场景：

    1. 信封（多背景重叠）： 控制大小居中重叠

多列模块(css3新增)

  1. 语法：column-?

  2. 应用场景

    1. 报纸，杂志，瀑布流（懒加载）

  3. 使用：

    div{
border:1px solid #ddd;
height: 400px;
/*
1) 划分列数：
*/
column-count:3;
/*
2）
调整列之间的间距：通常不修改
*/
column-gap:20px;
/*
3）
调整列宽 列宽较宽，会影响列数
*/
column-width:100px;
/*
4)
调整列间隔线
*/
column-rule:4px solid red;
/*
5)
调整列的纵向高度：
默认情况，高度时均分的 ==》填充列
*/
column-fill:auto;
}
h1{
/*
6）跨列数：
line-height: 100px;
background-color: orange;
text-align: center;
*/
    column-span: all;
}

Day0802-19*

复习

  1. CSS3 选择器讲完

  2. CSS3 其他模块

    1. 字体模块

      @font-face{
    font-family:命名字体;
    src:url();
}

    2. 字体图标模块

      • 下载对应的字体图标,通过起类名的形式来进行添加字体图标

      • 阿里字体图标库官网

    3. 多背景模块

      background:url() no-repeat,url() no-repeat;

    4. 文本特效

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

    5. 盒子特效

      box-shadow:h-shadow v-shadow blur size color

    6. 多列模块

      column-count
column-width
column-gap
column-fill
column-rules
column-span

边框模块

  1. 多角属性值：圆角+值的个数+方向：

    border-radius:v1;==========四个角圆角;
border-radius:v1 v2;=======四个角圆角;	v1:左上;右下;v2:左下,右上      V1:\   V2:/
border-radius:v1 v2 v3;====四个角圆角;	v1:左上;v2右上,左下;v3:右下	   \拆开+/+\拆开
border-radius:v1 v2 v3 v4;=四个角圆角;	v1:祖上,v2右上,v3右下,v4左下   顺时针

  2. 单角属性值：

    1.
border-radius:30px 0px 0px 0px；
2.
单角属性:只设置一个角
    border-垂直-水平-radius:
    左上角: border-top-left-radius:
    右上角: border-top-right-radius:
    右下角: border-bottom-right-radius:
    左下角: border-bottom-left-radius:

水平/垂直半径

  1. 语法：

    1. 两个值：border:水平px / 垂直px;

  3. 一个值：border-radius:30px；

    1. 代表水平垂直半径相同 都为30px;

  4. 八个值：border-radius:x1 x2 x3 x4/y1 y2 y3 y4

    1. 按照顺序依次设置水平垂直的半径

常用图形+px+%

  1. 正圆

    1. 通常：正方形使用百分比为单位；
    2. 百分比表示所在位置某方向的占长或宽的比 如：水平半径占盒子宽度的百分比；
      1. 50% 常用值；

  2. 椭圆

    1. 通常：长方形使用px为单位；

    2. px 为单位：直接表示横向纵向半径的取值；

      1. height/2 px常用值；
      2. 在添加了border的情况下不能忽略 height/2+border px

    3. （__）绘制

       	*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 100px;
            border: 10px solid gray;
            border-radius: 60px;
        }

      ​

多列模块

  1. 属性值：

    1)column-count
    划分列数
2)column-width
    设置列宽:但是如果列宽较大则影响列数
3)column-gap
    调整列间距
4)column-rules 
    调整设置列间隔线类似于边框属性
5)column-fill
    调整列的高度是否实现自适应
6)column-span
    合并列,跨列

  2. 应用场景：瀑布流+报纸排版；

盒子模型

  1. 定义：计算盒子大小,和实际占位

  2. 盒子模型分类：标准盒子模型,怪异盒子模型

  3. 怪异盒子模型：改变了盒子模型的计算方法,解决盒子被撑大的问题

  4. 盒子模型组成部分：

    1. 4个。内容（width/height）；内边距(padding)；外边据(margin)；边框（border）；

  5. 标准盒和怪异盒区别：

    1. 标准盒子
      • 实际宽度=width+左右padding+左右border+左右margin
      • 实际高度=height+上下padding+上下border+上下margin
    2. 怪异盒子
      • 实际宽度=CSS.width(包含了width和内边距和边框)+左右margin
      • 实际高度=CSS.height(包含了height和内边距和边框)+上下margin

  6. 怪异盒的触发：

    1. box-sizing：border-box(怪异)/content-box(默认)
    2. 通常是局部使用

弹性盒子布局：flex

  1. 定义:弹性盒子主要的内容:通过触发弹性盒子,然后改变元素的排列方向

  2. 具有伸缩性:弹性盒子布局:flex布局(移动端布局)

  3. 触发:

    1. display:flex;
    2. 研究触发弹性盒子

  4. filex的特点:

    1. 子元素横向显示

    2. 行内元素转换为块级

    3. flex配合margin:auto;水平垂直正居中;

  5. 概念:

    1. 容器:最大的父元素盒子

    2. 项目:项目就是内部最小的盒子

    3. 横轴:X向左 为㊣

    4. 纵轴:Y向下 为㊣

    5. 主轴:默认的排列方向

    6. 策州:主轴对立的方向

  6. 使用:

  7. Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng)


父元素{
/*触发弹性盒子:*/
display:flex;
/*主轴方向:*/
flex-direction:column/row(默认);
/*
}
子元素{
/*分布所占份数*/
flex:1

}
  1. 属性属性值之布局
触发:
display:flex;
主轴方向:
flex-direction:
	row;
	row-reverse; //倒着排,并且从最末尾开始;离开头最远;
	column;
	column-reverse;
调整主轴上的对齐方式:
	justify-content:;
		start;			
		center;		 //居中
		space-between;//均分,头尾顶到尽头
		space-around; //均分,头尾有距离
		space-evenly;//
调整侧轴上面的对齐方式:
	justify-item:;		
		stretch;	   //拉升:条件在侧轴上的子元素没有固定
		center;        //居中
		flex-end;	   //
		flex-start;	   //默认
		baseline;	   //基线;
调整单独某个元素在侧轴的位置: .yellow 通常指定某个元素;
	align-self:;
		flex-start;
		center;
		flex-end;
		baseline;
		stretch;

单行侧轴的对齐方式:
	align-items:;
		flex-start;
		flext-end;
		center;
		baseline;
		stretch;

多行位置的调整(行间距):
	align-content:;
		flex-start;      //侧轴的开始   (未分开)
		flex-end;		//侧轴的结束   (未分开)
		center;			//侧轴的居中	  (未分开)
		space-between;   //侧轴的两端对齐(分开的)
		space-around;	 //两端环绕
		space-evenly;	 //行行之间的距离贴边与父元素的距离时相等的

折行:
	flex-wrap:;
		wrap;			//父盒子有固定高度,因此有较大的行间距
		nowrap;			//默认值,不折行
		wrap-reverse	//折行,第一排在最下main,倒着显示  //容易忘记

不挤压不折行:
	flex-shirink;
		1(默认值)
		0(取消挤压)
		应用场景:电视头部的导航栏;
flex-direction 与 flex-wrap:组合元素:
		flex-flow:
			row wrap;//记得中件没有空格
			column-reverse wrap

//justify-items与 align-items 的区别

//display:flex;配合margin:auto;无法居中的问题;

  1. 属性属性值之排序
项目属性
1. 对子元素进行修饰;
	1)调整顺序:
		order:1/2/3/...        //竖值越小,排列越前;
2. flex:1;的使用
	1) 给其中一个子元素赋该值;	   //站所有其他盒子剩余的主轴比如宽度的所有
	2) 给所有子元素赋该值;		//按比例分配作战主轴;宽度或高度
  1. 案例：

没有设置高度的元素是默认拉升

Day0802-20*

复习

  1. 多列的案例

    • 瀑布流效果,新闻页面排版

  2. 怪异盒子

  3. 盒子模型种类：组成部分：二者区别：

    • 盒子模型共分为两类:

      • 标准盒子模型

      • 怪异盒子模型

    • 盒子模型总共几个部分:

      • 四个:
        • 内容区域(width,height)
        • 内边距区域(padding)
        • 边框区域(border)
        • 外边距区域(margin)

    • 二者之前的区别:

      1. 触发弹性盒子,改变原有盒子的计算方法;怪异盒子,不会把盒子撑大

      2. 标准盒子:

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

      3. 怪异盒子:

      • 实际宽度=CSS.width+左右margin
      • 实际高度=CSS.height+上下margin
      • 触发：box-zising:border-box(怪异)/content-box(标准盒子)

  4. 弹性盒子

    1. 容器属性:
      1)display:flex
      2)flex-direction:row/row-reverse/column/column-reverse
      3)justify-content:flex-start/flex-end/center/space-around/space-between/space-evenly
      4)align-itmes:flex-start/flex-end/center/baseline/stretch
      5)flex-wrap:wrap/nowrap/wrap-reverse
      6)align-content:flex-start/flex-end/center/space-around/space-between/space-evenly
    2. 项目属性:
      1)order:number
      2)flex:1
      3)align-slef

阿里面试题flex

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ddd;
        }
        .box{
            display: flex;
            width: 100%;
            height: 100px;
        }
        .box::after{
            content: '.';
            flex: 1;
            font-size: 0;
        }  
        .box>.boxIn:nth-last-child(1){
           order: 1;
        }
        .boxIn{
            width: 10%;
            height: 100%;
        }
    </style>
<body>
    <div class="box">
        <div class="boxIn"></div>
        <div class="boxIn"></div>
        <div class="boxIn"></div>
    </div>
</body>
<!--
1. 注意要点：盒子的after元素添加在大盒子后面，此时flex变为块级之后，才会生成内部的多余小块；css
2. 除此之外：order的提升权重等级很重要；配合flex:1;-->

移动端布局1

  1. 移动端定义：

    1. 可以移动的设备被称之为移动端;移动设备:手机，平板，kindle,电话手表
      目前来看我们针对: 手机端,偶尔ipad端进行开发

  2. 查看移动端开发的产品内容:

    • 真机：

      • 开发的时候,我们会在多终端进行真机测试，多种手机型号中测试效果;
        目前米有我们，使用的事浏览器据供给我们的设备模拟器来实现的开发

    • 模拟器：

      • 查看移动端，开启设备模拟器的方法：
        大部分的网站通过开始设备模拟器(右链,检查==两个小方块)通常情况下会刷新页面

      • jd   ===  m.jd
lagou ==  m.lagou
刷新的时候主要是为了:检测你的设备,屏幕大小的改变,改变了屏幕尺寸,会自动切换到我们移动端布局上面

  3. 浏览器的页面参数介绍：

    1. 手机型号：
    2. 手机屏幕尺寸：
    3. 旋转横屏：
    4. 竖着三个点：
      1. Setting-devices add curstorm device…(自定义手机型号)
      2. 右上角三个点，
        1. capture screenshot; 截图当前窗口
        2. capture full size screenshot; 截图带有滚动条的图

  4. 手机知识小科普

    1. 手机屏幕==》高清屏幕==》分辨率

  5. 手机屏幕与设计稿的尺寸关系

    iphone4     ====640*960    2
iphone5     ====640*1136   2
iphone678   ====750*1334   2
iphone678s  ====1242*2208  3
iphone12pro ====1170*2532  3
    1. 倍数关系总结:

    • iphone45678:手机型号中,设计稿是屏幕的2倍;

    • iphone678plus及以上手机型号:设计稿是屏幕的3倍

    • 注意:iphone3及以前的手机型号,是1倍的比值放进去的;

  6. dpr 宽度1个设备像素点能够装的图片设计稿像素点的大小

  7. 设备像素比:

    • 设备像素比: dpr=物理像素/css像素

    • dpr固定的值，在设备出厂之前就已经固定的 2或3或4

    • 物理像素:设计稿里面测量出来的距离大小，

    • CSS像素:每次编码的时候，代码里面编写数值

PC__移动端：

pc移动端的问题：

  1. 屏幕窗口了面能容纳一个大网页页面但是文字显示不清晰；

    1. 造成原因：手机窗口的390px; 需要显示宽度为700px

  2. 双击屏幕放大：

  3. 产生原因：

    1. 视口不同导致

视口分类及修改：

  1. 视觉窗口：

    1. 观看的区域大小，手机屏幕大小

  2. 布局视口：

    1. 编写页面的大小内容区域；

  3. 理想视口：

    1. 理想化的视口解决以上问题，就是一块代码；

    2. 语法：

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

      设置理想视口
    name="viewport"     触发理想视口
    width=device-width  宽度等于设备的宽度
    initial-scale=1.0   初始缩放比例为1.0
    minimum-scale=1.0   最小缩放比例为1.0
    maximum-scale=1.0   最大缩放比例为1.0
    user-scalable=no    用户缩放比例为不允许缩放

移动端开发流程

  1. 开发步骤：必背

    1. 确定设计稿的出自的屏幕

    2. 确定dpr

      1. css像素=物理像素/dpr(固定) 每次测量的距离出一2或3

    3. 引入css

      1. public.css/iconfont.css/index.css

    4. 修改视口
      1.

    5. 编写代码

      1. html部分

      2. css部分

        /*必备*/
html,body{
	height:100%//
}
body{
	display:flex;
	flex-direction:column;
	//防止header section footer 标签由于flex布局而横向排列
}
section{
	flex:1;
	//移动端内使用此属性；
	//以往使用calc(100% - header -footer );
}

  2. 快速制作移动端实战（养成固定的步骤习惯，不容易忘，却不会喽）

    1. 去掉顶部电量时间栏

    2. ps处理 网格线划分header section footer

    3. public页面

      *{
margin:0;padding:0 
}
ul,ol,li{
list-style: none;
}
img{
display: block;
}
input{
outl ine: none 
/★
万能清除法*/
，wnqc:after{
content:"n
display:block;
clear :both;
width:0px;
height :Opx;
font-size :Opx;
overflow: hidden;
visibility: hidden;
opacity: 0;
transform: scale(0);
}

    4. 测量ps设计稿的页面宽度为750 iphone678

    5. dpr=2

    6. css像素=测量距离（物理像素）/dpr

    7. 引入font文件，（font内的文件不要动，直接放入根目录）

    8. 引入css public index

    9. 修改视口；

    10. html ==》 header+nav+section;

      <header>头部</header> 
<nav>导航</nav>
<section>主体< /section>
<! --
1 )确定屏幕大小750 iphone678
2 )dpr=2
3 )CSS像泰-测量距离物理像泰)/dpr(2)
4)引入CSS
5 )修改视口
6)编写代码

    11. css==》

      html , body{
height: 100%;
}
/*父元素变成弹性盒子★/
body{
display: flex;
/+调整主轴+/
fLex- direction: coLumn;
}
/*设置头部★/
header{
	height:40px;
}
/*设置导航（尾部）*/
nav{
	height:40px
	background-color:yellow;
}
/*设置主体*/
section{
	flex:1;
	background-color:
}
/* 设置头部里面的内容 */ 
header{
    /*设置弹性盒子*/
    display: flex;
    /*主轴对其方式★/
    justify-content: space-between;
    /*侧轴对其方式*/
    align-items: center; /////////1
    padding:Bpx 17px;
    font-size: 18px;
}
header>:nth-child(2){
font-weight:bold;
}
/*导航区城*/
nav{
display: flex;
/*灌出滚动*/
overfLow: auto;
align-items: center;
nav>span{
fLex-shrink: 0;////////////2
margin:0px 25px
}
/*隐域滚动条*/
nav:: -webkit-scrollbar{
display: none;
}
/*设置间距*/
/+设置主体区域+/
section{
    padding: 12px;
    padding-bottom: Bpx;
}
main{
    height :65px;
    background-color:■yellow;
    display: flex;
}
main>img{
	margin-right:8px;
}
main>div> :nth-child(1){
    font-size: 14px;
    font-weight: bold;
    margin-top: 11px ;
    margin-bottom: 5px;
}

    12. 一些值得注意的：

      ///////////1
盒子没有设置宽度时候为自适应；
因此header盒子不使用怪异盒，控制padding影响
////////////2
文字间距奇怪：不挤压不折行 flex-shrink:0;
////////////3
超出宽度后整个页面都可以左右移动
依次添加：overflow:auto; 添加滚动条
隐藏滚动条：
////////////4
-webkit-scrollbar
////////////5
通常不会使用px固定单位
////////////6

    13. 作业分析：

      main 装p*3

      between + padding配合 ==》尾部

      flex:center + 左箭头的定位==》头部

      //提高左箭头的层级

      //否侧中间的文字不能居中

Day0807-21*

复习

  1. 移动端的基础理论知识

  2. 移动端布局的步骤,布局的时候;

    1. 设计稿屏幕

    2. 确定dpr

    3. css像素=物理像素(测量的距离)/dpr（设备的像素比）

    4. 引入对应的CSS(publick.css/iconfont.css/index.css)

    5. 修改视口

      • (原有代码的基础上,增加:minimum-scale=1.0,maximum-scale=1.0,user-scalable=no)

    6. 编写代码

      • HTML代码部分
           <body>
          <header>头部</header>
          <section>主体</section>
          <footer>尾部</footer>
     </body>
      • CSS代码部分
            html,body{
          height:100%;
      }
      body{
          display:flex;
          flex-direction:column;
      }
      header{
          height:50px;
          background-color:red;
      }
      footer{
          height:50px;
          background-color:orange;
      }
      section{
          flex:1;
          background-color:greenyellow;
      }

布局中常见的单位

  1. 固定单位：px

  2. 相对单位：em

    1. em单位的使用，参照自己或是父元素字体大小缩放的相对倍数；
    2. 应用场景：宽度，高度，间距，边框
    3. 如果没有父亲元素的字体大小：1em=16px

  3. 相对单位：rem

    1. 参照根目录的字体大小；

      html{font-size:**px} 为参照

    2. yi给你用场景 rem单位可以应用在宽度，高度，间距，边框上面；

  4. vw/vh 视口相对百分比

    1. vw
      1. viewport-width 视口宽度（手机屏幕的宽度）
      2. 100vw一个完整的视口宽度
    2. vh
      1. viewport-width 视口高度（手机屏幕的高度）

  • 应用：

            div{
            /* width: 300px;
            height: 300px; */
            width: 50vw;
            /* 表示屏幕宽度一半  */
            height: 50vh;
            /* 表示屏幕高度一半  */
            /* 特点：与100%不同  100%的参照是父集，是灵活的*/
            /* vw vh 参照永远是视口，相对是固定的 */
            background-color: red;
        }
//////////1. width与height:能共同使用vw吗？ 能 ，共同使用vw较多，达到元素成正方形的状态
//////////2. 百分比与vw,vh的不同点；
//////////3. vw 与vh应用场景包括宽度,高度,字体大小,间距边框等
  1. vmin 参照屏幕的最小边进行参照
  2. vmax 参照屏幕的最大边进行参照

单位转换

  1. px与rem

    1. 默认情况： html 1rem=16px

    2. 公式：rem=物理像素/dpr/根目录字体大小

    3. 案例：html{font-size:20px} 则 1rem=20px

    4. 媒体查询：

      1. rem单位；
      2. 结合响应式布局，即媒体查询

    5. 案例：争对iphone4开发：

      1. css像素=100/2 *100/2 =50px * 50px
      2. w=100/2/16=3.12543m h=100/2/16=3.125rem
      • 计算每次不同，rem每次都有小数;

    6. 解决办法：

      1. 针对：多数dpr为2时；凑整
        1. 根目录字体设置为50px
      2. 针对：dpr为3时；cou整
        1. 根目录字体设置，使用flex.js文件；

    7. 额外的：

      1. html 与body 的字体大小双重设置；

    8. 使用flexble.js的步骤；

      1. 原理：flexible.js 原理解析(看了不会忘) - 掘金 (juejin)

      2. 引入css

      3. 引入js

        link public.css
link iconfont.css
link index.css
<scritp src="../js/flexible.js"></script>
原理：
1. 获取初始,最小，最大视口宽度

      4. 注释原有视口

      5. 编写代码

        1. html

          <!--
///////////1.映入代码后此时编写的代码直接除以100即可；-->
物理像素/dpr/根目录字体大小=rem 
///////////2.input可以直接设置border不用套盒子
///////////3.拉伸+flex:1所以 section有高度为1
///////////4. 左侧独立滚动： 右侧独立滚动 ； 整体独立滚动
///////////5. 字体大小没有手动设置的是不会灵活变化的
///////////6.伪元素 做下边框

  2. px与vw的转换

    1. width:1vw;===代表整个窗口的宽度百分之一

    2. 计算：px

      1. iphone4 320px=100vw;  ==》3.2px=1vw ==》1px=0.31125vw
   1px=0.3125vw;
   100px=31.25vw;
   
2. iphone5


3. iphone678

Day0809-22

复习

  1. 常见单位
    1. px，em,rem,vw,vmin,vmax
  2. 单位转换
    1. rem和px单位转换
    2. 根据目录字体大小
  3. 新的单位及布局
    1. 使用px-to-vw:
    2. 转换快捷键 alt+z;

响应式布局

  1. 常见布局方法：

    1. 固定布局：px
    2. 可切换布局：
      1. 通过识别屏幕尺寸浏览器宽度，选择合适布局，制作多种布局方案
    3. 混合布局：px+%; 横向calc 竖向
    4. 弹性布局：
      1. 百分比作为基本单位；
    5. 响应式布局：
      1. 兼容各个终端，根据屏幕大小，实现不同样式布局；根据媒体查询检测屏幕大小。

  2. 响应式布局方案：

    1. 挤压–拉升： 布局不变；宽度修改；
    2. 换行–平铺：一列到多列之间的转换；行到列的切换；
    3. 删减–增加：少列到多列；都是竖向到多列转换；某个竖向转换为多列，横向固定
    4. 隐藏–显示：增加模块
    5. 布局模块位置改变

  3. 响应式布局优缺点：

    1. 优点：
      1. 跨终端，实现所有设备兼容
      2. 短时间内容支付各种各样好的设备
    2. 缺点：
      1. 兼容各种设备，代码冗余，维护麻烦
      2. 代码量多，工作量大，工作效率低；
      3. 隐藏一些无用元素，降低加载速度
      4. 用户功能混淆，部分功能收起来，降低用户功能体验度；

  4. 响应式布局通过谁来完成？

    1. 媒体查询：

      @media screen and ( min-width:300px) and (max-width:500px) {
    body{
    background-color:red;
    }
}
注意:每个关键词之间必须带空格;
注意:( )里面单位结束后不需要带分号
@media I 声明媒体查询语句
screen   检测媒体设备（screen屏幕，all所有设备)
and      关键词（not排除/only仅有一个） 
( min-width: 300px ) 条件表达式

检测屏幕的同时，要求满足屏幕大小位于300px-500px之间；满足条件实现body的背景颜色变红，不满足的画不执行；

    2. 常见屏幕的大小断点：

      1. 1024px 768px 480px
      2. 50:50的盒子，百分比设置49：49否则中件没有间隙；space-between;margin:外边据；

    3. 响应式布局步骤：

渐变

1. 线性渐变
 	1. 定义：颜色 从一个方向到另一个方向；
 	2. 属性：background:linear-gradient()
 	3. 语法：
2. 径向渐变
 	1. 定义：颜色中心向四周扩散；
 	2. 属性：background:radial-gradient()
  1. 应用：
    1.

蓝白道渐变重复；

1 )线性渐变
含义:颜色从一个方向到另外一个方向进行改变
属性: background:linear-gradient(to方向词, col1,col2 ,col3)
to方向词;到达一个方向，从相反方向开始
col1,col2,col3;颜色改变;可以跟很多个颜色col1开始的颜色; col3结束颜色
主要研究方向词的取值
a)to 方向词;到达一一个方向
b)不跟方向词，只跟颜色是否可行?
默认是to bottom
b)到某- - 个角;到达这个叫
to top left;到达左.上角,从右下角开始的
to方向词1方形词2
c)沿着某- - 个角度进行渐变
numberdeg 10deg 20deg 30deg
2 )重复的线性渐变
background:repeating-linear-gradient(red 0%， green 10%，yellow 20%)

3） 径向渐变

radial-gradient()

含义:颜色从中心店向四周进行扩散
属性: background:radial-gradient(center , shape , size, col1,col2,col3)
取值:
center:渐变中心，(默认的渐变中心位f ,元素止中心位置,x y)
shape :渐变形状(circle圆形,ellipse椭圆(*))
size:渐变大小,渐变过程中,到达某一个位置 处结束渐变
farthest-side;到达最远的边结束
farthest-corner;到达最远的角结束
closest-side ;到达最近的边结束
closest-corner ;到达最近的角渐变结刺
col1, col2, col3;渐变的颜色col1中心颜色，col3结束颜色
注意;径向渐变的渐变方向默认是以中心点向四个角进行渐变(沿着对角线进行渐变)
其实还有一种说法,沿着最远的叫进行渐变

. bigbox1{
background: -webkit-radial-gradient( 3θpx 100px, closest-side,■red,■green,■blue);
. bigbox2{
bac kground: -webkit-radial-gradient(3θpx 100px, farthest-side,o red,■green, blue);
。bigbox3{
background: -webkit-radial-gradient(30px 100px, closest-corner,■red,o green,■blue);
. bigbox4{
background: -webkit-radial-gradient(30px 100px , farthest-corner, I 1 red,0 green,■blue);
}

过度效果，必须配合鼠标事件

渐变，disply不在all的范围内

Day0810-23*

复习

  1. 缓动效果：
  2. 案例：二级菜单
    1. 隐藏：overflow:hidden;失效
    2. 使用height:0;
  3. 缓慢开始，缓慢结束

  1. 背景定位，滚动导航栏；
    1. 知识点：精灵图；背景位置；

滤镜

  1. filter: blur( 数值px );
  2. 0 没有影响; 数值越大，模糊越明显；

过渡

  1. 语法：

    transition：属性1 花费时间 运动曲线 开始时间，属性2 花费时间 运动曲线 开始时间
    • 谁做过渡，给谁添加
    • 同时修改多个属性时，不要复制多行，加逗号即可；
    • 多个属性改变时直接写all;
    • 运动曲线的取值：linear/ease/ease-in/ease-out/ease-in-out ;

  2. 单个：

    div{
    transition:width 3s ease 1s;
}
/*必须写单位，后2个可以省略*/
div:hover{
    width:400px;
    height:200px;
    background-colof:blue;

  3. 多个：

    div{
    transition:width 3s ,height 2s;
}
div:hover{
    width:400px;
    height:200px;
    background-colof:blue;
}

transform 2D转换

  1. 2d平面效果:

    • 定义：水平和垂直面的系列的动态的效果
    • 学习目的：一些高级动态函数

  2. 公共的属性:transform

    1. 平移函数 translate

      1. 含义:让元素在水平垂直方向上面进行移动

        translatex( );===水平方向平移.
translateY();====垂直方向平移
translate( );====沿着xy方向进行平移

      2. 重点：

        1. translate的盒子移动不会影响其他盒子的布局；
        2. 对于行内元素无效；（转换为行内块，使用float–transform依旧可以正常使用）
        3. translate的百分比以自己的宽高为参照；

    2. 旋转函数 rotate( 45deg );

      1. 含义:让元素进行转圈显示，
        rotateX( )======绕着x轴旋转
rotateY( );======绕着y轴旋转
rotate( );=======绕着中心点旋转

    3. 縮放函数 scale(1,1);

      1. 案例：（倒像的制作）：scale(-1) 形成倒像

      2. 案例：（图形的隐藏）：scale(0)

      3. 参数：省略第二个参数，等比缩放；

        scaleX();========沿着x轴进行缩放
scaleY();========沿着y轴进行缩放
scale();=========沿着中心点进行缩放

      4. 取值：

        =1;不缩小,不放大
>1;放大
<1,>0;缩小,
=0;变没有
<0的时候 相反方向；

    4. 倾斜函数;

      1. 定义：元素按照某个方向或某轴线倾斜显示

      2. 取值：

        skewX( 30deg ); 沿着x轴进行倾斜;与y轴形成一个夹角
skewY(); 沿着y轴进行倾斜;与x注形成一个夹角
skew( 30deg,30deg);  沿着x和y进行倾斜;与x轴和y轴都有夹角

    5. 中心点设置：

      1. transform-orign( x y) 空格间隔
        • 方位名词：left/right,bottom/top/center；
        • 百分比：默认50% 50%；
        • 数值：px;(可正，可负)

调用动画：

  1. 调用动画：

    1. 语法：

      选择器{
	animation:name linear 5s 5 alternate
}
name	动画名称         animation-name
3s		动画执行的时间   animation-duration    
linear   动画的执行类型   animation-timing-function  
5s       动画执行次数     animaiton-iteraton-count
5        动画执行次数     animaiton-iteraton-count
alternate动画是否反复执行 animation-direction

    2. 声明动画

      @keyframes name{
        0%{
            初始状态；
        }
        100%{
            结尾状态；
        }
	}

      @keyframes name{
  from{
      初始状态
  }
   to{
      结束状态
   }
}

    3. 调用动画：

      1. 组合写法；
    animation: change 1s linear infinite alternate; 
2. 单独写法：
    animation-name:change;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    4. 停止动画：

      /* 动画停止属性 */
.box:hover{
	animation-play-state: paused;
}

    5. 应用：

              .box {
            width: 200px;
            height: 200px;
            border: 10px solid gray;
            background-color: red;
            /* transition: all 3s linear 5s; */
            /* 调用动画 */
            animation:change 3s linear 5
        }
        /*1.*/
        @keyframes change{
            0%{
            
            }
            50%{
                width: 100px;
                height:100px;
                background-color: purple;
                border-radius: 30%;
            }
            100%{
                width: 400px;
                height: 400px;
                background-color: green;
                border-radius: 50%
            }
        }
        /*2. */
        @keyframes change {
            from {
                
            }
            to {
                width: 400px;
                height: 400px;
                background-color: green;
                border-radius: 50%
            }
        }

    6. 注意：

      1. 注意事项:初始状态和默认状态一抹一样的话,初始状态代码可以省略不写

      2. 注意事项:默认动画执行一次

      3. 注意事项:动画里面的延迟只执行一次

      4. 注意事项:如果想要实现实现缓慢开始,缓慢结束我们需要添加alternate

        • 添加alternate之后,开始算作1次,结束算作1次
        • 添加的执行次数要么是偶数,要么是无穷尽(infinite)，否则会出现突然中断变回的模样

      5. 0%-100%和from-to区别?

        1. 只有一开始一结束状态,则二者实现效果相同；
        2. 但是中间有其他效果，则使用百分比声明，可以增加更多关键帧
        • 0%{} 20%{} 30{} 40%{} 45%{}

  2. 轮播图

  3. steps按照步骤执行；

    <!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>
        * {
            margin: 0;
            padding: 0
        }

        .bigbox {
            width: 500px;
            height: 350px;
            border: 10px solid gray;
            overflow: hidden;
        }

        .box {
            /* box:500*350 */
            /* 500%====2500px */
            width: 500%;
            height: 100%;
            background-color: aqua;
            /* 移动 */
            animation:change 2s steps(5) infinite
        }

        .box>div {
            /* 2500px*?=500px */
            width: 20%;
            height: 100%;
            text-align: center;
            line-height: 350px;
            font-size: 100px;
            float: left;
        }

        .box>:nth-child(1) {
            background-color: red;
        }

        .box>:nth-child(2) {
            background-color: green;
        }

        .box>:nth-child(3) {
            background-color: blue;
        }

        .box>:nth-child(4) {
            background-color: orange;
        }

        .box>:nth-child(5) {
            background-color: purple;
        }
        /* 如何让box移动过去 */
        /* 平移 */
        /* 1)声明动画 */
        @keyframes change{
            0%{
                transform: translateX(0px);
            }
            100%{
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <!-- 观看区域 -->
    <div class="bigbox">
        <!-- 移动区域 -->
        <div class="box">
            <div>周蓉</div>
            <div>吴昊</div>
            <div>雨凡</div>
            <div>炳松</div>
            <div>方全</div>
        </div>
    </div>
</body>
</html>

transition,animation,transform区别

  1. 共同点：

    1. transition=过渡动画，需要配合鼠标事件

    2. transform=2d平面动画，需要配合鼠标事件以及过渡完成对应的效果

  2. 不同点：

    1. transition,transform选哟配合鼠标事件才能完成，不是真正意义上的动画，自己触发；

    2. animation:真正意义上的动画，不需要触发鼠标事件，直接就能让动画动起来；

    3. animation：又称关键帧动画；

Day0811-24 Ended

  1. 考试要求：下周一发答案；

    1. 笔试：（word）
      1. 不定项选择题（单，多）
      2. 填空题（面试题）
      3. 简答题（面试题）
      4. 编程
    2. 机试：页面制作（一周）周六18号之前发出
      1. pc端；动画效果；
      2. 移动端；选做2个；

  2. 复习

    1. 复习

      1. 过渡：transition;需要通过鼠标事件

      2. 2d：transform

        1. translateX()
        2. translateY()
        3. translate()

      3. 旋转

        1. 转换，旋转一个角度

          1. ratateX()
          2. rotateY()
          3. rotate（）

        2. 缩放，

          1. scaleX()
          2. scaleY()
          3. scale()
          4. transform-origin()

        3. 倾斜，

          1. 沿着某个轴线进行倾斜显示；
          2. skewX()
          3. skewY()
          4. skew(x,y)

        4. 补充一个问题

        5. 动画：

          1. animation:name 3s linear 5s infinite alternate;

          2.  @keyframes name{
   	form{}
   	to{}
}
@keyframes name{
	0%{}
	100%{}
}

          3. transform的符合属性；

transform复合属性问题

  1. transform的符合属性；
    1. transform:translateX(500px) rotate(90deg) ;
    2. 面试题：交换属性的位置会不同吗?
      1. 会终点位置不同

网格-基础知识

  1. 容器:父元素

  2. 项目:子元素

  3. 网格线:组成-个格子需要的线条;

  4. 基本原理：

    1. 一个格子:4条网格线: 2横,2纵
    2. 1行2列的网格: 5条网格线;2横3纵
      2行1列的网格: 5条网格线:3横2纵
      2行2列的网格: 6条网格线:3横3纵
      m行n列的网格: m+1+n+1 条网格线: m+1横,n+1纵；
    3. 单元格：网格线交汇的区域就是单元格
    4. 行：横向的单元格为行
    5. 列：纵向的单元格为列

01网格-属性触发：

  1. 触发网格：

    display:grid(块级网格，常用)/inline-grid(行内网格);

    注意：内容没设置宽高度时,默认拉伸；若设置宽高,默认在单元格左上角显示

  2. 容器属性:添加给父元素

  3. 项目属性:添加给子元素

01网格-划分行列：

template:模板

grid-template-rows:[r1] num1 [r2] num2 [r3] num3 [r4] num4 [r5]
grid-template-columns:[c1] num1 [c2] num2 [c3] num3 [c4]

  1. num应用在rows=行高; num应用在columns=列宽

  2. 行列后面跟几组值,代表几行几列

  3. 取值：

    1. 数值单位 px

      grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;

      多余部分按照设定好的值排列，即使超出父盒子的大小；

    2. 百分比单位 %

      grid-template-rows: 10% 10% 10%;
grid-template-columns: 10% 10% 10% 10%;

      百分比按照父盒子的单位长宽做单位1

    3. 重复函数 repeat(参数1,参数2) 参数1:次数; 参数2:重复的值

      grid-template-rows:repeat(4,100px);
grid-template-columns: repeat(3,100px) 50px;

    4. 自动分配行列数 auto-fill ,应用在repeat函数中,替换的是参数1

      grid-template-rows: repeat(auto-fill,180px); /*固定每个单元格的行高*/
grid-template-columns: repeat(auto-fill,180px);/*固定每个单元个的列宽*/

      按照固定好的宽度,自动填充每行个数

    5. 占剩余宽度auto；剩余高度所有 auto

      grid-template-rows: 100px auto 100px;
grid-template-columns: auto 100px auto;

    6. 片段划分flex; 类似于:flex:1;flex:2;flex:3

      grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: 1fr 2fr 3fr;

      按fr的总份数分

    7. 最小最大函数 minmax(val1,val2) 最小不能小于val1,最大不能超过:val2

      grid-template-rows: 100px 100px minmax(100px,200px);
grid-template-columns: 100px 100px 100px;

      最值的范围限制；

01网格-调整格间距:

  1. 单一属性：

    grid-row-gap:30px;
grid-column-gap:50px;

/*
已经修改为：
row-gap
column-gap
*/

    gap: 间隙；

  2. 复合属性：

    grid-gap: 行间距 列间距；
grid-gap:30px 50px;
/*已经修改为gap属性*/

01网格-排列方向：

grid-auto-flow: column/row（默认）;
/*
决定盒子优先纵向（上到下排完再到左至右）排列还是横向排列（左到右排完再第二排）
*/

01网格-单元格内容对齐：

/*单一属性*/
1. align-items：;
2. justify-items：;
/*复合属性*/
3.place-items: end end;
/* 取值: start开始位置;end结束位置;center居中位置,stretch拉伸情况 */
/* 取值1: 垂直方向   取值2: 水平方向*/

01网格-网格在容器对齐：

/* 
取值1:垂直方向对其   取值2水平方向对其方式
取值: start开始位置/ end结束位置/center中间位置/space-around两端环绕/space-between两端对其/space-evenly间距评分
*/
/*单一属性*/
align-content;
justify-content;
/*复合属性*/
place-content: start space-between;

01网格-合并单元格01：

  1. 父元素添加：

    /* 1)命名每个单元格 */
/* grid-template-areas: 'a b c'
                        'd e f'
                        'g h i'; 
*/
grid-template-areas: 'aa bb cc'
                     'aa bb dd'
                     'aa bb ee'

  2. 子元素添加：

    /* 2)起名后,从页面中找到任何一个标签,进行同命名区域单元和占位显示 */
	div>:nth-child(1){
/* 让这个标签,占位占在同命名的区域中 */
	grid-area: aa;
}
div>:nth-child(2){
	grid-area: bb;
}

  3. 合并操作：单元格命名法；（较复杂）

     /*1. 约束1：合并的单元格起同名,若单元格的名字不同，则未合并*/
            命名:
                a b c
                d e f
                g h i
            命名
                aa bb cc
                aa bb cc
                dd ee ff
/*2. 约束2：命名的时候,只能出现矩形形状不能出现拐角,或者是没有连在一起的情况*/

            命名:不正确的
                aa bb cc
                aa bb bb
                dd dd ee
            命名:不正确
                aa bb bb
                aa bb bb
                bb cc dd

/*3.弊端*/
    命名复杂,如元素较多,100*100

02网格项目属性-合并单元格:

grid-row:1/2 ;
grid-column: 5/7;
/* 
实现占位网格线占位 
grid-row:num1/num2   num1横向网格线开始, num2横向网格线结束
grid-column:num1/num2 num1纵向网格线开始, num2纵向网格线结束
*/

/*
1. 找元素占位的时候,可以随意找一个元素,但是我们一般推荐从头开始: 因为后面的会被注释掉
2. 直接采用子元素网格线占位的方法,对应的元素显示在某一区域;
   只需要学习数网格线即可:m行,n列的单元格: m+1条横向  n+1条纵向.
*/

发布者：admin，转转请注明出处：http://www.yc00.com/web/1754949490a5219719.html

adminadmin
0

相关推荐

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信