对于一个小白来说,遇到的前端问题(2)
2017-08-07 11:38
411 查看
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。那么他们有什么不同呢?
首先。他们的来源不同:
还在几年前,zoom还仅仅是IE浏览器自己私有的玩具,可是,如今,除了FireFox浏览器,其它。尤其Chrome和移动端浏览器已经非常好支持zoom属性了。注意。尽管Chrome/Safari浏览器支持了zoom属性。可是,事实上zoom并非标准属性。
而Transform则是CSS3标准,明明白确写入规范的。
从IE9+到其它现代浏览器都支持。
其次,是他们写法不同:
来看一下他们假设都是缩放一半,应该怎么写:
.zoom-half { zoom: 0.5; }
.scale-half { transform: scale(0.5); }
最后是他们的效果不同:
zoom缩放是相对于左上角的,而scale默认是相对于元素的中心点缩放的。scale能够通过设置transform-origin来改变缩放的相对位置。当设置transform-origin: 0 0时。scale缩放能够达到和zoom缩放类似的结果。
总而言之还是有一些差异的:
浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的区别。
控制缩放的值不一样。
zoom更全面,可是不能是负数。仅仅能等比例控制;而scale尽管仅仅能是数值。可是能负数,能够仅仅控制1个维度。
zoom的缩放是相对于左上角的;而scale默认是居中缩放;
zoom的缩放改变了元素占领的空间大小;而scale的缩放占领的原始尺寸不变,页面布局不会发生变化;
zoom和scale对元素的渲染计算方法可能有差异。
对文字的缩放规则不一致。zoom缩放依旧受限于最小12像素中文限制大小;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。
渲染的性能差异明显。
综合上述原因。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组件。
相关文章推荐
- 对于一个小白来说,遇到的前端问题(1)
- 对于一个小白来说,遇到的前端问题(3)
- 对于一个小白来说,遇到的前端问题(2)
- 对于一个小白来说,遇到的前端问题(2)
- 对于一个小白来说,遇到的前端问题(1)
- 今天使用VS2012遇到一个问题:"链接器工具错误 LNK2026 XXX模块对于 SAFESEH 映像是不安全的"
- 网易面试题之小易是一个数论爱好者,并且对于一个数的奇数约数十分感兴趣。一天小易遇到这样一个问题: 定义函数f(x)为x最大的奇数约数,x为正整数。 例如:f(44) = 11. 现在给出一个N,需要求
- VS2012遇到一个问题:"链接器工具错误 LNK2026 XXX模块对于 SAFESEH 映像是不安全的"
- 邻乐帮:因为我怕下辈子遇不到你,所以给你当下最好的 人们说,遇到一个对的人的概率是很小的,如果没遇到,那么我们需要耐心去等,如果遇到了,那么,我们就要好好珍惜。 对于我来说,我现在的女朋友就是那个
- 网易面试题之小易是一个数论爱好者,并且对于一个数的奇数约数十分感兴趣。一天小易遇到这样一个问题: 定义函数f(x)为x最大的奇数约数,x为正整数。 例如:f(44) = 11. 现在给出一个N,需要求
- 网易面试题之小易是一个数论爱好者,并且对于一个数的奇数约数十分感兴趣。一天小易遇到这样一个问题: 定义函数f(x)为x最大的奇数约数,x为正整数。 例如:f(44) = 11. 现在给出一个N,需要求
- servlet前端jsp,遇到一个奇葩问题
- 最近开始使用vue,做一下对于新手来说遇到的问题
- linux编程遇到的奇怪问题(对于windows程序员来说)
- 基于自组网技术的智能无线抄表方案 现代生活中,水表、电表和煤气表的抄录和收费,是城市生活的一个大问题。人工入室抄表,扰民不说,还可能给居民带来不安全因素;对于各职能公司来说,派人上门抄表也无形中耗费了大量人力资源和时间。近年来,信息化社会在逐 步改变人们的
- 使用VS2012遇到一个问题:"链接器工具错误 LNK2026 XXX模块对于 SAFESEH 映像是不安全的"
- 今天使用VS2012遇到一个问题:"链接器工具错误 LNK2026 XXX模块对于 SAFESEH 映像是不安全的"
- 建站或者网站搬家换空间的时候,企业站长最关心的一个问题是该如何选择网站空间,而这一问题对于一些擅长的站长来说非常小意思,但对于部分企业站长来说是一个比较头疼的问题。根据不完整数据显示,很多企业站长因为
- 遇到一个IE升级到IE8之后脚本无法跑的问题。那么对于这样的问题,我们需要如何去处理?
- 前端开发在IOS端遇到的一个诡异问题(Delegate 失效)