泽野之乡

发表于 更新于 分类于

认识盒模型

  1. 行内元素
  2. 块级元素
  3. 所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

width和height属性详解

  1. width
    • 盒子内容的宽度
    • width属性通常是px，移动端开发会涉及百分数，rem等单位
    • 当块级元素（div、h系列、li等）没有设置width属性是，它将自动撑满，但这并不意味着width可以继承
  2. height
    • 表示内容的高度
    • width属性通常是px，移动端开发会涉及百分数，rem等单位
    • 盒子的height属性如果不设置，它将被内容被自动撑开，如果没有内容，则height默认是0
    • 高度省略掉，内容能被自动撑开

padding属性详解

  1. padding 是盒子的内边距，即盒子边框内壁到文字的距离
  2. padding 是四个方向的
    • padding-top
    • padding-left
    • padding-right
    • padding-bottom
  3. padding 四数值写法
    • padding:10px 20px 10px 20px 上右下左
  4. padding 三数值写法
    • padding:10px 20px 30px 上 左右 下
  5. padding 二数值写法
    • padding:10px 20px 上下，左右
  6. padding 一数值写法
    • padding:10px 四个方向都是10px

margin属性详解

  1. margin是盒子的外边距，盒子和其它盒子之间的距离
  2. margin 是四个方向的
    • margin-top
    • margin-left
    • margin-right
    • margin-bottom
  3. margin 四个方向
    • margin:10px 20px 10px 20px 上右下左
  4. margin 三数值写法
    • margin:10px 20px 30px 上 左右 下
  5. margin 二数值写法
    • margin:10px 20px 上下，左右
  6. margin 一数值写法
    • margin:10px 四个方向都是10px
  7. margin 的塌陷
    • 垂直方向的margin有塌陷现象：小的margin 会塌陷到大的margin 中，从而margin不叠加，只以大的值为准
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
       .box5{
              width: 200px;
              height: 200px;
              background-color: aqua;
              margin-bottom: 24px;
          }   
       .box6{
              width: 200px;
              height: 200px;
              background-color: rgb(28, 206, 108);
              margin-top: 32px;
          }
      以margin-top 32px 为准
    • 左右方向不会发生塌陷现象
  8. 一些元素有默认的margin
    • 比如（body、ul、p) 等，在开始制作网页的时候，要将它们清除
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
       *{
              margin: 0;
              padding: 0;
          }

          body,
          ul,
          p {
              margin: 0;
              padding: 0;
          }
      * 通配符有效率问题
  9. 盒子的水平居中
    • 将盒子左右两边的margin都设置为auto，盒水平居中
    • margin:0 auto
    • 文本居中 text-align:center 和盒子水平居中是两个概念

盒模型计算

  1. 盒子的总宽度 = width + 左右border + 左右padding
  2. 盒子的总高度 = height + 上下border + 上下padding

box-sizing属性

  1. 将盒子添加 box-sizing:border-box 之后，padding、border 变为内缩，不再外扩

display

  1. 行内元素
    • 能并排显示
    • 不能设置宽高
    • width自动收缩
    • a、span、em、b、u、i 等
  2. 块级元素
    • 不能并排显示
    • 能设置宽高
    • width自动撑满
    • div、section、header、h系列、li、ul等
  3. 行内块元素
    • img、input等
    • 既能并排显示、又能设置宽高
  4. 行内元素和块级元素的互相转换
    • display:block
      • 转换为块级元素
    • display:inline
      • 转为行内元素
    • disaplay:inline-block
      • 即将元素转为行内块
    • display:none
      • 可以将元素隐藏，元素将彻底放弃位置，如同没有写标签一样
    • visibility:hidden
      • 也可以将元素隐藏，但是元素不放弃自己的位置

发表于 更新于 分类于

过渡（最低支持 IE10）

  1. 过渡的基本使用
    • transition 过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同的样式之间变化自动添加“补间动画”
    • 优点：动画更细腻，内存开销小
    • transition: width 1s linear 0s;
      • 如果所有属性要参与过渡，可以写 all
    • 参数说明：什么属性需要过渡，动画时长，变化速度曲线，延迟时间
      过渡的四个小属性
      • transition-duration 动画时间
      • transition-property 哪些属性要过渡
      • transition-timing-function 动画变化曲线（缓动效果）
        • ease
        • linear
        • ease-in
        • ease-out
        • ease-in-out
        • 贝塞尔曲线
      • transition-delay 延迟时间
    • 哪些属性可以参与过渡？
      • 所有数值属性都可以参与过渡，比如
        • width
        • height
        • left
        • top
        • border-radius
      • 背景颜色和文字颜色都可以被过渡
      • 所有变形（包括2D和3D）都能被过渡
  2. 过渡的缓动效果（参考 transition-timing-function 属性）

动画

  1. 动画的定义和调用

    • 可以使用 @keyframes 来定义动画，keyframes 表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

    • 定义动画后，就可以用 animation 属性调用动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
       <!DOCTYPE html>
       <html lang="en">
       <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画的定义</title>
        <style>
            @keyframes r{
                from {
                    transform: rotate(0);
                }
                to {
                    transform: rotate(360deg);
                }
            }
            .box1 {
                width: 200px;
                height: 200px;
                border: 1px solid #333;
                animation: r 1s linear 0s;
            }
        </style>
       </head>
       <body>
        <div class="box1"></div>
       </body>
      </html>

    • animation: r 1s ease 3s 3;

      • 动画的参数：动画的名称，执行的时间，动画效果，延迟时间，执行次数
      • 如果想永远设置执行就是 infinite 属性
      • 如果想让动画的第2、4、6…..（偶数次）自动逆向执行，那么要加上 alternate 参数即可
      • 如果想让动画停止在最后结束状态，那么要加上 forwards

    • 多关键帧动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      @keyframes changeColor {
           0% {
               background-color: red;
           }

           50% {
               background-color: yellow;
           }

           100% {
               background-color: aqua;
           }
       }

发表于 更新于 分类于

audio标签（兼容到IE9）

  1. 属性
    • autoplay（某些浏览器不支持自动播放、本地自动播放是可以的）
    • loop （重复播放）

video 标签（兼容到IE9）

  1. 属性
    • 同 audio 标签
    • width 视频播放器宽度

大纲标签（区块标签）

  1. section 文档的区域，语义比div大
  2. article 文档的核心文章内容，会被搜索引擎主要抓取
  3. nav 导航条
  4. footer 页脚
  5. aside 文档的非必要相关内容，比如广告等
  6. main 网页核心部分
  7. header 页头

语义化标签

  1. span 文本中的区块标签
  2. b 加粗标签
  3. i 斜体标签
  4. u 下划线标签
  5. strong 加粗标签
  6. em 斜体标签
  7. mark 标记标签
  8. figure-figcaption 用于表示图片和图片的标题

常用标签

  1. a 标签
    • 1、a 标签 anchor 锚 的首字母
      2、hypertext reference 超文本引用
      3、title 用于设置鼠标的悬停文本
    • 属性
      • href 超文本引用
      • target
        • _blank 在新窗口或新标签页中打开链接。
        • _self 在父级框架中打开链接。
        • _top 在当前窗口中打开链接（默认值）。
        • _parent 在顶级框架中打开链接。
      • title 用于设置鼠标的悬停文本
    • 说明
      • mailto:me.test.com 邮件
      • tel:135555555555 拨打电话
      • #top 回到顶部
  2. img 标签
    • src
    • width、height
    • alt alternate 替代品的缩写，它是图像的描述，不是强制性的(有利于搜索引擎优化)
    • title 鼠标悬停时候显示
    • class、style 设置样式用
    • loading 指定图像加载方式，可选值有”eager”（立即加载）和”lazy”（延迟加载）。
    • decoding 指定图像解码方式，可选值有”async”（异步解码）和”sync”（同步解码）。

发表于 更新于 分类于

table

  1. tr
  2. td
    • colspan 用来设置 td 或者 th 的列跨度
    • rowspan 用来设置 td 或者 th 的行跨度
  3. thead/th
    • 标题小格（td 和 th 是同一级别的）
    • colspan 用来设置 td 或者 th 的列跨度
    • rowspan 用来设置 td 或者 th 的行跨度
  4. tbody
  5. tfooter
  6. caption
    • 表格的标题

属性

  1. border
    • 1
    • 2

发表于 更新于 分类于

input

  1. type
    • color 颜色选择控件
    • date、time 日期时间选择控件
    • email 电子邮件输入控件
    • file 文件选择控件
    • number 数字输入控件
    • range 拖拽条
    • search 搜索框
    • url 网址输入控件
    • button 按钮
    • submit 提交，在外层为 form 情况下有效
    • reset 重置
    • password 密码
    • radio 单选按钮需要名称设置为一样的
    • checkbox 多选按钮需要名称设置为一样的
    • hidden 对用户不可见，隐藏字段
  2. placeholder 提示符
  3. value 值 是否禁用
  4. disabled 是否必填，在外层是form表单情况下有效
  5. required
  6. name
  7. id
  8. list
    • 设置预选项（list=”province-list”）
      1
      2
      3
      4
      5
      <datalist id="province-list">
               <option value="浙江杭州">
               <option value="河北石家庄">
               <option value="浙江温州">
           </datalist>

textarea

  1. name
  2. id
  3. cols 一行显示多少字符
  4. rows 一列显示多少字符
  5. placeholder 提示符

select/option

  1. select
  • name
  • id
  • disable 是否禁用
  • multiple 选项是否支持多选
  • required 是否必填
  • autofocus 自动获取焦点
  • autocomplete 自动完成

fieldset/legend

  1. 即输入区加有文字的边框。
  2. 定义域的标题，即边框上的文字。

button

  1. 定义一个按钮。

label

  1. 定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
  2. for

发表于 更新于 分类于

盒子阴影

  1. box-shadow: 10px 20px 30px rgba(0, 0, 0, .4);
  2. inset（内阴影，可选），x偏移，y偏移，模糊量，阴影延展（可选），颜色
  3. 可以用逗号隔开多个阴影
    1
    2
    3
    4
    5
    6
    .box1 {
           width: 100px;
           height: 100px;
           box-shadow: inset 10px 20px 30px 40px rgba(0, 0, 0, .4),10px 20px 30px #ff0000;
           border: 1px solid #333;
       }

边框

  1. border-top
  2. border-bottom
  3. border-left
  4. border-right
  5. border-方向-style 边框线形
  6. border-方向-width 边框宽度
  7. border-方向-color 边框颜色
  8. border-方向:none 去掉边框
  9. 利用border制作三角形
    • width: 0; height: 0; border: 20px solid transparent; margin-top: 50px; border-top-color: #ff0000;
  10. 边框的三要素
    • 线宽度、线型、线颜色
      • solid 实线
      • dotted 虚线（圆）
      • double 双边
      • dashed 虚线（矩形）
    • border:1px solid #ff0

发表于 更新于 分类于

背景基础知识

  1. 背景颜色基础知识
    • background-color: ;
    • 背景颜色可以用十六进制，rgba,rgb,表示
    • padding 是有背景颜色的
  2. 背景图片基础知识
    • 用来设置背景图片。 background-image: url();
    • 可以是相对路径，绝对路径，网络图片

背景图片高级属性

  1. 背景图片的重复模式
    • background-repeat 属性可以用来设置背景的重复模式
    • repeat x,y均平铺（默认）
    • repeat-x x轴平铺
    • repeat-y y轴平铺
    • no-repeat 不平铺
  2. 背景尺寸
    • background-size: 100px 100px; 宽，高
    • 设置背景图片尺寸，兼容到IE9
    • 值也可以用百分比来表示，表示盒子宽高分别百分之多少。
    • 需要等比例设置的值，可以设置auto
    • contain和cover
      • background-size: contain; 表示将背景图片只能改变尺寸以容纳到盒子里
      • cover表示将背景图片智能改变尺寸以撑满盒子
  3. 背景裁切
    • background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9
      1
      2
      3
      4
      5
      6
      7
      8
      9
      .box5{
              margin: 50px 0;
              width: 300px;
              height: 300px;
              border: 10px dotted #000;
              background-image: url('./images/niaochao.jpg');
              padding: 24px;
              background-clip: border-box;
      }
    • border-box 背景延伸至边框（默认值）
    • padding-box 背景延伸至内边（padding)，不会绘制边框处（仅在dotted、dashed边框可察觉）
    • content-box 背景被裁剪至内容区
  4. 背景固定
    • background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
      1
      2
      3
      4
      5
      6
      7
      .box4{
             width: 200px;
             height: 200px;
             background-attachment: fixed;
             background-image: url('./images/gugong.jpg');
             overflow-y: scroll;
       }
      • fixed 自己滚动条不动，外部滚动条不动
      • local 自己滚动条动，外部滚动条动
      • scroll 自己滚动条不动，外部滚动条动（默认值）
    • 用途：视差滚动特效
  5. 背景图片位置
    • background-position: 100px 200px;
    • 设置背景图片在盒子的位置
    • 可以用位置描述符 top left right bottom
  6. background综合属性
    • background: white url("images/goblin.png") no-repeat center center;
    • 背景颜色，背景图片，背景重复，背景位置

渐变背景

  1. 线性渐变
    • background-image: linear-gradient(to right, blue, red);
    • 渐变方向，开始颜色，结束颜色
    • 渐变方向可以写成度数，比如45deg
    • 可以有多个颜色值，并且可以用百分数定义它们出现的位置 linear-gradient(to bottom,blue,yellow 20%,red)
    • 浏览器私有前缀
      • Chrome -webkit-
      • Firefox -moz-
      • IE、Edge -ms-
      • 欧朋 -o-
  2. 径向渐变
    • 盒子可以使用 background-image: radial-gradient(50% 50%,red,blue); 创建径向渐变
    • 参数：圆心坐标，颜色，颜色，颜色

CSS精灵（雪碧图，前端优化方案之一）

  1. CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独展示其中一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图
  2. 减少HTTP请求数，加快网页速度，缺点：不方便测量，后期修改不方便

发表于 更新于 分类于

String 和 StringBuilder

String

  1. 如何创建 String 对象
    • String s1 = “test”
    • String s2 = new String();
    • String s3 = new String(“test”)
  2. String 对象的常用方法
方法 说明
[charAt(int index)] 返回指定索引位置的字符
[concat(String str)] 将指定字符串连接到该字符串的结尾
[contains(CharSequence s)] 判断是否包含指定的字符序列
[endsWith(String suffix)] 判断字符串是否以指定的后缀结束
[equals(Object obj)] 比较字符串是否相等
[equalsIgnoreCase(String str)] 比较字符串是否相等,忽略大小写
[indexOf(int ch)] 返回指定字符在该字符串中首次出现处的索引
[indexOf(String str)] 返回指定子字符串在该字符串中首次出现处的索引
[isEmpty()] 判断字符串是否为空
[length()] 返回字符串的长度
[replace(char oldChar, char newChar)] 使用新值替换字符串中出现的所有旧值
[split(String regex)] 根据给定正则表达式的匹配拆分此字符串
[startsWith(String prefix)] 判断字符串是否以指定的前缀开始
[substring(int beginIndex)] 返回一个新的字符串,它是此字符串的一个子字符串
[toCharArray()] 将此字符串转换为一个新的字符数组
[toLowerCase()] 使用默认语言环境的规则将此 String 所有字符都转换为小写
[toUpperCase()] 使用默认语言环境的规则将此 String 所有字符都转换为大写
[trim()] 返回字符串的副本,删除前导空白和尾部空白
  1. == 和 equals 方法的区别
比较项 == 运算符 equals() 方法
比较对象 比较两个对象的引用是否指向同一个对象(内存地址是否相同) 比较两个对象的内容是否相同
适用类型 基本数据类型(如 int、double 等)和引用数据类型(如 String、Integer 等) 引用数据类型(如 String、Integer 等)
默认行为 基本数据类型比较值是否相同,引用数据类型比较引用是否相同 对于引用数据类型,默认比较对象的内容是否相同
重写 不能重写 可以被子类重写以实现自定义的比较逻辑

总的来说:

  • == 比较的是对象的内存地址，equals() 比较的是对象的内容。
  • 对于基本数据类型，== 比较的是值是否相同。
  • 对于引用数据类型，如果没有重写 equals() 方法，那么 equals() 方法等价于 ==。
  • 通常比较引用数据类型的相等性时，应该使用 equals() 方法，因为这样可以比较对象的内容。
  1. String 的不可变性
    • String 对象一旦被创建，则不能修改，是不可变的。
    • 所谓的修改其实是创建了新的对象，所指向的内存空间不变，

StringBuilder

  1. 与 String 区别
    • String 具有不可变性，而 StringBuilder 不具备
  2. 使用建议
    • 当频繁操作字符串时，使用 StringBuilder
  3. StringBuilder 和 StringBuffer
    • 二者基本相似
    • StringBuffer 是线程安全的，StringBuilder 则没有，所以性能略高。
  4. 常用方法
    • StringBuilder append(String str)
    • StringBuilder delete(int start,int end)
    • StringBuilder insert(int offset,String str)
    • StringBuilder replace(int start,int end,String str)

发表于 更新于 分类于

什么是包装类

  1. 基本数据类型不具有对象特征，没有属性和方法，无法对象化交互，包装类的产生就是为了解决这样的问题，通过包装类，让基本数据类型拥有属性、方法，可以对象化交互
  2. 包装类不允许被继承，没有子类

包装类与基本数据类型之间的对应关系

包装类与基本数据类型

  • byte -> Byte
  • short -> Short
  • int -> Integer
  • long -> Long
  • float -> Float
  • double -> Double
  • char -> Character
  • boolean -> Boolean
  • 除了 double、float 都可以应用对象常量池的概念

包装类的常用方法

Java 文档手册

发表于 更新于 分类于

释义

  • （caseading style sheet、层叠式样式表）

前端三层

  1. 结构层 HTML
    • 搭建结构、放置部件、描述语义
  2. 样式层 CSS
    • 美化页面、实现布局
  3. 行为层 Javascript
    • 实现交互效果、数据收发、表单验证等

选择器（CSS2.1）

  1. 类选择器
    • .类名称
  2. id选择器
    • #id名称
    • 命名：只能有字母、数字、下划线、短横构成、且不能以数字开字母区分大小写，但习惯小写字母开头
  3. 元素选择器（标签选择器)
    • 元素名称
    • 通常用于标签样式的初始化
  4. 说明
    • 选择器的优先级：内联样式>id选择器>类选择器>元素选择器

复合选择器（CSS2.1）

  1. 后代选择器
    • .box .spec 选择.box 内部类名为.spec的标签
  2. 交集选择器
    • li.spec 选择既是li标签，名字也叫spec类的标签
  3. 并集选择器
    • ul,ol 选择所有ul和ol的标签
  4. 题目：请根据样式属性，写出文档结构
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
        div.box li p.spec em{
            color: red;
        }
        <div class="box">
        <ul>
            <li>
                <p class="spec"><em>哈哈哈哈</em></p>
            </li>
        </ul>
    </div>

属性选择器（CSS3） >= IE9

  1. img[alt]
    • 选择有alt属性的img标签
  2. img[alt=”故宫”]
    • 选择alt 属性是故宫的img标签
  3. img[alt^=”故宫”]
    • 选择alt属性以北京开头的img标签
  4. img[alt$=”夜景”]
    • 选择alt属性以夜景结尾的img标签
  5. img[alt*=”美”]
    • 选择alt属性包含美字的img标签
  6. img[alt~=”手机拍摄”]
    • 选择有alt属性有空格隔开的手机拍摄字样的img标签
  7. img[alt|=”参赛作品”]
    • 选择有alt属性以“参赛作品-”开头的img标签

元素关系选择器（CSS3）

  1. 子选择器>=IE7
    • div>p div的子标签p
  2. 相邻兄弟选择器
    • img+p 图片后面紧跟着的段落将被选中
  3. 通用兄弟选择器
    • p~span p元素之后的所有同层级span元素

序号选择器（CSS3）

  1. :first-child >=IE7
    • 第一个子元素
  2. :last-child
    • 最后一个子元素
  3. :nth-child(3)
    • 第三个子元素
    • :nth-child(3n+2) 从第二个开始，每三个选一个
    • 2n+1 等价于 odd ，表示奇数
    • 2n 等价于 even ，b表示偶数
  4. :nth-of-type(3)
    • 第三个某类型的子元素，将选择同种标签指定序号的子元素
  5. :nth-last-child(3)
    • 倒数第三个子元素
  6. :nth-last-of-type(3)
    • 倒数第三个某类型的子元素

原子类

  1. 在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等设置为单独的类
    1
    2
    3
     例如:
    .fs12{ font-size:12px }
    .color-red { color:red }

伪类

  1. 伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接有4个特殊状态
    1
    2
    3
    4
    a:link  没有被访问过的超级链接
    a:visited 已经被访问过的超级链接
    a:hover 正被鼠标悬停的超级链接
    a:active 正被激活的超级链接（按下按键但是还没有松开按键）
  2. “爱恨准则” LOVE HATE
    • :link -> :visited -> :hover -> :active
    • a 标签伪类必须按照这个写法，否则伪类不生效

伪元素（CSS3）

  1. ::before
    • 在元素之前创建
  2. ::after
    • 在元素之后创建
  3. ::selection
    • 用于文档中被用户高亮的部分（使用鼠标圈选的部分）
  4. ::first-letter
    • 选中某元素中（必须是块级元素）第一行的第一个字母
  5. ::first-line
    • 选中某元素中（必须是块级元素）第一行的全部文字

*层叠性和选择器权重计算

  1. 选择器的优先级：内联样式>id选择器>类选择器>元素选择器
  2. 复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <div id="box1" class="box1">
         <div id="box2" class="box2">
             <div id="box3" class="box3">
                 <p>我是段落</p>
             </div>
         </div>
     </div>
     #box1 #box2 p {
         color: red;
     }
     #box1 div.box2 #box3 p {
         color: green;
     }
     .box1 .box2 .box3 p {
         color: blue;
     }
     2,0,1
     2,1,2
     0,3,1

     <!-- id选择器个数，类选择器个数，元素选择器个数 -->
  3. !important 权重提升
    • 很多公司不允许使用 important ，因为这会带来不经意的样式冲突
0%