zoukankan      html  css  js  c++  java

  • 对于一个小白来说，遇到的前端问题（2）

    1. 写在前面

    自从入了前端的坑。坑是越来越大，快把自己埋了。如今又開始搞样式了。

    2. CSS样式的写法

    CSS样式的写法有这么3种，以下我们一一介绍。

    1. 外部样式表

    链入外部样式表是这种，一般放在<head></head>里：

    <link href="mystyle.css" rel="stylesheet" type="text/css" media="all">…… </head>

    当中mystyle.css是自己写的CSS文件。内部大概是长这种：

    .text-center{
    vertical-align: middle;
    text-align:center;
    display: table-cell;
}
.vw {
        width: 50%;
        height: 50%;
    }
.contentstyle{
        transform: scale(0.95);
        border-left-color:black;border-left-width:1px;border-left-style:solid;
        border-right-color:black;border-right-width:1px;border-right-style:solid;
        margin-top:-13px;
}

    引入的时候，通过class来引入。像以下这样：

    <div class="mybackgrounds"  id="maindiv">

    2. 内部样式表

    内部样式表大概长这样：

    <head> …… <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> …… </head>

    3. 内嵌样式

    内嵌样式一般是这样子的：

    <p style="color: sienna;margin-left: 20px;"> 这是一个段落 </p>

    一般不推荐这第三种这种，一般使用第一种写法。easy管理，也便于重用。

    只是这三种样式也是有优先级的：内联式 > 嵌入式 > 外部式，可是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

    事实上总结来说。就是–就近原则（离被设置元素越近优先级别越高）。

    3. CSS样式表和Js文件位置

    一般来讲引用的外部js放在以下。外部css放在上面这是习惯，其原因例如以下：
    1. JS 有可能会改动 DOM.
    典型的，可能会有 document.write. 这意味着，在当前 JS 载入和运行完毕前，兴许全部资源的下载有可能是不是必需的。这是 JS 堵塞兴许资源下载的根本原因。
    2. JS 的运行有可能依赖最新样式。
    比方，可能会有 var width = $(‘#id’).width(). 这意味着，JS 代码在运行前，浏览器必须保证在此 JS 之前的全部 css（不管外链还是内嵌）都已下载和解析完毕。这是 CSS 堵塞兴许 JS 运行的根本原因。


    3. CSS要先渲染。


    CSS放在前端是页面渲染时首先是依据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，假设CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式非常丑直到CSS载入完毕。

    可是，现代浏览器之间的竞争也十分激烈。他们通常有自己的优化方式。能够进行prefetch优化，这种话。性能是如此重要，现代浏览器在竞争中。在 UI update 线程之外。还会开启还有一个线程。对兴许 JS 和 CSS 提前下载（注意，仅提前下载，并不运行）。有了 prefetch 优化。这意味着，在不存在不论什么堵塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先。和位置无关。

    4. iframe与变换缩放

    使用iframe的时候。最大的优点就是内网页不用自己写了，能够引用。可是一般会有一个问题。由于iframe有可能仅仅是我们自己网页的一部分，那么引用网页有可能是一个完整的网页，那么这样子的话，会造成显示上的问题。那这时候，事实上使用缩放来做，能够做一个折中的方案，毕竟原网页不是你想改就能改的。

    缩放也是有2种的。一种是ZOOM，还有一种是CSS3的transform:scale。那么他们有什么不同呢？

    1. 首先。他们的来源不同：
      还在几年前，zoom还仅仅是IE浏览器自己私有的玩具，可是，如今，除了FireFox浏览器，其它。尤其Chrome和移动端浏览器已经非常好支持zoom属性了。注意。尽管Chrome/Safari浏览器支持了zoom属性。可是，事实上zoom并非标准属性。
      而Transform则是CSS3标准，明明白确写入规范的。

      从IE9+到其它现代浏览器都支持。

    2. 其次，是他们写法不同：
      来看一下他们假设都是缩放一半，应该怎么写：
      .zoom-half { zoom: 0.5; }
      .scale-half { transform: scale(0.5); }
    3. 最后是他们的效果不同：
      zoom缩放是相对于左上角的，而scale默认是相对于元素的中心点缩放的。scale能够通过设置transform-origin来改变缩放的相对位置。当设置transform-origin: 0 0时。scale缩放能够达到和zoom缩放类似的结果。

    总而言之还是有一些差异的：

    1. 浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的区别。
    2. 控制缩放的值不一样。

      zoom更全面，可是不能是负数。仅仅能等比例控制；而scale尽管仅仅能是数值。可是能负数，能够仅仅控制1个维度。

    3. zoom的缩放是相对于左上角的；而scale默认是居中缩放；
    4. zoom的缩放改变了元素占领的空间大小；而scale的缩放占领的原始尺寸不变，页面布局不会发生变化；
    5. zoom和scale对元素的渲染计算方法可能有差异。

    6. 对文字的缩放规则不一致。zoom缩放依旧受限于最小12像素中文限制大小；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
    7. 渲染的性能差异明显。

    综合上述原因。iframe应当使用的是transform：scale放缩更好一些。

    5.背景渐变

    背景渐变这个应该简单的不能再简单了，简单来讲就是长这种：

    .mybackgrounds{
    background:-webkit-linear-gradient(top,#222222,#FFFFFF);
}

    这里详细的，来讲。background是设置背景，而-webkit-linear-gradient则表示线性渐变，(top,#222222,#FFFFFF)分别表示的是開始位置（从上到下），開始颜色（灰黑），结束颜色（白色）。更详细的能够看一下以下这里：背景渐变详细解释

    6. 输入框组

    输入框组就像之前提到的那样，boostrap里提供了一个简单的样式，可是还算美观。详细的写法例如以下：

    <div  class="form-group">
    <div class="input-group ">
        <span id="hotwordspan" class="input-group-addon">
        热点词汇
        </span>
        <asp:TextBox ID="TextBox2"  class="form-control"runat="server">
        </asp:TextBox>
    </div>
</div>

    尤为值得注意的是，class="form-control"输入框的这个class要加入。不然的话。输入框会比前一个span小上一部分，因此必须加上这个。

    相同的，<asp:TextBox ID="TextBox2" class="form-control"runat="server"></asp:TextBox>
    这个能够换成其它的组件。包含像下拉框、选择框、输入框等等都能够。

    7. 时间选择

    时间框也是非经常见的组件。我们来看一下长什么样：

    <div class="form-group">
    <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
    <span class="input-group-addon">选择日期</span>
    <!--这是终于获取日期的框-->
    <asp:TextBox ID="TextBox1" class="form-control" runat="server"></asp:TextBox>
    <!--这是一个清除图标-->
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <!--这是一个日期图标-->
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
    <!--这是一个展示日历框-->
    <input type="hidden" id="dtp_input1" value="" />
</div>

    这都写完了就完毕了么？不。这个组件被称为是Js组件，因此还须要写以下js代码：

     $('.form_date').datetimepicker({
                format: 'yyyy-mm-dd',
                weekStart: 1,
                autoclose: true,
                startView: 2,
                minView: 2,
                forceParse: false,
                //选择语言
                language: 'zh-CN',
                //今天button可用否
                todayBtn: true,
                //今天高亮否
                todayHighlight: true,
                //初始化日期
                initialDate: '2016-07-01',
            });

    当然。把这些都写完了以后，还是不成功的话。你须要考虑以下有没有引入这个：

        <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" />

    上一个是Bootstrap样式，下一个是datetimepicker组件。
  • 相关阅读:
    web安全之XSS基础-常见编码科普
    Web安全之URL跳转科普
    防止CSRF跨站请求伪造
    Web渗透之mssql LOG备份getshell
    Web渗透之mssql2005 差异备份getshell
    Web渗透之mssql差异备份getshell
    Web安全之url跳转漏洞及bypass总结
    一次对php大马的后门的简单分析
    一些渗透测试基础面试题
    MySQL数据恢复和复制对InnoDB锁机制的影响
  • 原文地址：https://www.cnblogs.com/yfceshi/p/7298354.html
Copyright © 2011-2022 走看看