• 常用前端基础知识


    1.可继承的样式:关于字体的所有属性都是可以继承父元素的设置

    2.button按钮的默认样式去除:border:0 none; 去除按钮的边框     outline-style:none; 去除按钮的轮廓线

    3.使用浮动float属性和使用定位都会将行内元素转换成行内块元素

    4.除五种基本类型(string,number,undefind,null,boolean)外,都是对象;基本类型使用的是栈内存,值相对独立互不影响,而引用数据类型是保存在堆内存中的,变量保存的是内存地址,值发生改变就都会改变

    5.undefind,null,0 , ' ' 都是false,可用于后台返回时做判断处理

    6.行内元素只能设置左右的外边距,不能设置上下的外边距(margin)

    7.立即执行函数:往往只会执行一次

    8.函数的提前声明,它会在代码执行前就被创建,因此可以在函数的声明之前调用

    9.函数的上下文对象this:根据函数的不同调用方式,this的指向也会不同:以函数的形式调用时,指向window;以方法的形式调用时,它指向调用方法的对象;以构造函数的形式调用时,this就是新创建的那个对象

    10.封装实参的对象arguments,是一个类数组对象,可以使用索引来操作数据获取实参的长度

    11.<textarea></textarea>这个双标签必须要放在同一行,否则会产生空格,也会导致提示语也看不到

    12.h5新增表单type类型:email(默认电子邮箱的验证,不满足则阻止提交);tel(不实现验证,但是在移动端可以打开数字键盘);url(验证合法网址);number(只能输入数字,可设置max,最小值min,value默认值);search(提供更人性化的输入体验,可快速删除重输);range(可设置max,min,value)用于调节音量;color(可点击选择喜欢的颜色);时间相关:time,date,datetime,date

    13.表单提供的其他属性:placeholder提示文本,提示占位;autofocus 自动获取焦点;autocomplete(自动完成;两个前提:成功提交过才会有记录;当前添加的元素必须要有name属性) ;require必输入属性 若无输入则阻止当前数据的提交

    14.选择器:属性选择器(类似正则表达式):

      E[attr = value]{.....} 查找指定attr属性并且属性值为value的E标签

           E[attr *= value]{.....} 查找指定attr属性且属性值包含value的E标签

           E[attr ^= value]{.....} 查找指定attr属性且属性值以value开头的E标签

      E[attr $= value]{.....} 查找指定attr属性且属性值以value结尾的E标签

    兄弟选择器:+ 获取当前元素的相邻的满足条件的元素;~ 获取当前元素的满足条件的兄弟元素

    伪类选择器: E:first-child{.....} / E:last-child{.....} 查找E元素的父级元素中的第一个/最后一个E元素

           E:first-of-type{.....} / E:first-of-type{.....}  相对于父级元素的第一个/最后一个E元素,查找可限定类型

           E:nth-child(索引/关键字/表达式){....}  从1开始的索引;可使用关键字进行筛选 even偶数 odd 奇数 ;表达式如E:nth-child(-n+5){....} 对前五个进行操作

    15.盒模型(可防止抖动)box-sizing:content-box;  盒子最终width = width+padding+border   

                box-sizing:border-box;   盒子最终width即是设置的盒子的宽度,内容的宽度会自动计算

    16.边框圆角  border-radius 

          最常用的设置为border-radius:50%;  

          设置两个值匹配:左上/右下  右上/左下; 设置三个值匹配:左上   左下/右上   右下; 设置四个值匹配:左上   右上  右下  左下 ;

    17.边框阴影 box-shadow: h  v  blur  spread  color  inset;

      属性解读:水平偏移值  垂直偏移值  模糊  阴影尺寸  颜色  内阴影

    18.图片大小设置background-size: contain; 按照比例调整图片,不管图片是否大于容器,图片都是包含在容器中的,全部展示,因此可能会存在空白区域

            background-size: cover;  背景图图片自适应整个图片,因此若尺寸不匹配会导致图片变形

  • 相关阅读:
    10个超实用的PHP代码片段
    MySQL支撑百万级流量高并发的网站部署详解
    程序员总结:帮助你早些明白一些道理
    50个最常用的UNIX / Linux命令(结合实例)
    php.ini 核心配置选项说明
    智能指针的死穴 循环引用
    滥用vector带来的瓶颈
    JS——层的遮罩效果
    【趣】无广告看视频
    【SQLServer】远程访问数据库进行配置
  • 原文地址:https://www.cnblogs.com/prospective-zkq/p/9997076.html
Copyright © 2020-2023  润新知