三驾马车之三分之二总结

学习了两个多月前端客户端,对HTML和CSS的一点总结,接下来学习Javascript,每章内容将会实时更新

HTML:结构

CSS:渲染

JS:交互

 

一:HTML5新增标签:

  • 结构标签:header nav article section aside footer  figure
  • 表单标签:email(邮件)  color(颜色) date(日期) number(数字) range(体重)
  • 媒体标签:audio(音频) video(视频)

二:CSS3新增属性:

  • border-color:为边框设置多种颜色
  • border-radius:圆角边框
  • box-shadow:阴影效果      取值:X轴  Y轴  模糊度  阴影扩展  颜色
  • background-size:指定背景图片尺寸
  • background-origin:指定背景图片的起始位置     取值:
                                               border-box;默认值是边框盒的左上角
                                               padding-box;填充盒的左上角
                                               content-box;内容盒的左上角
  • background-clip:指定背景图片从什么位置开始裁剪
  1.  默认值border-box
  2. padding-box
  3. content-box
  • text-shadow:文本阴影
  1. 第一个值X轴的偏移量
  2. 第二个值Y轴的偏移量
  3. 第三个值是阴影范围
  4. 第四个值是模糊度
  5. 第五个值是颜色
  • word-wrap:自动换行
  • transform变换效果    取值:
  1. scale 缩放       取值范围:0-1,1以上是放大

  2. skew 倾斜   给倾斜的角度:角度deg        正值:逆时针旋转         负值:顺时针旋转

  3. rotate 旋转   rotate(角度)         正值:顺时针旋转            负值:逆时针旋转

  4. rotateX(45deg)  X轴旋转       rotateY(45deg)  Y轴旋转          rotateZ(45deg)  Z轴旋转(默认值)          Z轴注:正值是顺时针,负值是逆时针

  • transform-origin:旋转原点的设置          默认值:当前元素的中心点(center center)            第1个值是(top/center/bottom)          第2个值是(left/center/right

  • animation动画

  • transition过渡         第1个值:属性            第2个值:过度函数           第3个值:时间

三:可替换和非可替换

           可替换:eg:图片,音频,视频,,,设置宽高无效,要想宽高有效,需设置display值

            非可替换:eg:文本类,,,设置宽高有效

四:解决兼容性: 1:引用重置文件

<link rel="stylesheet" href="./CSS/normalize.css">

                              2:用工程化scss文件

                              3:添加前缀

                                     常见的浏览器内核:
                                     浏览器类型         前缀        内核             JS引擎
                                     IE        微软    -ms-       Trident           JScript
                                     Firedfex  火狐    -moz-      Gecko             TraceMonkey
                                     Chrome    谷歌    -webkit-   WebKit.Blink      V8
                                     Safari    苹果    -webkit-   WebKit            SquirrelFish Extreme
                                     Opera     欧朋    -o-        Presto            Carakan 

五:为什么要把结构,表现相分离:为了方便维护和复用

六:布局方式
         1、两栏布局
                 方案一:左侧定宽,右侧自适应
                 注:要设置右侧和父元素最小宽度

          2、三栏布局

          3、流式布局
                  给定尺寸(宽、高)是百分比

           4、响应式布局
                   判断当前视口的宽度
                   判断当前访问页面的宽度

                      视口                               设备
                 1200px                              大屏幕、投影仪、电视
                 992px and 1200px            中等屏幕、小型笔记本
                 768px and  992px             小屏幕、平板
                 768px                                超小屏幕、手机

七:开发理念:

         1、用户群体(年龄、学历、地域、行业)
         2、功能(高版本浏览器、低版本浏览器)

         渐进增加:
                         先以低版本浏览器能识别的内容进行内容展示(先实现展示基础信息)再根据用户需求,进行功能的增加

         优雅降级:
                        先满足所有功能需求,再根据客户和低版本浏览器进行功能的删减

八:布尔属性:属性名=属性值  只用写一个   

        checked(默认值的设定)  multiple(下拉列表多选) required(必填项)

九:空白折叠

         在html中,一个或多个空格,一个或多个回车,在页面合并成一个空格进行显示,空白折叠仅适用于行盒内部或行盒之间
          解决方式:font-size:0   或者   verticle-align:bottom

十:当常规流遇到浮动:

       1、常规流盒子和浮动盒子混合摆放
                a:浮动盒子在摆放时,要避开常规流盒子
                条件:浮动在常规流之后添加

                b:常规盒子在摆放时,无视浮动盒子
               条件:常规流在浮动之后添加
       2、清除浮动

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值